SuperAPI AI Directory
Partner中文AI newsFavorites
Skillschrome-extension-dev

chrome-extension-dev

Coding & development

View repository

Updated 10-15 17:47

About this skill

Chrome Extension Dev

Comprehensive guide to browser extension development.

When to Use

  • I want to build a browser extension、Chrome extension、browser extension
  • Development with the WXT framework
  • Implementing Content Script / Service Worker
  • Using Chrome APIs (tabs, storage, cookies, etc.)
  • Supporting/migrating to Manifest V3

Recommended tech stack (2025/2026)

Category Recommended
Framework WXT (Vite-based)
Frontend React 18+ / Vue 3 / Svelte
Language TypeScript
Styling Tailwind CSS
UI components shadcn/ui / Mantine
State management Zustand / Jotai
Testing Vitest (unit) + Playwright (E2E)

WXT Quick Start

# 新規プロジェクト作成（対話式）
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 structure

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

Main Chrome APIs

API Purpose Permission
chrome.tabs Tab operations tabs / activeTab
chrome.storage Data persistence storage
chrome.runtime Messaging None
chrome.scripting Script/CSS injection scripting + host permission
chrome.cookies Cookie operations cookies + host permission
chrome.offscreen DOM operations (within SW) offscreen

→ Details: references/chrome-api.md

Manifest V3 limitations

Limitation Workaround
30-second timeout chrome.alarms wake up with
No DOM access chrome.offscreen Use
No persistence chrome.storage.session Use
eval() prohibited Bundle in advance
Remote code prohibited Bundle all code

→ Details: references/manifest-v3.md

Notes when changing permissions

⚠️ Important: permissions/host_permissionsAfter changing,reloading the extension is not sufficient. Uninstall→reinstall is required.

Key References

Topics Reference
Chrome API details references/chrome-api.md
Manifest V3 references/manifest-v3.md
Testing references/testing.md
Published references/publishing.md
Common patterns references/patterns.md

Done Criteria

  • The WXT project structure is correct
  • The required permissions are wxt.config.ts set in
  • Implementation that takes Manifest V3 limitations into account
  • Verified to work in development mode
  • No build errors

External Resources