gitmyhub

chrome-plugin-demo

JavaScript ★ 8.7k updated 3y ago

《Chrome插件开发全攻略》配套完整Demo,欢迎clone体验

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.

JavaScriptHTMLCSSChrome Extension APIsetup: easycomplexity 2/5

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.

Where it fits