How To Implement A Chrome Extension
We all like surfing the web. And we all like things to be at the touch of our fingertips. Why not create something that caters to these two absolute truths?
In this article, I’ll explain the building blocks of a Chrome extension. Afterwards, you’ll just have to think of a good idea as an excuse to make one.
Chrome is by far the most popular web browser. Some estimations are as high as 59%. So, if you want to reach as many people as you can, developing a Chrome extension is the best way to do it.
⚠️ To be able to publish a Chrome extension, you need to have a developer account which entails a $5 one-time signup fee.
Each Chrome extension should have these components: the manifest file, popup.html and popup.js and a background script. Lets take a look at them.
What makes up a Chrome extension?
The Manifest File
Google uses this file to acquire details about your extension when you will publish it. There are required, recommended and optional fields.
manifest_version- Version of the manifest file format. As of Chrome 18, version 1 is deprecated
name- Can be up to 45 characters. Used to display your extension’s name in the following places: Install dialog, Extension management UI, Chrome Web Store
version- Version of your Chrome Extension. Can be up to four digits separated by dots (e.g., 22.214.171.124)
default_locale- This folder resides inside the
_localsfolder and it contains the default string literals. The
_localsfolder is used for internationalization (allowing your extension to support multiple languages). It is a required field if a
_localsfolder exists, otherwise, it should not be present
If you want to support multiple languages, read more here.
description- You can use up to 132 characters to describe the extension
short_name- Limited to 12 characters, it is used in cases where there is not enough space to display the full name of the extension (App Launcher and New Tab Page)
icons- The icons that represent the extension. Always include a 128X128 icon because it is used by the Chrome Web Store and during the installation of your extension
Optional fields are case specific, so we won’t go into them in this article.
After covering the data needed for the manifest file, we can now move on to where we will actually be writing code for our extension, Popup and Background.
Popup and Background
Popup.html is the layout file for how your extension will look like. Depending on what your extension will do, the markup of this file will change.
A background script is the only one that can interact with events that occur and use the Chrome API. To use background scripts you need to add the following to your manifest.json file:
scripts has a value of an array of script names.
persistent is a key with a boolean value which denotes the use of your extension with chrome.webRequest API to block or modify network requests. The Chrome.webRequest API does not work with non-persistent background pages.
How Your Extension Will Open
Every Chrome extension adds a little icon to the toolbar at the top of your browser. Once the user clicks that icon, you can choose how you want your extension to open in the browser:
- It can override a new tab, so as not to disrupt the current user’s activity
2. You can open a small window in the user’s current tab, so as to keep the user in the same tab
Each choice has it’s consequences and it is up to you to decide what is the best option for you.
Below is the code needed to pull off each of the options. They will both use the same popup.html file outlined below:
Putting It All Together
Override New Tab
Open In The Current Tab
Notice how we have overridden the
browser_action key in both examples.
We have to do this, since we don’t want the browser to open a new tab in the regular fashion.
Also, since if we want to open a new tab with our extension, we must add a permissions key to the manifest and specify the tabs value. This lets the browser know we need the user’s permission to overwrite the default behavior of opening a new tab.
There is a whole lot more to Chrome extensions (messaging, context menus and storage to name a few). I have hopefully given you some insight into Chrome extensions. Maybe just enough to intrigue you to make one of your own!
And while you are at it, check one I have made here.
If you liked this article, clap away so that others can enjoy it as well! 👏