Understanding Chrome Extensions: Architecture, Core Mechanisms, and Practical Use Cases

Chrome extensions (Chrome Extension) are small software programs that use the front‑end technology stack (HTML, JavaScript, CSS) to customize the behavior and appearance of the Chrome browser, thereby improving user efficiency.

The article does not focus on basic extension development, but rather on the underlying principles and practical applications, aiming to inspire readers to create their own productivity tools.

What is a Chrome Extension? According to the official definition, a Chrome Extension is a lightweight program that defines the browsing experience, allowing users to tailor Chrome’s functionality and behavior. It runs on top of the browser using existing APIs.

Chrome Extension vs. Chrome Plugin

Chrome Extension : Enhances web page functionality by composing existing browser APIs; stays at the browser layer.

Chrome Plugin : Extends the browser itself, often requiring compiled languages (C/C++) and operating at the kernel level (e.g., Flash).

Composition of a Chrome Extension

Configuration file manifest.json (name, version, permissions, icons, etc.).

Static resources such as images, CSS.

JavaScript files, including: popup.js : Controls the UI displayed when the extension icon is clicked. background.js : A persistent background page that lives as long as the browser is open. content_scripts.js : Injected into web pages to manipulate the DOM without conflicting with page scripts.

Core Mechanisms

Three main processes interact:

Extension Process : Runs Extension Pages (e.g., background.html , popup.html ).

Render Process : Loads web pages and injects content_script.js .

Browser Process : Acts as a bridge, enabling message passing between Extension Pages and Content Scripts.

What Chrome Extensions Can Do

1. Change the browser UI (browser actions, page actions, context menus, notifications, omnibox, override pages).

2. Interact with browser features (cookies, tabs, bookmarks, downloads, event listeners, web requests, proxy, etc.).

Practical Examples

Example 1 – Override Pages

Replace built‑in pages (new tab, bookmarks, history) by declaring chrome_url_overrides in manifest.json :

{
  "chrome_url_overrides": {
    "newtab": "newTab.html", // replace new tab page
    "bookmarks": "bookmarks.html", // replace bookmarks manager
    "history": "history.html" // replace history page
  }
}

Example 2 – Cookie Control

Use the Cookies API to add, delete, or modify browser cookies, enabling one‑click cache clearing or other automation tasks.

Example 3 – Tab Management

Leverage chrome.tabs API to query, create, modify, or reorder tabs. The article cites the OneTab extension as a real‑world solution that consolidates open tabs into a single page.

Example 4 – Intercept Requests / Reverse Proxy

Use chrome.webRequest in background.js to intercept image requests, then forward the URL to a content script for size checking:

// background.js
chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    const { url, tabId } = details;
    chrome.tabs.sendMessage(tabId, { picUrl: url }, function(response) {
      // handle response
    });
    return { cancel: isCancel };
  },
  { urls: ["http://baidu.com"], types: "image" },
  ["blocking"]
);

Corresponding content script listener:

// content_script.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (sender.tab && request.picUrl && request.picUrl == sender.tab.id) {
    // fetch image size and download
  }
});

Example 5 – Page Element Automation

Manipulate DOM elements from a content script to automate login forms:

// input helper
function input(inputElement, content) {
  let event = document.createEvent('HTMLEvents');
  event.initEvent('input', true, true);
  inputElement.value = content;
  inputElement.dispatchEvent(event);
}
const usernameDom = document.getElementById("userName");
const pwdDom = document.getElementById("password");
const btnDom = document.getElementById("submitBtn");
input(usernameDom, "姓名");
input(pwdDom, "密码");
btnDom.click();

Business Practice – Multilingual Management for Vivo Global Mall

The author describes a pain point where operators need to edit UI text but must first locate the corresponding language key in a separate management platform. The proposed solution uses a Chrome extension to:

Add a data-lang-key attribute to DOM elements (e.g., <div data-lang-key="address.delete.button">{{ language.addressDeleteButton }}</div> ).

Make those elements contenteditable so operators can edit directly on the page.

Provide a side panel that shows the key, current value, and edited value.

Send cross‑origin POST requests from the extension to the multilingual backend using XHR:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", url, true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      try { sendResponse(JSON.parse(xhr.response)); }
      catch(e) { /* handle error */ }
    }
  };
  xhr.send(new URLSearchParams(params));
  return true;
});

By leveraging the extension’s ability to access cookies, the user can log in to the backend in a new tab and obtain the necessary authorization for modifications.

Conclusion

The article encourages readers to explore Chrome extensions further and recommends the “Chrome extension source viewer” as a tool to inspect other extensions’ source code, helping developers learn from existing implementations.