Creating a chrome extension that uses jQuery to manipulate the DOM of a page
Dec 8, 2011
There are plenty of tutorials and guides on how to make a Chrome extension and there are hundreds for jQuery manipulation of the DOM. There are also a few about using jQuery in a Chrome extension, but only for the popup window. There seems to be a lack of using jQuery to actually do something on a page. This is something that too me a while to get my head around and a bit of googling to figure out, so now it's time to share.
Create a folder for the extension files. It's probably best to name it after your extension so you can find it later on.
In a plain text editor create 3 blank documents. You can save the files as manifest.json, background.js and background.html.
Using your favorite image editing software create a png icon with a transparent background (20px x 20px should be ok for now). Chome should scale the icon for the different areas it shows. Later we can create different resolution icons and tell chrome to use them.
Get a copy of jQuery and add it to the folder.
In your folder you should now have the following files:
manifest.json
background.html
background.js
icon.png
jquery.min.js
Let's go over what each of the files will contain, and then what that does.
manifest.json
1{
2 "name": "jQuery DOM",
3 "version": "1",
4 "description": "Manipulate the DOM when the page is done loading",
5 "background_page": "background.html",
6 "browser_action": {
7 "name": "Manipulate DOM",
8 "icons": [
9 "icon.png"
10 ],
11 "default_icon": "icon.png"
12 },
13 "content_scripts": [
14 {
15 "js": [
16 "jquery.min.js",
17 "background.js"
18 ],
19 "matches": [
20 "http://*/*",
21 "https://*/*"
22 ]
23 }
24 ]
25} The important part of the manifest.json is:
1"content_scripts": [{"js": ["jquery.min.js", "background.js"], "matches": ["http://*/*", "https://*/*"] }] The js tells the extension to load jquery and then your custom js file (background.js). The matches let you control what pages the extension can run on. In this case it is all http and https pages. You could restrict it to just one page.
icon.png
It's just a png image.
jquery.min.js
The minified version of the jQuery you need to use. Doesn't have to be minified, but we might as well.
background.html
Not always needed, but I have included it in this example. You can read more about it on google's extension page . Since I am not doing anything, mine is just an empty document.
1<!doctype html>
2<html>
3<head><title>Background Page</title></head>
4<body></body>
5</html> background.js
This is where we get to use our jQuery. There is no need for a document ready listener as the extension is actually loaded after the page so that page loading isn't affected.
1$("body").append('Test'); Once any page loads it will append a paragraph with 'Test' as the text. Obviously we can do much more interesting and fun things, but that is for you and your jQuery magic to do.
Adding the extension to chrome
Now we have all the files and they all have the right content we need to add it to chrome.
- Bring up the extensions management page by clicking the spanner icon and choose
Tools > Extensions - Tick the developer mode checkbox
- Click 'Load unpacked extension' and select your folder and click 'OK'. If all the files are valid and named correctly the icon should appear next to the address bar with the other extensions. Any changes you make will need to be reloaded by clicking reload in the extensions page for your plugin.
If you now refresh a webpage it should append a paragraph with 'Test'
Download the whole example extension and have a look to see how it works.
You can also clone the repo from github .
EDIT:
Creating a chrome extension - an update now follows up this article with a more up to date guide that addresses the issues that have been commented here.