Step‑by‑Step Guide to Building a Chrome Extension with Manifest, UI, and Advanced Features

1. What Is a Browser Extension

A browser extension is a program attached to a browser that extends web page capabilities, such as listening to browser events, modifying page elements, intercepting network requests, and adding context‑menu items.

2. Types of Browser Extensions

Extensions exist for Chromium‑based browsers (Chrome), Firefox, and Safari. This guide focuses on native Chrome extension development.

3. Extension Directory Overview

The typical Chrome extension folder contains the following files:

File Name

Description

manifest.json

Core configuration file

that defines the extension version, name, permissions, icons, etc.

popup.html

HTML for the extension’s popup window.

popup.js

JavaScript for the popup UI.

popup.css

Styling for the popup UI.

background.js

Background script that runs continuously and can listen to browser events.

content.js

Content script injected into web pages to interact with the DOM.

4. Building the Extension

4.1 Configure the manifest

A basic manifest.json is created to declare permissions and entry points.

4.2 Create the popup UI (popup.html)

The popup is built like any HTML page, with external popup.css and popup.js files linked.

4.3 Write popup.js

popup.js handles UI events and sends messages to content or background scripts.

4.4 Content script (content.js)

content.js is injected into the page to listen for DOM events and receive messages. Example code:

window.addEventListener("load", function () {
    // Listen for page load
});

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    console.log("-----------");
    if (request.greeting === "tag") {
        console.log(request.greeting);
    }
});

4.5 Background script (background.js)

The background script runs while the browser is open, listening to events and network requests. It can block specific URLs.

5. Messaging APIs Explained

5.1 Get the active tab

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {})

5.2 Send a message to a content script

chrome.tabs.sendMessage(tabs[0].id, { greeting: "tag-remove" }, function (response) { console.log(response); });

5.3 Send a message to another extension or app

chrome.runtime.sendMessage(extensionId, message, options, callback);

5.4 Listen for incoming messages

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { /* handle */ });

6. Extending the Extension’s Capabilities

6.1 Real‑time element removal (ad blocking)

In content.js , monitor the DOM for elements with a specific class (e.g., s-p-top ) and remove them.

6.2 Add a context‑menu shortcut

Define a right‑click menu item in background.js and listen for its click event to trigger actions.

6.3 Block network requests (including iframes)

Use the background script’s webRequest API to cancel requests to unwanted URLs such as baidu.com .

6.4 Custom new‑tab page

Specify a newtab HTML file in the manifest to replace the browser’s default new‑tab page.

6.5 Highlight selected text

Implement a feature in background.js and content.js that lets users mark important text on a page.

7. Reference Documentation

Links to Chrome extension documentation, Chrome API reference, and manifest permission guides are provided for further reading.