Build your chrome extension

Akash Jain
4 min readJun 21, 2020

You must have used chrome extension many times in your life. Have you ever wonder how these extensions can be created, No? Well, it’s not like you have to learn a new programing language or a tool.

Having a basic understanding of HTML, CSS, JAVASCRIPT is like a cherry on the cake to create this extension.

Let’s see file structure first

manifest.json is the main file for a chrome extension, the browser starts with this file and read line by line. See how this file content looks

{
"manifest_version": 2,
"name": "Debarred Tab",
"version": "0.1",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"background": {
"scripts": ["background.js"]
},
"web_accessible_resources": [
"debarredPage.html"
],
"permissions":[
"storage",
"tabs"
],
"browser_action": {
"default_icon": "DebarredTab.png",
"default_popup": "popup.html",
"default_title": "Debarred Tab"
},
"options_page": "options.html"
}

Official Documentation of chrome extension’s manifest file

The name, manifest_version, and version keys are required keys used to define basic information about chrome extension.

Now two important keys are there which need little explanation.

Divide the browser into two parts, the first one is where web pages are rendered and the second one is all tabs, toolbar, etc

  • content_scripts: All javascript files inside this key are added in all the web pages that render and after that JS files are the part of those web pages. If we want we can change the content of any web page using javascript. It has one more key `matches` which is used to define the URL for which javascript files are to be added.
  • background: All javascript files inside this key is used to manipulate URL, tab events such as navigating to a new page, removing a bookmark, or closing a tab.

browser_action key is used to define extension icon, its title, and popup page that will display on click.

options_page key is used to define the configuration page for the extension. If the Configuration page is not required then no need to mention this key. The configuration page is a simple HTML page which takes the form data and saves it in chrome itself using its API

Here I am taking this dropdown value and on clicking the save button calling js code to save this data using chrome API

chrome.storage.sync.set({<name>: <value>}, function(items) {});

permissions key is used to taking permissions from chrome to access the particular resources, here we are using `storage`, `tab`.

web_accessible_resources: When we use any file of the extension directly we need to mention that file here.

Sample:

chrome-extension://<chrome-extension-ID>/<Any page of extension>.html

You can see all files for an extension here: Debarred Tab

Run the extension

Open the extension page of the chrome browser and load the extension.

On top right section you will see a checkbox with the developer mode text, enabling this will show three more options from which click Load unpacked button and select the whole folder of chrome extension.

Every chrome extension have a unique ID which is used to identify extension.

--

--

Akash Jain

Love to write code and discuss technology | If you explain to others in simple words it means you know it very well — akashjain132@gmail.com