Springboard Project: Chrome Extension
Not everyone is satisfied with functionality in browsers nowadays. In order to acquire that functionality, people often turn to browser extensions that functionality in order to accomplish the tasks needed.
For reference, you should keep a browser open to the Chrome Developer Centre. It’s a good reference to go to should you have any questions on what does what.
The best place to start is to actually create the extension itself so we can work with it. There are a lot of good boilerplate generators, or you can create one yourself by following the directions in Chrome’s documentation. The one this guide is going to use is Extensionizr, a boilerplate generator.
Start by opening your browser and navigating to
site provides a lot of controls, and we won’t go through it in too much detail,
but most options have a help menu attached to them so you can read about it
For our extension, select the following:
- Extension type: Browser action
- Background page: No background
- Options page: No options page
- Override: No Override
- Content scripts: Inject js
- Misc addons: Select none.
- URL permissions:
*://*/\*(we want all permissions)
- Permissions: Shouldn’t need any, so deselect “Bookmarks” and anything checked.
Now download and extract the generated ZIP file. Chrome seems to think that it’s a dangerous ZIP sometimes, but it’s not - we promise! If you’re having trouble downloading the ZIP, you can use our pre-made one here.
Let’s see our pre-made extension skeleton! To do so, click options, then
More tools and
Developer mode at the top of the
extensions page if you haven’t done so already, then click
Load unpacked extension. Navigate to the
ext directory you unpacked earlier
and select it. This should load a new extension,
CHANGE THIS : Extension boilerplate. Congrats! You now have a working
extension. But it doesn’t do anything yet!
Changing “cloud” to “butt”
We need to modify this extension to fit our needs. To do this, it is useful to have a text editor that supports you every step of the way. Sublime Text (http://www.sublimetext.com, free evaluation) and Atom (https://atom.io, free) are two of the most popular text editors that can help you get started. Choose one and download it, then open it up and navigate to the folder that you extracted from the ZIP file.
First off, you’ll notice that if you navigate to Google and
open the console, you’ll see the words
Hello. This message was sent from scripts/inject.js when it finishes loading.
This exists in “scripts/inject.js”, and proves to us that Chrome is injecting
Every page you visit is called a “document”. The document represents the page that you see whenever you load the page itself - the buttons, links, alignment, images, and more. Documents consist of “nodes”, which represent these buttons, links, alignment, images, etc - “elements” of the page.
Since our extension is going to replace “cloud” with “butt” in all the text on the page, we should act accordingly:
So what’s the goal of this extension? The goal of our plugin is to visit all the nodes of the document, and when we encounter a text node, replace all occurrences of “cloud” with “butt”.
So let’s do it!
Challenge: Stop here and try to do it on your own. Your way might be different than the one used in this guide, but the goal here is to get it working! No one solution is correct, and there might be more efficient ways than others.
First, remember how I said that we have to add other websites? That’s because
right now, we’re only watching Google.com. We need to fix that. In our
manifest.json file, change:
"matches": [ "https://www.google.com/*" ],
to all sites:
"matches": [ "*://*/*" ],
file that runs when the page has completed loading. We can use this to then
modify all the occurrences of
Here’s what our
inject.js looks like. Yours might be different:
Reload your extension, navigate to a page that has
cloud, and voila! It’s
Now that you have a working extension, it’s time to customise it to your liking! These are all challenges that you can do, and we will leave it to you to figure them out. Some of them are obvious, some of them aren’t, but we have faith that guys can do it!
Challenge: Modify the name, description, and author of your extension.
Challenge: Make a creative picture for your extension!
Challenge: Find different ways for your extension to run. How else can your extension run?
Challenge: Make an options menu to enable and disable the extension.
Challenge: Expand the extension to add more word to word options.