mcpField
C
chrome-extension-dev

chrome-extension-dev

github.com/aktsmmDevelopment2646 installsUpdated 1d ago
Repository

About chrome-extension-dev

chrome-extension-dev is a development guide for building browser extensions, aimed at developers working with Chrome APIs and Manifest V3. It centers on WXT and covers implementation patterns, testing, and publishing references.

Key features

  1. 01WXT project setup and structure
  2. 02Content Script and Service Worker guidance
  3. 03Chrome API usage and permissions
  4. 04Manifest V3 constraints and workarounds
  5. 05Testing and publishing references

Use cases

  1. 01Start a browser extension with WXT
  2. 02Implement tab, storage, or cookie features
  3. 03Adapt an extension to Manifest V3
  4. 04Check extension testing and publishing practices

Install

Copy the command and run it in a terminal.

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

After installing, type/chrome-extension-devin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project 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

Comments

Markdown supported