跳到正文
cccskills
免费在 GitHub 公开

chrome-extension-dev

Chrome/ブラウザ拡張機能開発の包括的ガイド。WXTフレームワーク、Manifest V3、Chrome API、テスト手法をカバー。Use when: ブラウザ拡張機能を作成・修正する時。

Triggers on 'ブラウザ拡張機能', 'Chrome拡張', 'browser extension', 'WXT', 'content script', 'service worker'.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(7)

  • SKILL.md5.0 KB
  • LICENSE.txt5.2 KB
  • references/chrome-api.md5.6 KB
  • references/manifest-v3.md5.2 KB
  • references/patterns.md6.9 KB
  • references/publishing.md19.4 KB
  • references/testing.md5.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Design, review, and debug agent workflows, and decide when a request should use a prompt, instruction, skill, agent, or hook before escalating to multi-agent design. Use for .agent.md / .instructions.md / .prompt.md / AGENTS.md work, workflow architecture, orchestration planning, scheduled automation model allocation, or when agent workflows may be overkill. Triggers on 'agent workflow', 'create agent', 'automation models', 'ワークフロー設計', 'orchestrator'.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月19日 更新

Design, run, and review fair performance, token, and cost comparisons across GitHub Copilot CLI, Codex CLI, and direct model APIs. Use for AI CLI benchmark, Copilot vs Codex, prompt-cache diagnosis, cache read/write analysis, fresh-process latency measurement, token-cost comparison, or when a benchmark must separate provider caching from local CLI caches.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月19日 更新

Analyze historical VS Code GitHub Copilot Chat sessions by model, reasoning effort, AIU, time, reliability, workflow behavior, and external quality evidence, or safely prune workspace-scoped local chat history by age. Use for session analysis, repeated-task retrospectives, model evaluation, cost/performance analysis, and old session cleanup.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月19日 更新

Create reproducible animated infographic GIFs from structured data or measured results, with audience-language labels, explicit timing semantics, representative-frame QA, and a static fallback. Use when asked for GIF生成, animated infographic, 動的インフォグラフィック, 結果が流れる図, animated benchmark, or a blog/SNS animation whose displayed metrics must remain traceable to source data.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月19日 更新

archify

免费

Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid. Also use for Archify, interactive or animated HTML diagrams, インタラクティブ図, 動く構成図. When an editable .drawio file is required, use the draw.io workflow instead and treat Archify HTML only as a supplement.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月19日 更新

Generate ASCII-art text banners for terminals, READMEs, and CLI startup messages. Use when a user asks for an ASCII banner, text art, バナー, アスキーアート, or a decorative header for a script/README.

中文简介正在准备中。当前显示原文说明。

aktsmm/Agent-Skills262026年10月19日 更新

查看 aktsmm 的全部技能

报告此技能的问题