mcpField
C
chrome-extension-dev

chrome-extension-dev

github.com/aktsmm開発2646 回インストール1 日前に更新
リポジトリ

chrome-extension-dev について

chrome-extension-dev は、Chrome API や Manifest V3 を扱う開発者向けのブラウザー拡張機能開発ガイドです。WXT を中心に、実装パターンやテスト、公開に関する資料を扱います。

主な機能

  1. 01WXT のプロジェクト設定と構成
  2. 02Content Script と Service Worker の実装ガイド
  3. 03Chrome API の使用方法と権限
  4. 04Manifest V3 の制約と対処法
  5. 05テストと公開の参考資料

活用シーン

  1. 01WXT でブラウザー拡張機能を始める
  2. 02タブ、ストレージ、Cookie の機能を実装
  3. 03拡張機能を Manifest V3 に対応
  4. 04拡張機能のテストや公開方法を確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/aktsmm/agent-skills --skill chrome-extension-dev

インストール後、Claude Code で/chrome-extension-devを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt
references/
chrome-api.md
manifest-v3.md
patterns.md
publishing.md
testing.md

詳細

プロジェクトの README より

Chrome Extension Dev

ブラウザ拡張機能開発の包括的ガイド。

When to Use

  • ブラウザ拡張機能を作りたい、Chrome拡張、browser extension
  • WXT フレームワークでの開発
  • Content Script / Service Worker の実装
  • Chrome API（tabs, storage, cookies等）の使用
  • Manifest V3 への対応・移行

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

カテゴリ推奨
フレームワークWXT (Vite ベース)
フロントエンドReact 18+ / Vue 3 / Svelte
言語TypeScript
スタイリングTailwind CSS
UIコンポーネントshadcn/ui / Mantine
状態管理Zustand / Jotai
テストVitest (ユニット) + Playwright (E2E)

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.cookiesCookie操作cookies + host権限
chrome.offscreenDOM操作（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変更後は拡張機能の再読み込みでは不十分。 削除→再インストールが必要。

Key References

トピックリファレンス
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 制限を考慮した実装
  • 開発モードで動作確認済み
  • ビルドエラーがない

External Resources

コメント

Markdown 対応