Chrome Extension Development

Everybody likes exciting stuff. Isn’t it? We have already used a number of chrome extensions for different purposes. But how about if we can build ones for us? Sounds difficult? Sometimes, things which looks and feels so great seems to be difficult to accomplish. But this is not the case with chrome extension development. If you are a web developer, Bang On!!

It is going to be really easy and fun task for those having good knowledge of html, css and javascript.

Pre-requisites

HTML

CSS

Javascript

Let’s learn:

Step 1: Open Google Chrome on your desktop/laptop. Visit chrome://extensions/ and then enable developer mode.

Step 2: Choose an HTML Editor for yourself, considering you have a good knowledge of HTML, CSS and Javascript, you should be having some good html editor. Feel free to use the one you are most comfortable with. My personal favourites are: Notepad++ and Sublime.

Step 3: Select an icon image for your extension. This image will be displayed next to the Omnibox, waiting for user interaction. Select one and place it in the directory you are currently working in. (I would suggest you to make a new directory for this extension to ensure better clarity).

Step 4: Design the display of the popup of your extension using HTML and CSS as you would normally do to design any web page.

Example html doc without much styling:

<html>

<head>

<title> Title goes here</title>

</head>

<body>

…Body goes here…

</body>

</html>

Step 5: Create a javascript file. All your business logic goes in here. (Don’t forget to attach this file in your html file within the head tag).

Step 6: Most importantly, you have to register your html file in a manifest file which will be a json file. Sample code:

{
 “manifest_version”: 2,

“name”: “NAME OF YOUR EXTENSION”,
 “description”: “DESCRIPTION OF YOUR EXTENSION”,
 “version”: “1.0”,

“browser_action”: {
 “default_icon”: “NAME OF YOUR ICON IMAGE AND EXTENSION EG. (ICON.PNG)”,
 “default_popup”: “popup.html(NAME OF YOUR HTML FILE)”,
 “default_title”: “Click here!(CUSTOMISABLE)”
 },
 “permissions”: [
 “activeTab”,
 “storage”
 ]
}

Step 7: Done with the development, now your directory should look something like this.

Congratulations!! you are done with the development of your first chrome extension. Now, time to load your extension on Google Chrome to check its functionality.

Step 8: Now, head back to the chrome://extensions/ page and click on “Load unpacked extensions”. Navigate to the directory in which your extension files are and select it.

If the extension is valid, it’ll be loaded up and active right away! If it’s invalid, an error message will be displayed at the top of the page. Correct the error, and try again.

Happy Coding!! Follow for more.. If you liked it, don’t forget to share it and feel free to share your feedback..