Google Chrome has come a long way since it's early days. I am a big fan of the Chrome Developer tools and use it in my day to day development. There are also loads of great tools and extensions that are on offer at the Chrome store, and most are available to download for free.
In order to build an extension, the main starting point is the Manifest.json file. This contains all the configuration settings and will be used when your extension is loaded into the browser.
From the code above, you can see that I am setting the name of the extension as well as the icons, titles, and description. All these values will get used by the browser when the extension is loaded up.
I used a little piece of code that is supplied by Feedburner.com to add a small feed on any website. Once this was in the page I was ready to upload the changes and test it out! In order to upload your newly created extension, click on the settings icon in the browser.
Then choose Tools -> Extensions
Next 'Load Unpacked Extension' - this will allow you to load your extension in the folder that it was created. It will look for the Manifest.json file and the feed.html file that it references. If you look in the top right hand corner of the browser, you should notice your new icon!
Now when we open it, it doesn't look that great - it could do with some CSS styling.
We can simply add this to the HEAD tag on the feed.html page.
Which then looks like this:
And that's it! In order to see the many features that are available - check out the Chrome Developer website. If you come across any issues while creating these extensions, I always find it really useful to use the Chrome Developer Tools to inspect the code for any errors. In order to do so, right click on your extension and choose 'Inspect pop-up'. This will give you easy access to debug your code.
I have also created a basic extension that is available on the Chrome store, it allows you to easily create QR Codes and Barcodes in a handy extension - it is available to download here.
Add your comment