본문으로 건너뛰기
cccskills
무료GitHub에 공개

chrome-extension-dev

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

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

aktsmm/Agent-Skills
설치 방법 보기

포함된 파일(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(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

agentic-workflow-guide

무료

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일 업데이트

ai-cli-benchmark

무료

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-copilot-sessions

무료

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일 업데이트

animated-infographic

무료

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일 업데이트

ascii-banner

무료

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의 스킬 모두 보기

이 스킬의 문제 신고