Chrome插件开发入门大纲

准备工作

1. 环境配置

   • 安装最新版Chrome浏览器
   • 准备代码编辑器（如VS Code）
   • 示例截图：Chrome扩展程序管理页面（chrome://extensions/）

2. 项目结构

   • 基础文件：manifest.json（核心配置文件）
   • 可选文件：popup.html、background.js、content.js等
   • 示例目录树：

     my-extension/
     ├── manifest.json
     ├── popup.html
     └── icons/
         ├── icon16.png
         └── icon48.png
     

核心开发步骤

1. 编写manifest.json

   • 基础字段说明：name、version、manifest_version（推荐V3）
   • 权限配置：permissions（如"storage"、"activeTab"）
   • 代码示例：

     {
       "name": "My First Extension",
       "version": "1.0",
       "manifest_version": 3,
       "action": {
         "default_popup": "popup.html"
       }
     }
     

2. 实现弹出页面（Popup）

   • 创建popup.html和关联的CSS/JS文件
   • 示例功能：按钮点击事件与Chrome API调用（如chrome.tabs.query）
   • 配图：弹出窗口UI效果图

3. 后台脚本（Background Service Worker）

   • 使用background.js处理长期运行的任务
   • 事件监听示例：chrome.runtime.onMessage

4. 内容脚本（Content Script）

   • 注入JS/CSS到页面上下文
   • 代码示例：修改页面DOM元素

调试与发布

1. 本地加载与调试

   • 在chrome://extensions/启用开发者模式
   • 加载未打包的扩展目录
   • 配图：Chrome开发者工具调试截图

2. 打包发布

   • 生成.crx文件或提交至Chrome应用商店
   • 发布流程：注册开发者账号、支付费用、提交审核

进阶功能

1. 存储数据

   • 使用chrome.storage.local保存用户配置

2. 跨扩展通信

   • 通过chrome.runtime.sendMessage传递消息

3. 权限动态申请

   • 调用chrome.permissions.request

常见问题与资源

1. 问题排查

   • 错误：Refused to execute inline script（需改用外部JS文件）
   • 调试技巧：查看Service Worker日志

2. 学习资源

   • 官方文档：Chrome扩展开发文档
   • 开源项目参考：Dark Reader、uBlock Origin