Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Creating your own Chrome extensions
4288
single,single-post,postid-4288,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
code

Creating your own Chrome extensions

Creating extensions for Google Chrome is surprisingly simple to get started with. If you can build a website, you can build an extension.

Setting things up

The starting point for any extension is to create a manifest file called manifest.json. This file contains all of the properties of the extension, such as title, version, and required permissions.

A basic manifest file would look something like this:


{
"manifest_version": 2,

"name": "Dstrongo Extension",
"description": "This shows things.",
"version": "0.1",

"permissions": [
"http://*/*",
"https://*/*"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}

Next you’ll need to create the assets popup.html and icon.png. These can be named whatever you want, but you’ll need to make sure that they match what is listed in the manifest file.

The file popup.html will contain the HTML of the popup that will appear when you click on the extension icon, which will be icon.png. Once you have these basic assets in place, you can add your extension to Chrome to test it out.

file_structure
Basic file structure

Loading your extension

Now that you’ve got you files in place, you need to install you extension. To do this, open up Chrome and navigate to chrome://extensions or click on the Menu Button > Tools > Extensions. At the top of page check the Developer Mode checkbox. The developer buttons will appear. Next click on Load unpacked extensions… and select your working directory.

Chrome will tell you if anything is wrong (it’s very picky), otherwise the icon for you extension should appear in your toolbar.

Success!
Hurray!

Make it do something

So now you have an icon that opens a blank page when you click it. Not very exciting. So we’re going to use this as a chance to fix a common problem of the internet—not enough llamas.

To accomplish our task, we will need to add a section to the manifest file called content_scripts. A content script will allow us to interact with webpages directly, allowing us to insert some much needed llama goodness.

"content_scripts": [ {
"js": [ "content.js" ],
"matches": [ "http://*/*", "https://*/*" ],
"run_at": "document_end"
} ]

What this little chunk of code does is tell Chrome to run the script content.js on every page, after it has loaded. Other options for run_at are document_start and document_idle, which run before page render and when the document is idle respectively.

Now create the script file content.js, and inside the file write

console.log('Hello! I'm llama-ing your page!");

Save the file, go to chrome://extensions and click on reload. Now open a new tab and go to any website and look at the JavaScript console.

llama-console
I don’t think Google’s websites usually say that

Now that we confirmed our script is running, we need to add llamas.

First we need a llama. Since I (sadly) don’t own any llamas, I found this lovely specimen via a simple image search.

magificent_llama
A majestic beast

Once you’ve chosen your llama, place the image inside the extension directory, and add the following to you manifest

"web_accessible_resources": ["magnificent_llama.jpg" ]

This will allow us to access the image contained in the extension for use in content scripts.
Try inserting the following code into your content.js, reloading the extension, and then visiting http://bbc.co.uk

var img = document.getElementsByTagName('img');
for(var i = 0; i < img.length; i += 1) {
img[i].src = chrome.extension.getURL("magnificent_llama.jpg");
}
Before and after llama-fi-cation
Improving the BBC’s website

And just like that, the internet is 100% improved. The next step is to package up your extension so you can install it on your mom’s computer.

Packing it up

The free way
This method is for people who don’t want to pay the $5 one-time fee to put your extension on the Chrome Webstore. If you plan on just using your extension for yourself, or sharing it with a few people, then this way will suffice.

Packaging the files is a pretty simple process. In the chrome://extensions view, click on the Pack extensions… button, select your extension directory for the Extension root directory field and click Pack Extension. The Private key file is only used if you are updated an already packaged extension (but I’m not going to get into that). You should now have a .crx file saved where your extension directory is located. Now to install this

The right way
If you’re ready to enter the big leagues and publish your creation on the Chrome Webstore, then you’ll need to set up a developer account and then refer to here.

Conclusion

This post covers the basics of making a content-script, but there are many more things to cover. If you’re interested in learning more about extension development, refer to the Chrome Extension API.