Computer Programming

How to build a Chrome Extension from scratch?

Chrome extensions are web based apps meant for chrome browser. So like any other web application it has a front end and a back end. So you should know the basics of web development to develop them.

But unless you are trying to develop an intricate chrome extension, you only need to know JavaScript, CSS and a tad bit of HTML. Only with front end knowledge, you can develop some beautiful looking, feature rich extensions. Besides this, you need to explore chrome browser APIs. Documentation by Google – What are extensions? , is very well written and ample. Also, you can always ask for help from online forums.

Where to learn web development?

For front end development tutorials, YouTube channel thenewboston has some good, informative videos.

Steps to create a simple ‘Hello world!’ extension:

  1. Create manifest.json
{
  "manifest_version": 2,
  "name": "My Chrome Extension",
  "version": "1.0",
  "description": "This is a demo",
  "icons": {
    "128":"icons/hello.png"
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Hello"
  }
}
  • name: Specifies the name of your extension
  • default_title: This will appear when you’ll hover upon extension icon
  • default_popup: This html will be displayed when you click the extension icon
  • icons: This will be the icon of your chrome extension.

2. Create popup.html

popup.html

<!doctype html>


<script src="js/popup.js"></script>

<body>
<div id ="main">
    <button id="hello_btn">Click Me!</button>
</div>
</body>
</html>

3. Create popup.js

popup.js

/**
 * Created by himanshu on 20/07/21.
 */

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('hello_btn').addEventListener('click', main);
});

function main() {
    alert("Hello! I am an alert box!!");
}

4. The directory holding the manifest file can be added as an extension.

  • Open the Extension Management page by navigating to chrome://extensions.
  • The Extension Management page can also be opened by clicking on the Chrome menu, hovering over More Tools, then selecting Extensions.
  • Enable Developer Mode by clicking the toggle switch next to Developer mode.
  • Click the LOAD UNPACKED button and select the extension directory.

Also read: https://www.aureollabs.com/python-basics/

Bookmark Manager

I have myself developed a chrome extension Bookmark Manager, last year and it has got some good feedback from the people.

Developing an app/extension is an iterative process. You tend to improve your app subsequently. I was a back end engineer with 2 years of experience when I started developing this chrome extension. 

Happy programming!