Unleashing Your Browser’s Superpowers: Building Your First Browser Extension

Browser extension — part 1

Browser extensions are like superpowers for your browser. They give you the ability to customize and enhance your browsing experience in a variety of ways. With extensions, you can block ads, manage tabs, translate languages, and much more.

The simplest extension without action

The smallest working extension must consist of one filemanifest.json and three keys manifest_version,name, version. This file is the extension’s blueprint, telling the browser which files to use and outlining its capabilities. It’s a fundamental building block for any extension.

Manifest

• 📄 The extension manifest is the only required file and must have a specific filename: manifest.json.
• 📢The manifest file tells the browser which files to use and what the extension can do.
• 🔄 Every change requires reloading

Adding an Extension to Your Browser

Now that you have written your first browser extension, let’s integrate it with your browser. Follow these three steps.

1. Locate the Extension Icon:

• Find the puzzle icon on your browser’s toolbar, often named “Extensions.”

2. Enable Developer Mode:

• Once you’ve located the icon, give it a click.
• Look for the “Developer mode” option and ensure it’s activated.

3. Load Your Extension:

• Spot the “Load unpacked” button that appears after enabling Developer mode.
• Click on it and navigate to the folder containing the manifest.json file.
• Select the folder, and voilà! Your extension is now added to your browser.

Manifest Essentials

”manifest_version”

Can use version 2 or 3. Using manifest version 3 is highly recommended.

”version”

Version “4294967295.4294967295.4294967295.4294967295”

• The version key is a string of characters that identifies the version number of your extension. Consists of one to four dot-separated integers that uniquely identify the extension’s version.
• According to the documentation it should be between 1–4 dot-separated integers, each between 0 and 65535. i.e. 2¹⁶ — 1.
• The browser allows me to enter values from 0 to 2³²- 1, i.e. 4294967295.

”name”

Long name of browser extension

• The name of the extension is a short, plain text string (max 45 characters) that identifies the extension in the Chrome Web Store, the install dialog, and the user’s Chrome Extensions page.
• You can insert longer text to manifest. The browser won’t protest, but the Chrome Web Store or Microsoft Edge Addons may not accept such a long name.
• Longer text should go to ”description”key which we will get to in a moment.

🔄 Every change requires reloading

Remember that whenever you change the manifest.json file, it must be reloaded.

To reload the manifest file, click the refresh button

Store Essentials

If you want your app to be available in the store and other people to be able to download it, you need to add the iconsand descriptionkey to the manifest.

”description”

• That describes the extension on both the Store and the user’s extension management page. The maximum length is 132 characters.
• A plain text string, no HTML.

”icons”

icon 48x48

One or more icons that represent your extension.

Get Data Believer’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Sizes:
— 128x128 icon for installation and Chrome Web Store / Edge Addons
— 48x48 for the extensions management page (chrome://extensions)
— 16x16 (optional) for a favicon (for your extension’s homepage, options page, popup window)
Format:
— Prefer PNG for transparency support.
— Supported formats: BMP, GIF, ICO, and JPEG.

The simplest extension with action

For our extension to be valuable and perform some tasks, we need to create another file apart from the manifest, which we will call hi.html. It will be a small page that will be loaded when you click on our icon.

<!-- hi.html -->
Hi Medium Reader
<script src="hi.js"></script>

The html file will display our string. We will add a script to it that will display another “hi” from the console.

// hi.js
console.log("hi from the console");

// manifest.json
{
  "manifest_version": 3,
  "name": "hi",
  "version": "1",
  "description": "say hi",
  "icons": {
    "48": "hi_icon48.png",
    "128": "hi_icon128.png"
  },
  "action": {
    "default_popup": "hi.html"
  }
}

We just need to add the name of our HTML file to themanifest.json file and, simply put, the extension is complete.

Summary

These were, of course, trivial scripts. I wanted to start with as little code as possible to show how it works. In the next parts we will create more complex extensions. Over time, we will create a good enough extension that we will be proud to put it in the Store for other users. Stay tuned!