Creating a chrome extension - an update

Since I wrote my last post on creating a Chrome extension , there have been a few changes to how the extensions are built - mainly that the manifest version has changed to version 2. The original post is still fine, but there are a few tweaks needed. This post is mean mainly as an update to the original, so rather than rehash the old content too much I will skim over the basics quickly.

• Create a folder for your plugin - name it after your extension so you can find it later!
• In a text editor create 4 documents.
• Save them as manifest.json, background.js, background.html and customStyles.css
• Create a 20px x 20px png file using your favorite image editor!
• Get a copy of jQuery . and add it to the folder.

Files

manifest.json

1{
2  "name": "plugin name",
3  "version": "0",
4  "description": "What do I do as an extension",
5  "background": {
6    "page": "background.html"
7  },
8  "manifest_version": 2,
9  "browser_action": {
10    "name": "Manipulate DOM",
11    "icons": [
12      "icon.png"
13    ],
14    "default_icon": "icon.png"
15  },
16  "content_scripts": [
17    {
18      "js": [
19        "jquery-2.0.2.min.js",
20        "background.js"
21      ],
22      "css": [
23        "customStyles.css"
24      ],
25      "matches": [
26        "http://*/*",
27        "https://*/*"
28      ]
29    }
30  ]
31} 

jquery-2.0.2.min.js

A copy of jQuery. Might as well be minified.

background.html

Not always needed, but we are covering the basics so here it is!

background.js

Once the page has loaded the js in this file will be run. This happens after DOM load so no event listeners are needed.

Add it to Chrome

Now all we need to do is add the extension to chrome.

• Tools > Extensions
• Tick the developer more checkbox
• Click 'Load unpacked extension' and select your folder. Any errors in your files will be shown. This doesn't include JS errors and is only things like missing files or malformed manifest.json

As you update your extension just keep clicking the 'reload' button, then refresh the webpage you are applying the extension too.

TLDR:

I have created a Chrome extension starting bundle on GitHub to get you started right away. Take a look and let me know what you think.