Back to Details

chrome-extension-dev

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Chrome Extension Dev

Chrome 扩展开发

ブラウザ拡張機能開発の包括的ガイド。
浏览器扩展开发的全面指南。

When to Use

适用场景

  • ブラウザ拡張機能を作りたい、Chrome拡張、browser extension
  • WXT フレームワークでの開発
  • Content Script / Service Worker の実装
  • Chrome API（tabs, storage, cookies等）の使用
  • Manifest V3 への対応・移行
  • 想要开发浏览器扩展、Chrome扩展、browser extension
  • 使用 WXT 框架进行开发
  • 实现 Content Script / Service Worker
  • 使用 Chrome API（tabs、storage、cookies等）
  • 适配或迁移至 Manifest V3

推奨技術スタック（2025/2026）

推荐技术栈（2025/2026）

カテゴリ推奨
フレームワークWXT (Vite ベース)
フロントエンドReact 18+ / Vue 3 / Svelte
言語TypeScript
スタイリングTailwind CSS
UIコンポーネントshadcn/ui / Mantine
状態管理Zustand / Jotai
テストVitest (ユニット) + Playwright (E2E)
类别推荐
框架WXT (基于Vite)
前端React 18+ / Vue 3 / Svelte
语言TypeScript
样式Tailwind CSS
UI组件shadcn/ui / Mantine
状态管理Zustand / Jotai
测试Vitest（单元测试） + Playwright（端到端测试）

WXT クイックスタート

WXT 快速入门

bash
undefined
bash
undefined

新規プロジェクト作成

创建新项目

npm create wxt@latest
npm create wxt@latest

テンプレート指定

指定模板

npm create wxt@latest -- --template react-ts npm create wxt@latest -- --template vue-ts
npm create wxt@latest -- --template react-ts npm create wxt@latest -- --template vue-ts

開発コマンド

开发命令

npm run dev # HMR付き開発サーバー npm run build # プロダクションビルド npm run zip # ストア提出用パッケージ
undefined
npm run dev # 带HMR的开发服务器 npm run build # 生产构建 npm run zip # 用于商店提交的打包文件
undefined

プロジェクト構成

项目结构

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
project/
├── entrypoints/           # 自动检测的入口点
│   ├── background.ts      # Service Worker
│   ├── content.ts         # Content Script
│   ├── popup/             # Popup UI
│   │   ├── index.html
│   │   └── main.tsx
│   └── options/           # 选项页面
├── components/            # 自动导入的UI组件
├── utils/                 # 自动导入的工具函数
├── public/                # 静态资源（图标等）
├── wxt.config.ts          # WXT配置
└── package.json

主要 Chrome API

主要 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
API用途权限
chrome.tabs
标签页操作
tabs
/ 
activeTab
chrome.storage
数据持久化
storage
chrome.runtime
消息通信无
chrome.scripting
脚本/CSS注入
scripting
+ 主机权限
chrome.cookies
Cookie操作
cookies
+ 主机权限
chrome.offscreen
DOM操作（Service Worker内）
offscreen
→ 详情: references/chrome-api.md

Manifest V3 制限事項

Manifest V3 限制事项

制限対処法
30秒タイムアウト
chrome.alarms
でウェイクアップ
DOMアクセス不可
chrome.offscreen
を使用
永続化なし
chrome.storage.session
を使用
eval()禁止事前にバンドル
リモートコード禁止全コードをバンドル
→ 詳細: references/manifest-v3.md
限制解决方法
30秒超时使用
chrome.alarms
唤醒
无法访问DOM使用
chrome.offscreen
无持久化使用
chrome.storage.session
禁止eval()提前打包
禁止远程代码打包所有代码
→ 详情: references/manifest-v3.md

権限変更時の注意

权限变更注意事项

⚠️ 重要: 
permissions
/
host_permissions
変更後は拡張機能の再読み込みでは不十分。 削除→再インストールが必要。
⚠️ 重要: 修改
permissions
/
host_permissions
后，仅重新加载扩展是不够的。 需要先删除扩展再重新安装。

Key References

核心参考文档

トピックリファレンス
Chrome API 詳細references/chrome-api.md
Manifest V3references/manifest-v3.md
テストreferences/testing.md
公開references/publishing.md
よくあるパターンreferences/patterns.md
主题参考文档
Chrome API 详情references/chrome-api.md
Manifest V3references/manifest-v3.md
测试references/testing.md
发布references/publishing.md
常见开发模式references/patterns.md

Done Criteria

完成标准

  • WXT プロジェクト構成が正しい
  • 必要な権限が 
    wxt.config.ts
    に設定されている
  • Manifest V3 制限を考慮した実装
  • 開発モードで動作確認済み
  • ビルドエラーがない
  • WXT项目结构正确
  • 所需权限已在
    wxt.config.ts
    中配置
  • 开发时已考虑Manifest V3的限制
  • 已在开发模式下验证功能正常
  • 无构建错误

External Resources

外部资源