Build Powerful Chrome Extensions: From Basics to Publishing

What is a Chrome Extension

Chrome extensions are small programs that modify or enhance the functionality of the Chrome browser. Front‑end engineers can build them using familiar HTML, CSS, and JavaScript.

Distinguishing Extensions and Plug‑ins

Although often called “plugins”, extensions and plug‑ins are different. An Extension uses Chrome’s API and runs at the browser level (e.g., Adblock Plus). A Plug‑in relies on the WebKit NPAPI, runs at the engine level, and is typically written in native languages such as C/C++ (e.g., Flash).

Developing Your Own Extension

The author created a simple URLHelper extension that helps manipulate long URLs with many parameters. It demonstrates how to extract, edit, and refresh URL parameters directly in the browser.

Extension Architecture

An extension consists of three key parts:

Content scripts – JavaScript injected into web pages to read or modify page content.

Popup – The UI shown when the extension icon is clicked (defined in

manifest.json

as

browser_action

).

Background page – A persistent or event page that manages long‑running tasks and communication.

Content Scripts

Content scripts run in the context of the loaded page and can, for example, turn plain URLs into hyperlinks, enlarge fonts, or process micro‑format data. They communicate with the popup or background page via Chrome’s messaging system.

Popup Page

The popup is a regular web page that can be inspected with developer tools. It can send and receive messages to/from content scripts and the background page, enabling actions such as refreshing the page with modified URL parameters.

Background Page

Background pages can be persistent or event‑based. They listen for events, handle installation, and relay messages between content scripts and the popup. The example uses a persistent background page to forward URL data.

Message Passing

Because content scripts run in the page context, they must exchange data with the rest of the extension via

chrome.runtime.sendMessage

and

chrome.runtime.onMessage

. The tutorial shows simple one‑time requests and how to target a specific tab.

Using Chrome APIs

All messaging relies on the built‑in

chrome

object, which provides numerous APIs for tabs, runtime, storage, etc.

Sample Manifest and Code

<code>{
  "name": "Url Helper",
  "version": "1.0.0",
  "author": "Coco",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "js": ["contentScript.js"]
    }
  ]
}
</code>

<code>// contentScript.js
chrome.runtime.sendMessage(
  {
    msg: 'Message from Content Script to Event Page',
    result: 1
  },
  function(response) {
    if (response && response.msg) {
      console.log(response.msg);
    }
  }
);
</code>

<code>// background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.result) {
    sendResponse({ farewell: "ok" });
  }
});
</code>

<code>// popup.js (example)
let obj = {
  msg: 'Message from Popup to Content Script',
  result: 0
};
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, obj, function(response) {
    console.log("Send Success");
  });
});
</code>

Packaging and Publishing

To distribute an extension, zip the directory (including

manifest.json

) and upload it to the Chrome Web Store via the developer dashboard. A one‑time $5 registration fee is required before the extension becomes publicly searchable.

Afterword

Creating a Chrome extension is straightforward and rewarding. The author encourages readers to experiment with the provided URLHelper project on GitHub.