Chrome Extension Development

This blog will walk you through how to develop a Chrome Extension. From concepts to practical examples, this guide will help you create your own Chrome Extension.

What can Chrome Extension do?

A Chrome extension is a small software program that customizes the Chrome browser. It can:

• Enhance user experience by adding new features.
• Interact with web pages.
• Automate repetitive tasks.

Some popular examples include ad blockers, language translators ( Grammarly ), and password managers.

Core Components of a Chrome Extension

Manifest.json

It is the core configuration file for your extension. It contains metadata such as the name, version, permissions, and entry points of the extension.

Popup

Defines the popup window that appears when the user clicks the extension’s icon in the browser toolbar. You can config the popup window HTML file ( The HTML file can reference JavaScript and CSS files ) in the manifest.json.

"action": {
  "default_popup": "popup.html",
  "default_icon": "icons/icon48.png"
}

Background Script

Defines the background logic of the extension, handling long-running tasks or event listeners.
The background.js script runs as a background service when the extension is loaded.

// manifest.json
"background": {
  "service_worker": "background.js"
}

Content Script

Injected into web pages to interact with their DOM or listen for user actions.

// manifest.json
"content_scripts": [
  {
    "matches": ["https://*/*"],
    // content.js and styles.css are injected into the pages that match the matches pattern (e.g., all HTTPS pages in this case).
    "js": ["content.js"],
    "css": ["styles.css"]
  }
]

Options Page

Defines a settings page where users can configure the extension. The user can access the settings page from the extension’s management page in Chrome.

// manifest.json
"options_page": "options.html"

Permissions

Declares the permissions the extension needs to access specific browser features or resources.

// mainfest.json
"permissions": ["contextMenus", "activeTab", "storage", "tabs"]

Context Menus (Right-Click Menu)

Defines custom right-click menu items for the extension. This is handled in background.js, and you declare the necessary permissions in manifest.json. Dynamic Menu Creation in background.js:

chrome.contextMenus.create({
  id: 'exampleMenu',
  title: 'Do something cool',
  contexts: ['all'],
})

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'exampleMenu') {
    alert('Menu clicked!')
  }
})

Practice

Build Tool

Recommenad using parcel to build the Chrome extension.

Summary

All right, I think you have know about the Chrome extension development. This is a demo of Chrome extension development, available in my GitHub repository. It includes both Frontend and Backend implementations.