Developping chrome extensions

As you can imagine I am not an advanced developer of extensions for Google Chrome but I would like to share with you what I have learned to develop my first extension.

4 days ago I had no idea about how it developed an extension and that only need 3 or 4 files, possibly some more if you want to develop something more advanced.

The first and most important is "manifest.json"

{     "name": "Title",     "version": "1.0",     "background_page": "background.html",     "options_page": "opciones.html",     "description": "Aprendiendo a usar archivos de configuracion",     "browser_action": {"default_icon": "icono.png"},     "content_scripts": [{ "matches": ["http://*/*"], "js": ["jquery.min.js"] }],     "permissions": ["tabs", "http://*/", "https://plus.google.com/" ] }

This file describes the overall configuration of the extension.
The field "background_page" is one that contains the name of the file that has the code that runs our extension.
The field "Browser_action" accepts various parameters, in this case we are defining the icon that will have our extension in the browser interface.
In "Content_scripts", as it somehow define what files we want to have available in our environment (jquery.min.js, in this case) and that websites (entire site).
Finally we have the "Permissions". In this field we will enable our extension to interact with web elements and there indicate.


The second file is background.html

<script> chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {     if(tab.url.indexOf("plus.google") != -1 && tab.url.indexOf("photos") != -1 ) {         if (changeInfo.status=="complete")             {             chrome.tabs.executeScript(tab.id, {'file':'jquery.min.js'});             chrome.tabs.executeScript(tab.id, {'file':'inyeccion.js'});             }     } }); </script>

This file is very simple.
Here you are going to define who will do your extension.
For example for you to understand quickly. , I am detecting when a tab is updated and detect when loading is complete.

If the URL of the website in which contains the words "plus.google" and "photos" then injected into the web the "JS" file that i have defined in my Manifest.json file and "inyeccion.js" that implements the various actions that get the purpose of the extension.

Of course this post is not intended to give an extension done. My purpose is to explain how it works in a way as simple as possible. Official help of Google is very useful, I recommend it