# ChromePluginDemo **Repository Path**: chen-jiaming/chrome-plugin-demo ## Basic Information - **Project Name**: ChromePluginDemo - **Description**: Chrome 插件Demo - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-01-01 - **Last Updated**: 2026-01-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Chrome 浏览器插件开发 ## 介绍 一个用于学习和演示 Chrome 浏览器扩展（Manifest V3）开发的示例项目，包含弹窗、选项页、内容脚本与后台 Service Worker 示例。 ## 快速开始 - 打开 Chrome，进入扩展管理页面 `chrome://extensions/`。 - 打开右上角的“开发者模式”。 - 点击“加载已解压的扩展程序（Load unpacked）”，选择本项目根目录（ChromePluginDemo）。 - 安装后点击扩展图标可打开弹窗，或在扩展详情中打开选项页。 ## 功能亮点 - 弹窗（popup）示例页面与交互脚本。 - 选项页面（options）演示持久化设置入口（可扩展）。 - 后台脚本（Service Worker）用于处理长期运行任务与消息转发。 - 内容脚本（content）可注入页面并与页面交互。 ## 插件结构 ``` ChromePluginDemo ├─ css | ├─ content.css 内容脚本样式文件 | ├─ options.css 插件选项样式文件 | ├─ popup.css 弹窗页面样式文件 ├─ html | ├─ bookmarks.html 书签管理页面 | ├─ history.html 历史记录页面 | ├─ newtab.html 新标签页面 ├─ images | ├─ logo-32.png | ├─ logo-64.png ├─ js | ├─ backgroup.js 插件的后台脚本，负责执行后台任务 | ├─ content.js 内容脚本 | ├─ options.js 插件选项脚本 | ├─ popup.js 弹窗页面脚本 ├─ options.html 插件选项页面 ├─ popup.html 弹窗页面，用户点击插件图标时显示的页面 └─ manifest.json 插件配置文件 ``` ## 主要文件说明 - `manifest.json`：扩展配置，声明权限、入口、页面覆盖等。 - `popup.html` 、 `js/popup.js`：点击扩展图标时显示的弹窗及其脚本。 - `options.html` 、 `js/options.js`：扩展的选项页（配置界面）。 - `js/background.js`：后台 Service Worker（长期任务、事件监听）。 - `js/content.js`：注入到页面的内容脚本，用于 DOM 操作与页面交互。 - `css/*.css`：对应页面的样式文件。 ## 插件文件详解 ### 1.插件配置文件 `manifest.json` ```json { "name": "谷歌插件", // 插件名称 "version": "1.0", // 发布版本 "manifest_version": 3, // 对应Chrome API 插件版本，什么版本使用什么API "description": "这是一个谷歌插件，用于入门学习", // 插件描述 "permissions": ["tabs", "activeTab", "background"], // 指定插件拥有权限 "background": { "service_worker": "js/background.js" // 指定插件的后台脚本路径 }, "icons":{ // 指定插件的图标，不同尺寸使用不同的图标 "32": "images/logo-32.png", "128": "images/logo-128.png" }, "action": { "default_popup": "popup.html", // 指定弹窗页面路径 "default_icon": { // 指定图标，不同尺寸使用不同的图标 "32": "images/logo-32.png", "128": "images/logo-128.png" }, "default_title": "谷歌插件" // 指定图标 }, "content_scripts": [ // 插件内容脚本 { "js": ["js/content.js"], // 脚本路径 "css": ["css/content.css"], // 脚本样式 "matches": [""], // 匹配的页面 "exclude_matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.jpeg"], // 排除匹配到的url地址 "run_at": "document_end" // 脚本执行时机，dom加载完成之后 } ], "options_page": "options.html", // 插件选项，点击【插件详情=》扩展程序选项】或【插件图标=》选项】 "chrome_url_overrides": { // 允许的覆盖页面（只能选一个） // "newtab": "html/newtab.html", // 新标签页面(Ctrl+T) // "history": "html/history.html", // 历史记录页面（Ctrl+H） "bookmarks": "html/bookmarks.html" // 书签管理页面（Ctrl+Shift+O） } } ``` ### 2.插件弹窗 `popup.html` ```html

