Google Chrome Extensions–short development primer

I think a browser extension is the best place to get started because it’s easier to see immediately how an extension ties together.

To create a “hello world” browser extension we’ll need –

manifest.json

The properties of our extension are described in a JavaScript object (JSON). This tells Chrome what kind of extension we are creating (which affects where the icon gets placed) and other useful details that the user sees. The format is something like this –

Required properties – if we get any of these wrong an error will be shown

  • Dictionary keys must use double quotes
  • Version must be specified

Recommended properties –

  • name
  • type
  • description
  • icons –

popup.html

This is the page that will be displayed when a user clicks on our extension icon. Imagine it is a proper HTML page with head, body and everything. We even don’t have to insert html, head or body tags although most extensions do.

icons

In order to display an icon on the extension management page we have to specify a 128×128 px version of our icon through the “icons” property So we’ll need two icons – one 128px square and another 19px square. An easy way is to create a 128 x 128 px icon in a png format and also save it as a 19 x 19 px version. You can name them “icon_128.png” and “icon.png” respectively.

That’s all we need for now.

Installation

Download this file and unzip it – Google Chrome Extension – hello world

In Chrome click on the “Settings” icon (the spanner/ratchet) and select “Extension”. This will take you to the extension management page.

In the top right corner click on “Developer mode”. This will allow us to load an extension on our computer.

Click on “Load unpacked extension” and navigate to the location of the unzipped extension.

Once loaded an icon will appear in Chrome outside of the address bar – to the right.

If you click on this you will the contents of popup.html appear

That’s it for now.

Make a comment or post any questions that you have. 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s