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!
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!
2. background.js
:: Javascript file that runs in the background if the extension is installed on Chrome. Do check out my background.js file for a better understanding. Basically I added an event listener to the browser action button, and run the script upon the click.
3. icon.png
:: 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!
Final words
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!
Rdirect is a published extension used for redirecting pages at lightning speed. (Especially useful for hiding from bosses, parents and spouses :)) Support me and Download it now!
Originally published at http://royleekiat.com on August 24, 2015.
