Chrome extensions Intro

If you know Javascript then it is very easy to create an extension for chrome. Search for chrome extension docs and you will find each and every API that you can use. But there are few things I would be writing, that would help you start quickly.

=> The ‘manifest.json’ file is the starting point of your extension. It’s just like package.json if you have developed any node application. e.g.

{
   "manifest_version": 2,
 "name": "This is the name",
   "description": "This extension description",
   "version": "1.0",
   "background": {
     "scripts": ["background.js"]
   },
   "content_scripts": [
    {
      "matches": ["http://specificdomain.com/*"],
      "js": ["content.js"]
    }
  ],
   "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "status.html"
   },
   "permissions": [
    "tabs"
    ]
 }

Now each block is defined below:

1. manifest_version: It is to tell the browser that which version of specification are in this manifest file. Currently version 3 is latest one, so you should use that.
2. background: Here you can define a number of JS files which would run in background and would have access to various ‘chome.*’ APIs. These are APIs can’t be used in normal content scripts.
3. content_scripts: These are normal scripts that are injected in pages. These scripts have access to DOM.
4. browser_action: It contains the code for the popup page, that would be opened when anybody click on extension in the browser.
5. permissions: Most of APIs in background scripts need permission to run, and you have to define those permissions here. If you call an API that need a specific permission and that is not defined in this section, then that call will be ignored.

To communicate between the background JS files and content scripts, the browser provides port mechanism, or listener mechanism.

Now it’s your code that will do the rest of the talking.

For more reference you can see the code of other extensions (But most of those would be minified, But still you can beautify and try to understand). The installed extensions code could be found in below directory in windows:

C:\Users\UserName\AppData\Local\Google\Chrome\User Data

In the above path ‘UserName’ is the name of you login profile of windows. In ‘User Data’ directory you have to find the profile of chrome in which you have installed the extension. By default the chrome uses ‘Default’ named directory, inside that directory you would find another directory with name ‘Extensions’ and inside that you have various random names generated by chrome for extensions. So, go into each and try to understand the coding practices.

Cheers and Peace Out!!!