はじめに
「こんなChrome拡張があったら便利なのに」と思っても、Manifest V3の仕様を調べ、コードを書き、アイコンを用意し、ストア審査に通す─。
この一連の工程が重くて、多くの人がアイデア段階で止まってしまいます。
この記事では、アイデア出しから実装、ストア公開・審査通過までを、Claudeを使ってどう乗り切るかを通しで解説します。各ステップで実際に投げるプロンプト例も載せました。
前提として、AIが出したコードや文章は必ず自分で読んで理解してください。動くことと中身を把握していることは別です。
第1章 アイデア出し
良い拡張は「機能」ではなく「自分の困りごと」から生まれます。まず自分の作業を振り返り、Claudeに壁打ち相手になってもらいます。
私は普段こういう作業をしています:
- 技術記事をたくさん読む
- 気になった箇所をNotionにメモする
この作業を効率化するChrome拡張のアイデアを、
実装難易度(低・中・高)つきで5個出してください。
難易度を添えて出させると、最初の一本に向く「小さく作れるもの」を選びやすくなります。最初の拡張はとにかく小さくすること。機能を1つに絞ると、実装も審査も一気に楽になります。
この記事では例として「選択したテキストをワンクリックで整形してコピーする拡張」を作ります。シンプルですが、コンテキストメニュー・Service Worker・クリップボード操作と、拡張の基本要素が一通り登場します。
第2章 設計
いきなりコードを書かせず、まず全体像を出させます。
Chrome拡張(Manifest V3)を作ります。
機能:Webページで選択したテキストを右クリックメニューから
「整形してコピー」できる。
必要なファイル構成と、各ファイルの役割を先に教えてください。
返ってくる典型的な構成:
my-extension/
├── manifest.json # 拡張の設定・権限
├── background.js # Service Worker(メニュー登録など)
├── popup.html # ツールバーアイコンのポップアップ
└── icons/ # 16/48/128px のアイコン
**審査落ちの最大の原因は「過剰な権限」**です。設計段階で、必要な権限を最小限に絞っておきましょう。
この拡張に必要な最小限のpermissionsを教えて。
「あると便利だが必須ではない」権限は除いて。
それぞれ、なぜ必要かも説明して。
第3章 実装
manifest.json
Manifest V3ではbackgroundがService Worker化されるなど、V2から書き方が変わっています。ここはAIに任せると速いです。
{
"manifest_version": 3,
"name": "Format Copy",
"version": "1.0.0",
"description": "選択したテキストを整形してコピーします",
"permissions": ["contextMenus", "scripting"],
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
background.js
コンテキストメニューの登録とクリック時の処理:
// 拡張インストール時にメニューを登録
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "format-copy",
title: "整形してコピー",
contexts: ["selection"]
});
});
// メニューがクリックされたとき
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId !== "format-copy") return;
const text = info.selectionText.trim();
chrome.scripting.executeScript({
target: { tabId: tab.id },
func: (t) => navigator.clipboard.writeText(t),
args: [text]
});
});
エラーが出たら「そのまま貼る」
ここが一番の時短ポイントです。動かないときは、Chromeが出すエラーメッセージをそのままClaudeに貼ります。
以下のエラーが出ました。原因と修正案を教えて。
Uncaught (in promise) Error: Cannot access contents of the page.
Extension manifest must request permission to access the respective host.
エラー文を翻訳・要約せず、そのまま渡すのがコツです。
第4章 ローカルで動かす
- Chromeで
chrome://extensionsを開く - 右上の「デベロッパーモード」をオンにする
- 「パッケージ化されていない拡張機能を読み込む」で作ったフォルダを選ぶ
コードを変更したら、この画面の更新ボタン(↻)を押すと反映されます。動かないときは、拡張カードの「エラー」表示やService Workerのログを確認し、その内容をClaudeに貼りましょう。
第5章 公開準備
ストアに出すには、コード以外の素材が必要です。この「面倒だが頭は使わない」部分こそAIが効きます。
アイコンは16 / 48 / 128pxの3サイズが必要。ストア説明文やプライバシーポリシーの雛形もClaudeに作らせられます。
このChrome拡張のストア説明文を日本語で書いて。
- 機能:選択テキストを整形してコピー
- トーン:簡潔で、誇張しない
- 審査に通りやすい、正確な表現で
ただしプライバシーポリシーは、記載内容が実際の拡張の挙動と一致しているかを必ず自分で確認してください。実態とズレていると審査で落ちます。
第6章 審査
Chrome Web Store Developer Dashboard に登録し(初回は登録料が必要)、拡張フォルダをZIPにまとめてアップロード、掲載情報を入力して提出します。
審査で落ちやすいポイント:
- 過剰な権限:使っていない権限が残っている
- 権限の用途説明の不足:なぜその権限が要るかの説明が弱い
- 説明文と実機能の不一致:できないことを書いている
- プライバシーポリシーの不備:データの扱いの記載が実態と違う
- 単一目的ポリシー違反:無関係な機能を詰め込みすぎ
提出前にClaudeにチェックさせると安心です。
以下のmanifest.jsonと説明文で、Chromeウェブストアの審査で
指摘されそうな点を、Googleの拡張ポリシー観点で洗い出して。
(manifest.jsonと説明文を貼る)
リジェクトされてもGoogleから理由が通知されます。その通知文をそのままClaudeに貼れば、原因と修正方針を整理してもらえます。多くは権限か説明文の問題で、直せば再提出できます。
おわりに
Chrome拡張は「アイデアはあるのに実装と審査が面倒」で止まりがちなジャンルでした。そこにAIを挟むと、調査時間が削れ、アイデアから公開までの距離が一気に縮まります。
AIは調べもの・雛形づくり・エラー解決を高速化してくれますが、最終的にコードと挙動を理解し、責任を持って公開するのは自分です。まずは小さな一本から、AIに相談しながら作ってみてください。