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!!
Step 1: Open Google Chrome on your desktop/laptop. Visit chrome://extensions/ and then enable developer mode.
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:
<title> Title goes here</title>
…Body goes here…
Step 6: Most importantly, you have to register your html file in a manifest file which will be a json file. Sample code:
“name”: “NAME OF YOUR EXTENSION”,
“description”: “DESCRIPTION OF YOUR EXTENSION”,
“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)”
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..