开发 Chrome 扩展（Manifest…

在构建浏览器扩展、弹窗 UI、内容脚本、Chrome API 集成、权限管理与上架 Chrome Web Store 时使用。

适用场景

解决思路

1. 初始化项目：创建包含 manifest.json、后台 service worker、内容脚本和 popup 文件的目录结构。
2. 配置 manifest：在 Manifest V3 格式中定义权限、内容脚本 matches、service worker 注册和 action 设置。
3. 实现后台 service worker：使用 chrome.* API 为扩展生命周期、消息传递和 alarms 设置事件监听器。
4. 构建内容脚本：编写与网页 DOM 交互的脚本，通过 chrome.runtime.sendMessage 与后台 worker 通信，并遵守 CSP。
5. 创建 popup UI：设计 popup 的 HTML/CSS，并将其与后台和内容脚本连接实现交互。
6. 添加存储与状态管理：使用 chrome.storage.local 或 chrome.storage.sync 持久化用户设置和扩展状态。
7. 测试与调试：通过 chrome://extensions 以 unpacked 方式加载扩展，使用 Chrome DevTools 检查 service worker 和内容脚本，并运行单元测试。
8. 打包与发布：准备商店素材（图标、截图、描述），创建隐私政策，并提交到 Chrome Web Store。
9. 代码风格与结构：编写清晰、模块化的 TypeScript 代码并带有正确的类型定义；遵循函数式编程模式，避免使用类；使用描述性变量名（如 isLoading、hasPermission）；按 popup、background、content scripts、utils 逻辑组织文件；实现正确的错误处理与日志记录；用 JSDoc 注释文档化代码。
10. 架构与最佳实践：严格遵循 Manifest V3 规范；在 background、content scripts 和 popup 之间划分职责；按最小权限原则配置权限；使用现代构建工具（webpack/vite）进行开发；实现正确的版本控制与变更管理。
11. Chrome API 使用：正确使用 chrome.* API（storage、tabs、runtime 等）；用 Promises 处理异步操作；使用 Service Worker 作为后台脚本（MV3 要求）；用 chrome.alarms 实现定时任务；使用 chrome.action API 处理浏览器操作；优雅处理离线功能。
12. 安全与隐私：实现内容安全策略（CSP）；安全处理用户数据；防止 XSS 和注入攻击；在组件之间使用安全消息传递；安全处理跨源请求；实现安全的数据加密；遵循 web_accessible_resources 最佳实践。
13. 性能与优化：最小化资源使用并避免内存泄漏；优化后台脚本性能；实现正确的缓存机制；高效处理异步操作；监控并优化 CPU/内存使用。
14. UI 与用户体验：遵循 Material Design 指南；实现响应式 popup 窗口；提供清晰的用户反馈；支持键盘导航；确保正确的加载状态；添加适当的动画。
15. 国际化：使用 chrome.i18n API 进行翻译；遵循 _locales 结构；支持 RTL 语言；处理区域格式。
16. 无障碍：实现 ARIA 标签；确保足够的颜色对比度；支持屏幕阅读器；添加键盘快捷键。
17. 测试与调试：有效使用 Chrome DevTools；编写单元测试和集成测试；测试跨浏览器兼容性；监控性能指标；处理错误场景。
18. 发布与维护：准备商店列表和截图；编写清晰的隐私政策；实现更新机制；处理用户反馈；维护文档。
19. 遵循官方文档：参考 Chrome Extension 文档；跟进 Manifest V3 变更；遵循 Chrome Web Store 指南；关注 Chrome 平台更新。
20. 输出期望：提供清晰、可运行的代码示例；包含必要的错误处理；遵循安全最佳实践；确保跨浏览器兼容性；编写可维护、可扩展的代码。