sxei/chrome-plugin-demo

★ 8,678JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Chrome Extension))
    Core Components
      manifest.json config
      Content scripts
      Background page
      Popup page
    Capabilities
      Modify web pages
      Intercept requests
      Toolbar buttons
      Context menu items
    Communication
      Message passing
      Isolated contexts
    Repository Layout
      Full demo
      Minimal template
      Page-action demo

mindmap root((Chrome Extension)) Core Components manifest.json config Content scripts Background page Popup page Capabilities Modify web pages Intercept requests Toolbar buttons Context menu items Communication Message passing Isolated contexts Repository Layout Full demo Minimal template Page-action demo

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a Chrome extension that injects scripts into web pages to modify content or add custom features for visitors.

USE CASE 2

Create a browser extension with a popup toolbar button and a persistent background page for always-running logic.

USE CASE 3

Add custom right-click context menu items or intercept network requests in Chrome using the extension API.

Tech stack

JavaScriptHTMLCSSChrome Extension API

Getting it running

Difficulty · easy Time to first run · 30min

Guide and comments are written in Chinese, JavaScript knowledge is assumed but no prior Chrome extension experience is required.

In plain English

This repository is a comprehensive Chinese-language guide to building Chrome extensions, paired with a complete working demo you can download and run directly. The author spent nearly a month writing the accompanying blog post and built out all the demo code in this repository to cover the full range of Chrome extension development concepts. A Chrome extension (technically called a Chrome Extension, not a plugin) is a small piece of software built with standard web technologies: HTML, CSS, and JavaScript. It gets packaged into a .crx file and adds new capabilities to the Chrome browser. Extensions can modify pages you visit, intercept network requests, add toolbar buttons, create right-click menu items, override browser default pages, and communicate between different parts of the extension. The guide covers the core building blocks in detail. The manifest.json file is the required configuration file at the root of every extension. Content scripts are JavaScript files injected directly into web pages you visit, commonly used for things like ad blocking or custom styling. The background page is a persistent page that runs the entire time the browser is open, and is where you put global or always-running code. Popup pages are the small windows that open when a user clicks the extension icon in the toolbar. The guide also explains how these different pieces communicate with each other, since each component runs in an isolated context and cannot directly access the others. The repository organizes the demo into three folders: a full demo covering most of the concepts, a minimal template for quickly starting a simple extension, and a separate page-action demo that was split out because it conflicted with the full demo. This is aimed at developers who already know JavaScript but are new to the Chrome extension system. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1

Using sxei/chrome-plugin-demo as a reference, create a Chrome extension manifest.json and a content script that highlights all links on any page I visit in yellow.

Prompt 2

Based on the chrome-plugin-demo repository, show me how to set up message passing between a content script and a background page in a Chrome extension.

Prompt 3

I want to build a Chrome extension with a popup that shows a word count for the current page, use the demo repository structure for the manifest and popup HTML layout.

Prompt 4

How do I intercept and log all XHR network requests made by a web page using a Chrome extension background script, following the sxei/chrome-plugin-demo patterns?

Open on GitHub → Explain another repo

← sxei on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.