Alex Brown

Create a Google Chrome Extension

In Development, Web
March 25, 2011
5 Min read
1 comment
C

I’ve been meaning to look into creating a Google Chrome extension for a while.

Earlier this week, I successfully RickRoll’d Rob Ashton on twitter, which in turn, after a RT, RickRoll’d several others. Many of whom replied with tweets like

So, that got me thinking.

What if there was a way to stop you being RickRoll’d. Then I remembered I wanted to learn how to create a Google Chrome Extension… The two ideas fused, and RickMeNot was born.

Step 1 – Create a Manifest File

I created a RickMeNot directory (and init a git repo, of course…)

Then, create a new file using <insert your favourite text editor here>

All  extensions, installable web apps and themes have a manifest file.
This is a JSON file, needs to be called, quite descriptively, manifest.json.

Read more on Manifest Files

The manifest.json for RickMeNot looks like this

{
  "name": "RickMeNot",
  "version": "0.1",
  "description": "Prevents you from being rickroll'd.",
  "background_page": "background.html",

  "permissions" : [
    "tabs"
  ],

  "icons" : {
    "48" : "icon-48.png",
    "128" : "icon-128.png"
  }
}

Most of this is fairly self explanatory.

What we’re basically doing, is setting the name, version and description of the extension.

We then specify the background_page.

A background page, is basically a long running script that manages a task in the background, while the extension is active.

This particular extension won’t need a fancy button (Browser Action) or anything like that, so we only need to specify our background page.

Permissions

One thing to take not of is the permissions array.

This particular extension needs to be able to access the urls of tabs etc… so, we’ll need permission to use “tabs”.

Background Page

Ok. So we have our manifest file that tells the extension what to do, so now we need to create a file that tells it how. This will be where the main functionality of this extension is.

Although this is a .html it doesn’t have to contain the usual doctype and other tags.

It simply needs a <script> and </script> tag, with all the script for the code in between.

Let’s start real simple:

<script> chrome.tabs.onUpdated.addListener(tab_updated); </script>

What this does, is add an event handler for the tabs.onUpdated event.

As expected, this fires when a tab (any tab) is updated.

Note: I’ve called our callback tab_updated – this can of course be called anything.

Our tab_updated function looks like this:

function tab_updated(tabId, changeInfo, tab) {
    for (a in rickUrls) {
        if (tab.url == rickUrls[a]) {
            chrome.tabs.update(tab.id, { url: 'savedFromARickRoll.html' });
        }
    }
};

Ok- so what this does, is loop through all the values in our (as yet undefined) rickUrls and checks if the tab.url (the value from the passed in tab object) is equal to one of the values in our array.

If it does, it updates the tabs url (think of this as a redirect) to “savedFromARickRoll.html” (more on this later)

Populating our array using body onload

So, now we need to populate our rickUrls array.

While our background page doesn’t have to have HTML tags, it can. It can also contain some client side executed javascript.

In this instance, we’re most interested in executing the body onload event

In our background.html we simply add:

<body onload="init()">
</body>

Our “init” function is in between the <script> </script> tags and looks like:

function init() {

    rickUrls = new Array(
      "http://www.youtube.com/watch?v=oHg5SJYRHA0",
      "http://www.youtube.com/watch?v=EK2tWVj6lXw",
      "http://www.youtube.com/watch?v=XZ5TajZYW6Y"
      )
}

In version 0.1, we’re just hardcoding a few of the known youTube URL’s

In later versions, I’ll rewrite this to check an external file / service or something to get an up-to-date list of them.

Putting It All Together

This is what our background.html looks like:

<script>

    // Simple array containing the URLs of Rick Astley - Never Gonna Give You Up videos.
    // In this version, we're hard coding it, however later on, we'll make this dynamic
    var rickUrls = new Array();

    // Function that is called on the body onload event
    function init() {

        //fill our array with the URLs
        rickUrls = new Array(
		"http://www.youtube.com/watch?v=oHg5SJYRHA0",
		"http://www.youtube.com/watch?v=EK2tWVj6lXw",
		"http://www.youtube.com/watch?v=XZ5TajZYW6Y"
		)
    }

    // This function is called by the listener we added, when the url of a tab changes.
    function tab_updated(tabId, changeInfo, tab) {
        for (a in rickUrls) {
            if (tab.url == rickUrls[a]) {
                chrome.tabs.update(tab.id, { url: 'savedFromARickRoll.html' });
            }
        }
    };

    // Listen for any changes to the URL of any tab.
    chrome.tabs.onUpdated.addListener(tab_updated);

</script>

<body onload="init()">
</body>

Files within an Extension

An extension can contain files, like our savedFromARickRoll.html, and you can reference them locally.

This also applies to images (see the image in our savedFromARickRoll.html – noRickRoll.jpg)

You can’t however, refer to anything else on disk (c:\ or anything like that)

This is obviously for security reasons.

Source

I’ve put all the source for this post on GitHub

You can download it here: https://github.com/alexjamesbrown/RickMeNot

What’s next…

I’ve got a couple of follow up posts planned on this.

Firslty, a short one on how to list your extension in the Google Apps Marketplace (will add link as soon as it’s ready)

Also, when I get time, I’ll write a post along the lines of calling external services to get a list of updated Rick URLs

FacebookXReddit

Read more

Alex Brown