How to develop a chrome extension – Beginner’s guide

Hello there! Today we are going to quickly build a chrome extension from scratch.

Chrome extensions are programs that can extend the functionality of the Google Chrome web browser. Examples of extensions could be: an extension that notifies you of a new email while you are browsing the web, or another extension that delivers you the latest news when you open a new tab and many more.

In order to show how simple it is to create a chrome extensions, I wrote everything you need to get started in 5 simple steps:

1.Create a folder called “MyFirstExtension”

2.Inside that folder create a file called “manifest.json”. The “.json” part is the file extension. If you create this file inside Visual Studio Code then it’ll be smooth 👌.

MyFirstExtension folder - How to develop a chrome extension
MyFirstExtension folder

3.Open the “manifest.json” file and past the following piece of code:

{
  "name": "MyFirstExtension",
  "version": "0.1.0",
  "description": "This is my first extension",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "type.png"
  },
  "manifest_version": 2

4.Now create that “popup.html” file mentioned on our manifest file. This file will hold the HTML for our popup.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <h1>My First Chrome Extension!</h1>
  </body>
</html>

5.Now open Google Chrome and go to Settings > More Tools > Extensions and activate developer mode on the top right-hand corner. An option to “Load Unpacked” will appear. Click on that and navigate to the MyFirstExtension folder and load it!

Chrome extension manager
Chrome extension manager

And that’s pretty much it! You will now see a new icon show up on Chrome’s top bar where most other Chrome extensions are located. If you click on it you should see this:

Chrome extension screenshot
Chrome extension screenshot

Come back next week for the continuation of this article. We’ll add some cool features to our little extension.

Thanks for reading, see you on the next one. 👍


Additional reading

How do I teach myself to code?

How does a website work?

Am I good enough to be a programmer?

Leave a Reply

Your email address will not be published. Required fields are marked *