Google Chrome Extension Tutorials - Hello World

This is the first post in a series of tutorials on building Google Chrome extensions. Google Chrome has established itself as the browser of choice boasting a 50%+ market share since March. Part of its success is Google's willingness to let developers extend and improve it. I have been getting to know the extensions platform for some time now and I thought it would be a good idea to document my findings as I delve deeper into the abyss.

In this first post I will explain a couple of the the basic concepts that you need to know in order to build a simple Hello World extension. I will also tell you what you need to do to get a local copy of your extension working in your browser. This will give us a solid foundation that we will expand upon as we go through the series.

Code from this tutorial is available on GitHub.

The concepts we will be covering today are:

1. Manifest Files
2. Content Scripts
3. Loading Unpacked Extensions

Before we get started it is worth pointing out that creating Google Chrome extensions does require a fair level of JavaScript knowledge. If you are not familiar with JavaScript then take a look on W3Schools and work your way through the courses at CodeAcademy.

Manifest Files

Think of this as the skeleton of your extension; it is where you tell Chrome everything it needs to know and where to load any resources it'll need. In reality it is nothing more than a JSON document called manifest.json that specifies all the important information about your extension. I am only going to cover a few of the fields that you can specify in in the manifest file. For an extensive list of what else is available take a look at the Google API docs.

Before we get into the interesting bits we need to add a few required fields; name , version and manifest_version. The first two are pretty self explanatory and manifestversion just specifies which manifest schema is used. You want this to be 2 unless you are building for an old version of Chrome. It is also best practice to add description, **homepageurl** and icons but for simplicity I will be leaving the icons out.

{
    "name" : "Chrome Extension Tutorial",
    "version" : "0.0.1",
    "description" : "A simple google chrome extension",
    "homepage_url": "http://www.macsentom.co.uk/",
    "manifest_version" : 2
}

Content Scripts

Put very simply, content scripts give you the ability to read and manipulate data on web pages using your own custom JavaScript or CSS code. However there are a couple of important things to note. Content scripts are executed from within a sandboxed environment whilst maintaining access to the DOM. This means that they will execute on the page without interacting with any other scripts on the site. This also means that they cannot interact directly with other scripts within your extension. A process known as message passing needs to be used - but more on that later.

In order to add a content script to your extension you need to update the manifest file.

{
    "name" : "Chrome Extension Tutorial",
    "version" : "0.0.1",
    "description" : "A simple google chrome extension",
    "homepage_url": "http://www.macsentom.co.uk/",
    "content_scripts": [{
        "matches" : [
            "http://*/*",
            "https://*/*"
        ],
        "js" : ["scripts/content.js"]
    }],
    "manifest_version" : 2
}

The first thing that we've added is the matches field. This filters which urls will load the content scripts. Next we specify js which gives us the relative path to the JavaScript file(s). Now we just need to create the file and give it the following content:

alert('Hello World!');

Loading unpacked extensions in Chrome

To load your new extension in to Chrome you need to go to the extensions settings page. First you'll need to make sure that Developer mode is ticked. This will reveal an option to "Load unpacked extension...". Here you want to navigate to the location of your manifest.json file.

Once loaded your new extension will show in the list displaying the details from manifest.json. To try it out simply open any web page - I suggest this one.

Now I'll admit that this isn't doing anything impressive; it's not even doing anything useful, but hopefully it'll give you a basis to build upon later on in the series.

Tags

• Javascript
• Chrome Extension