chrome-extension-dev

用途

Chrome Extension Dev 是一份面向浏览器扩展开发的综合指南，用于在创建或修改浏览器扩展时提供参考。适用场景包括：想要制作浏览器扩展、开发 Chrome 扩展、使用 WXT 框架进行开发、实现 Content Script / Service Worker、使用 Chrome API（tabs、storage、cookies 等），以及适配或迁移到 Manifest V3。触发关键词为「浏览器扩展」「Chrome 扩展」「browser extension」等。

使用方式（WXT 快速开始）

# 新規プロジェクト作成（対話式）
npx wxt@latest init

# テンプレート指定（vanilla / vue / react / svelte / solid、全て TypeScript）
npx wxt@latest init my-extension -t react

# 開発コマンド
npm run dev    # HMR付き開発サーバー
npm run build  # プロダクションビルド
npm run zip    # ストア提出用パッケージ

项目结构

project/
├── entrypoints/           # 自動検出エントリポイント
│   ├── background.ts      # Service Worker
│   ├── content.ts         # Content Script
│   ├── popup/             # Popup UI
│   │   ├── index.html
│   │   └── main.tsx
│   └── options/           # Options Page
├── components/            # 自動インポートUIコンポーネント
├── utils/                 # 自動インポートユーティリティ
├── public/                # 静的アセット（icon等）
├── wxt.config.ts          # WXT設定
└── package.json

主要 Chrome API

API	用途	权限
chrome.tabs	标签页操作	tabs / activeTab
chrome.storage	数据持久化	storage
chrome.runtime	消息传递	无
chrome.scripting	脚本/CSS 注入	scripting + host 权限
chrome.cookies	Cookie 操作	cookies + host 权限
chrome.offscreen	DOM 操作（SW 内）	offscreen

详细内容参见 references/chrome-api.md。

Manifest V3 限制事项

限制	应对方法
30 秒超时	使用 chrome.alarms 唤醒
无法访问 DOM	使用 chrome.offscreen
无持久化	使用 chrome.storage.session
禁止 eval()	预先打包
禁止远程代码	全部代码打包

详细内容参见 references/manifest-v3.md。

权限变更时的注意

⚠️ 重要：修改 permissions / host_permissions 后，仅重新加载扩展是不够的，需要删除后重新安装。

关键参考文档

主题	参考
Chrome API 详细	references/chrome-api.md
Manifest V3	references/manifest-v3.md
测试	references/testing.md
发布	references/publishing.md
常见模式	references/patterns.md

完成标准

WXT 项目结构正确
所需权限已在 wxt.config.ts 中设置
实现时考虑了 Manifest V3 限制
已在开发模式下确认可运行
无构建错误

外部资源

WXT 官方
Chrome Extension Docs
Chrome API Reference

限制

资料未提供具体收费、价格、平台支持范围或效果保证等信息，暂未提供。

技能介绍

用途

推荐技术栈（2025/2026）