1. 基础环境搭建与工具准备
- 安装编辑器：推荐使用Visual Studio Code，配置`Chrome Extensions`扩展（提供语法高亮和调试支持）。
- 创建项目结构：在文件夹内新建`manifest.json`（必选）和`background.js`（可选），文件名需严格匹配。
2. Manifest文件核心配置
- 基础声明：填写`manifest_version: 3`，定义`name`、`version`和`description`字段（如`"ToDo List Extension"`）。
- 权限控制：按需添加`permissions`（如`tabs`用于获取当前标签页ID）或`host_permissions`（如`*://*/*`允许跨站点脚本）。
3. 实现简单功能示例
- 弹窗交互：在`background.js`中监听`chrome.runtime.onInstalled`事件，调用`chrome.scripting.openFile`自动加载`popup.`。
- 图标设置：将`icon.png`放入项目根目录，在`manifest.json`中声明`"icons": {"16": "icon.png"}`，确保尺寸符合要求（建议16x16或48x48像素）。
4. 消息传递与事件处理
- 内容脚本通信：在`content_script.js`中通过`chrome.runtime.sendMessage`向后台发送数据（如页面选中文本），后台用`chrome.runtime.onMessage`接收并处理。
- DOM操作限制：内容脚本仅能操作当前网页（如修改元素样式），需通过`chrome.commands` API绑定快捷键（如Ctrl+P触发自定义行为）。
5. 存储与同步机制
- 本地存储：使用`chrome.storage.local.set({key: value})`保存用户数据（如登录态），同一浏览器多窗口共享数据。
- 云同步：调用`chrome.storage.sync` API实现跨设备同步（需用户登录Google账号），数据变更自动触发`onChanged`事件。
6. 调试与问题排查技巧
- 开发者模式：在`chrome://extensions/`页面启用“开发者模式”，实时查看日志输出（如`console.error`打印的错误信息）。
- 网络请求监控：通过`chrome.debugger` API注入断点，或使用浏览器自带的“网络”面板分析XHR请求是否被拦截。
7. 发布与版本管理流程
- 打包压缩：使用命令行工具`zip -r extension.zip ./`生成压缩包，确保不包含`.vscode`等无关文件夹。
- 上传审核：登录Chrome Web Store后台，填写详细描述（如功能截图、隐私政策链接），等待谷歌团队审核（通常需3-5个工作日）。
8. 高级功能扩展方向
- 原生消息通知：调用`chrome.notifications.create` API，设置`type: "basic"`和图标（需提前在`manifest`声明`notifications`权限）。
- 网页动作改造：将传统浏览器按钮升级为`action`类型弹出菜单，通过`chrome.action.onClicked`响应用户点击事件。