Build your chrome extension

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

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"
}

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

  • : 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 `` which is used to define the URL for which javascript files are to be added.
  • 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.

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

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) {});

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

hen 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 button and select the whole folder of chrome extension.

Love to write code and discuss technology | If you explain others is simple words it means you know it very well

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store