whatisgithub

What is chrome-plugin-demo?

sxei/chrome-plugin-demo — explained in plain English

Analysis updated 2026-06-24

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

In one sentence

A comprehensive Chinese-language guide and fully working demo for building Chrome extensions, covering manifest setup, content scripts, background pages, popup windows, and communication between all extension components.

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
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

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.

What is it built with?

JavaScriptHTMLCSSChrome Extension API

How does it compare?

sxei/chrome-plugin-demoprosemirror/prosemirrorangular/protractor
Stars8,6788,6788,679
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyhardmoderate
Complexity2/54/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get 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.

So what is it?

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?

Frequently asked questions

What is chrome-plugin-demo?

A comprehensive Chinese-language guide and fully working demo for building Chrome extensions, covering manifest setup, content scripts, background pages, popup windows, and communication between all extension components.

What language is chrome-plugin-demo written in?

Mainly JavaScript. The stack also includes JavaScript, HTML, CSS.

How hard is chrome-plugin-demo to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is chrome-plugin-demo for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.