How Does A Chrome Extension Work? (Web Development)

There are 5 parts to a Chrome extension:

1. the manifest file
2. the background script
3. the foreground script
4. the popup page
5. the options page

1.
Everything begins with the manifest file…

// manifest.json{
"name": "obj ext",
"description": "my ext",
"version": "0.1.0",
"manifest_version": 2,
"icons": {
"16": "./obj-16x16.png",
"32": "./obj-32x32.png",
"48": "./obj-48x48.png",
"128": "./obj-128x128.png"
},
"background": {
"scripts": ["./background.js"]
},
"options_page": "./options.html",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"https://www.google.com/*",
"storage"
]
}

2.
The background script (background.js) is a JavaScript script that runs once our extension either gets installed or the user refreshes the extension manually.

THIS IS CRUCIAL TO NOTE

We can make the Google homepage’s logo spin if we wanted to.

3.
From there, our foreground.js script acts like any other script influencing an index.html page.

4.
The popup page is optional.
The popup page is what shows when the user clicks on our extension icon in the top right.

5.
The options page is just like the popup page.
It’s what the user sees when they navigate to their extensions tab and click for the options.

Chrome Extension Manifest Version 3 is out now!

How To Build A Chrome Extension (2020 Web Development)

--

--

--

Learning to code…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Migrating a Flow + React Native app to TypeScript

Storybook with Angular framework

Validating a form in React

A screenshot of the form we are building

Sharpay.io Development Update | 2020–05–16

JavaScript Frameworks —

Sleep function in JavaScript

Setup a Docker Nginx reverse Proxy

To be React Native or Real Native — that is the question for a mobile startup

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
An Object Is A

An Object Is A

Learning to code…

More from Medium

Difference between XML and JSON (XML vs. JSON)

ASP.NET Core Web API Files and Folders. The Complete ASP.NET Core Web API Developer Course 2022

Regular Expression (Regex) Essentials for Developers

What makes Bootstrap an ideal choice for website development?