你好，Chrome 浏览器插件！

``` `js/popup.js` ```js document.addEventListener('DOMContentLoaded', () => { // 监听按钮点击事件 document.getElementById('test').addEventListener('click',()=>{ alert('这是一个弹窗页面测试!'); console.log('点击按钮事件...'); }); }); ``` `css/popup.css` ```css body { width: 300px; height: 400px; text-align: center; } h1 { font-size: 16px; color: #333; } button { padding: 10px 15px; font-size: 14px; } ``` ### 3.插件后台脚本 `js/backgroup.js` 用于处理插件的后台任务，如监听事件、管理状态等。 ```js console.log('插件的后台脚本backgroup.js在后台运行了...'); // 实现插件安装时调整到自定义标签页面 chrome.runtime.onInstalled.addListener(async() => { chrome.tabs.create({ url: chrome.runtime.getURL('html/newtab.html') }); }); ``` ### 4.插件选项 `options.html` 插件的设置页面，可通过扩展程序详情中的“选项”访问。 ```html

这是一个Chrome 浏览器插件选项页面！

``` `js/options.js` ```js document.addEventListener('DOMContentLoaded', () => { // 监听按钮点击事件 document.getElementById('test').addEventListener('click',()=>{ alert('这是一个插件选项测试!'); console.log('点击按钮事件...'); }); }); ``` `css/options.css` ```css bbody { width: 300px; height: 400px; text-align: center; } h1 { font-size: 16px; color: #333; } button { padding: 10px 15px; font-size: 14px; } ``` ### 5.插件内容脚本 `js/content.js` 该脚本用于在网页上下文中执行操作 ```js // chrome.tabs.executeScript(tabs[0].id, { // code: 'document.body.style.backgroundColor = "red"' // }); console.log('这是内容脚本...'); const newDiv = document.createElement('div'); newDiv.innerHTML = `

模拟广告内容页面

`; newDiv.id = 'newDiv'; document.body.appendChild(newDiv); const cancelBtn = document.querySelector('#cancel'); const unCancelBtn = document.querySelector('#unCancel'); cancelBtn.onclick = () => { document.body.removeChild(newDiv); chrome.storage.sync.set({state: 'cancel'}, (data) => { }); }; unCancelBtn.onclick = () => { newDiv.style.bottom = Math.random() * 200 + 10 + 'px'; newDiv.style.right = Math.random() * 800 + 10 + 'px'; }; ``` `css/content.css` ```css #newDiv { font-size: 36px; color: red; position: fixed; bottom: 50px; right: 0; width: 300px; height: 200px; background-color: rgb(237, 229, 216); text-align: center; z-index: 1000; } ``` ### 6.覆盖页面 插件可覆盖浏览器特定页面，当前配置为覆盖书签管理页面（Ctrl+Shift+O）： - `html/bookmarks.html`: 自定义书签页面 - `html/history.html`: 自定义历史记录页面（未启用） - `html/newtab.html`: 自定义新标签页（未启用） ## 开发与调试 - 修改代码后，在 `chrome://extensions/` 页面点击扩展下的刷新按钮可重新加载已解压的扩展。 - 在弹窗与选项页中使用 DevTools（右键检查或按 F12）调试前端代码。 - 后台脚本使用 Service Worker，调试可在扩展详情的“Service Worker”面板查看日志与状态。 ## 贡献 欢迎改进示例： - 提交 Issue 报告问题或建议新功能。 - Fork 后发起 Pull Request，我们会评估并合并有价值的改动。 ## 许可证 本仓库示例使用 MIT 协议（示例），如需更改请在合并时更新许可证说明。 --- 如果你希望我进一步： - 将 `manifest.json` 的字段解释成单独小节，或 - 为 `background.js` / `content.js` 添加可运行示例， 请告诉我下一步偏好。