Creating basic chrome extensions

Codegram Lightning Talks

Marc Divins (@mdivins) - Twitter, GitHub

What is an extension?

Extensions are essentially web pages (html+js+css), and they can use all the APIs that the browser provides to web pages, from XMLHttpRequest to JSON to HTML5. Common features are boosted with a Chrome.* API.

What is it used for?

Selecting main behaviour

Basic architechture

As you see, all except manifest are optional, but you need at least one to make your extension do something xD.

Basic: Codegram troll faces

Basic contentscript that will swap Codegram members pics at with trollfaces.

None Browser or Page action will be used so we are talking about none 'preset behaviour'.

Create a folder inside your projects directory and create a file named 'manifest.json':

You must now add files especified in manifest.json in the same folder of the extension.

For basic.css just add following lines:

For jquery.min.js visit jQuery official site.

Content Script: It runs in it's isolated world, they only have access to DOM elements of the current page. So, content scripts have some limitations. They cannot:

This lets you ie. load jQuery even if current page has already jQuery loaded (different versions included).

Content scripts can indirectly use the chrome.* APIs, get access to extension data, and request extension actions by exchanging messages with their parent extension.

In contentscript.js add the following code:

Just a little bit of jQuery here, we are getting all Codegram member images and changing the pic with a trollface.

So, as we have no access to other files of the parent extension (except for especified in manifest) we need to take advantage of chrome.extension API (ln 2).

Finally, enable the extension in Chrome.

If all goes Ok extension should be loaded. So if you go to you should see some changes :D

Page Action: Intercom Messages

Next example will be about Page actions.

At Codegram we use '' as feedback system for our products.
There are weeks that some introduced bug or feature makes us send the same answer again and again and there is no "common answers" tool in Intercom.

So I build my own extension which loads a json with common answers. This messages are shown in a popup when you click Page action icon, and when you click an especific message, it's inserted into answer input field.

This example is not complete, it will just show an alert when messages are clicked and no json is loaded.

First we must make action icon/button appear. Create 'background.js' and put the following:

I'm still not sure if it's the best way to do it, but is the only one I could made it work.

So 'popup.html' is what we see when we click page action icon:

Meh! For presentation issues I had to finish scripts with a double 's', fix it!

Finish with 'popup.js'. For example purposes I just made an alert, but I'm sure you have more interesting things to do :)

In ln.3 we have to call 'tabs.executescript' because we are not in the current page environment, we are at extension one. You also need 'tabs' permission to do that.

Hint: Instead of passing raw code like in ln.4, we could pass a .js file:

Browser Action: "Options page"

Browser Action works nearly the same way as Page Action. Main difference is that icon is always available at chrome's toolbar. Manifest is sligthly different and you don't need any additional js to show it's icon. So we are not going to repeat how 'popup.html', blah blah is implemented.

Instead, we are going to look how to create an options page for our extension and how to retrieve data in our content_scripts.

Following code is for 'options.html'. This just save an input into localStorage. You could access to this page through Extension Manager, there is an "Options" link next to your extension's description.

Now it's time to retrieve stored data. From content script we don't have access to it. If you try to do:

You'll get data from current page not from extension options. To get options data, we have to talk with background and ask them to return us requested info. We'll see how it works in next page.

This goes to 'background.html':

We add an onRequest listener. When someone makes a request to background, this returns something to the sender. In this case, it returns localStorage passed key.

This goes to 'showscript.js':

In order to give access to parent extension data, we have to use 'chrome.extension.*' again. This time we make a request to background, and when we have a response, we just 'alert it'.

This is how we retrieve data saved in options page.

Release your extension

You could send your extension folder to anyone, and ask them to load it as you exactly do. Another way is to pack your extension as a .crx file.

To do that, go to Extension Manager and click 'Pack extension...'. Find extension folder and leave 'key field' blank. Once done, you'll get a .crx file that is used to install your extension. You'll receive a key file too, which you'll need to make updated versions of your .crx file.

For more information about releasing new versions and distributing your extension take a look at:

Thanks for your time!

By Marc Divins (@mdivins - Twitter) (/divins - GitHub)

Use spacebar or the arrow keys to navigate
See all slides