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 –
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 –
- icons –
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.
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.
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. 🙂