Creating a chrome extension that uses jQuery to manipulate the DOM of a page
There are plenty of tutorials and guides on how to make a chome extension and there are hundeds for jQuery manipulation of the DOM. There are also a few about using jQuery in a chome 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 such as Notepad, Textmate or TextEdit 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 chome 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
{
"name": "jQuery DOM",
"version": "1",
"description": "Manipulate the DOM when the page is done loading",
"background_page": "background.html",
"browser_action": {
"name": "Manipulate DOM",
"icons": ["icon.png"],
"default_icon": "icon.png"
},
"content_scripts": [ {
"js": [ "jquery.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
}
The important part of the manifest.json is:
"content_scripts": [ {
"js": [ "jquery.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
The js tells the extension to load jquery and then ...