Google Chrome is one of the most popular browsers used today, and Chrome extensions are one of the most useful tools one can have for work or entertainment purposes. Therefore it would be extremely helpful for one to have the basic know-how on how to build a Chrome Extension.
For advanced Web Developers, you may refer to my Github Repository to have a quick understanding of the basic structure of a Chrome Extension.
Other than the official Chrome Developer Website, I have also used this tutorial by Jason Sonmez to build my first Chrome Extension. This tutorial includes my published Chrome extension, Rdirect as an example.
Alright I’ll cut the crap, let’s start building our first extension!
Where do we begin?
Create a basic folder structure
At the very least, you should have these files
:: Basic information and settings of the chrome extension
Some points to note:
- Manifest version 2 is currently the latest required version for Chrome extensions
- “options_page” is used if you want to allow the user to add personalised settings for the extension. This page will appear when the user clicks the options hyperlink of the extension at chrome://extensions/
- “browser_action” Allows the developer to set icon and actions of the chrome extension button.
- Permissions allow the developer to declare and access different functions/actions of the browser on the client side. This is important for the developer as it allows the developer to use chrome’s vast range of APIs.
- “background” allows developer to set background page. Some developers prefer to use popups upon clicking of browser action button. This is customizable. Implement the extension as you please!
:: a 38x38pixels image that you want as your browser action button. A better quality image is recommended during publishing of the Extension. (Rdirect.png in my example)
Testing and Debugging
After building the extension, it is time to test it out. In your browser, go to chrome://extensions/ and click on “Developer mode”.
For debugging purposes, click on the background page to inspect views. Debug as per normal web application. For chrome extensions built with popups, right click, inspect element on the popup window.
Publish your Chrome Extension
To publish, simply follow instructions on the Chrome Developer Dashboard. Pay the US$5 developer fee, create a logo or promotional tile using Adobe Illustrator and Photoshop, and you’re good to go! (I used this Youtube tutorial for my logo). Before publishing, you might also use Google Analytics to keep track of your Extension!
Thank you for reading my tutorial. For any questions, do leave a comment! If there’s any advice to help me improve on my tutorial or my published Rdirect Chrome Extension, do not hesistate to leave a comment!