Chrome 拡張を自分で作る

コース構成

このコースで学ぶこと

1. 01

   なぜ自分専用 Chrome 拡張か

   市販の拡張に欲しい機能がない、機密データで使えない。自作 + Claude Code なら 2 時間で実現。

   「この Web ページから情報を抜き取って Notion に保存」「複数タブを 1 つの記事に統合」「業務特有のショートカット」など、市販の拡張で叶わないニーズは多い。

   Chrome 拡張は意外と簡単。manifest v3 + シンプルな JavaScript で動きます。Claude Code に頼めば 2 時間で動くものができる。

   • manifest v3 で書く（最新仕様）
   • popup / content script / background の 3 役
   • Chrome Storage API でデータ保存
   • Chrome ウェブストアに公開可能（任意）
   プロジェクト初期化
2. 02

   プロジェクト初期化

   ファイル 3 個から始める：manifest.json / popup.html / popup.js

   json

   {
     "manifest_version": 3,
     "name": "My Tool",
     "version": "0.1.0",
     "description": "自分用の便利ツール",
     "action": {
       "default_popup": "popup.html",
       "default_icon": "icon.png"
     },
     "permissions": ["activeTab", "storage"],
     "host_permissions": ["<all_urls>"]
   }

   なぜ自分専用 Chrome 拡張かClaude Code に丸投げプロンプト
3. 03

   Claude Code に丸投げプロンプト

   やりたいことを文章で伝える → 動くコードが出てくる。

   text

   > Chrome 拡張を 1 個作って。
   
   ## やりたいこと
   現在開いている Web ページから、以下を抽出してクリップボードにコピー:
   - タイトル
   - URL
   - メタ description
   - 主要見出し（h1, h2）
   
   クリップボード形式:
   ```
   # <タイトル>
   <URL>
   
   ## Description
   <description>
   
   ## Headings
   - <h1>
   - <h2>
   ```
   
   ## 構成
   - manifest v3
   - popup から実行ボタン
   - content script で情報抽出
   - chrome.scripting.executeScript を使う
   
   ## 出力
   ファイル一式（manifest.json / popup.html / popup.js / content.js / icon.png）

   出力イメージClaude の実装サマリ

   Chrome 拡張一式を作成しました（manifest v3）:
     manifest.json — activeTab / scripting 権限のみ
     popup.html / popup.js — 「ページ情報をコピー」ボタン
     content.js — title / URL / description / h1・h2 を抽出
     icon.png — 16/48/128px のプレースホルダ
   
   chrome://extensions で「パッケージ化されていない拡張機能を読み込む」から動作確認できます。
   …（権限は最小構成にしています）

   プロジェクト初期化Chrome に読み込んで動作確認
4. 04

   Chrome に読み込んで動作確認

   開発者モード ON → 『パッケージ化されていない拡張機能を読み込む』。

   手を動かす

   0 / 6

   • chrome://extensions/ を開く
   • 右上の『開発者モード』を ON
   • 『パッケージ化されていない拡張機能を読み込む』
   • プロジェクトフォルダを選択
   • ツールバーにアイコンが追加されるのを確認
   • テストページで動作確認
   Claude Code に丸投げプロンプトChrome ウェブストアに公開（任意）
5. 05

   Chrome ウェブストアに公開（任意）

   個人用に留めるか、世界に公開するか。

   • ストア登録費: $5（一度きり）
   • 審査: 1-3 営業日
   • プライバシーポリシーの URL 必須
   • アイコン・スクリーンショット・説明文を用意
   • 公開後の更新は数時間で反映
   Chrome に読み込んで動作確認応用：業務特化のアイデア
6. 06

   応用：業務特化のアイデア

   実際に作る価値のあるアイデア集。

   • 競合 LP を 1 クリックで保存（HTML + スクショ）
   • GitHub の PR を Notion に転記
   • Twitter 投稿を CRM に保存（リサーチ用）
   • 選択範囲を Claude にすぐ送る
   • 業務ツールの繰り返し操作を 1 ボタン化

   理解度チェック

   1. Q1.Chrome 拡張を Claude Code で『自分用に』作る最大の利点は？

      AChrome ウェブストアで儲かるB市販拡張に無い・機密データで使えないニーズに、自分のワークフローに完全フィットしたツールが 2 時間で作れるCJavaScript を学べるDmanifest v3 が分かる

   2. Q2.Chrome 拡張に与える permissions（権限）を設計する際の基本原則は？

      Aとにかく全部許可するB必要最小限のオリジン・API だけに絞り、ストレージは local に閉じるC全 URL に対して活動させるDAPI キーをコード内に直書きする

   3. Q3.業務データを扱う Chrome 拡張を社内で配る前に、人間が必ず確認すべきは？

      A拡張のアイコンの色B外部 API への送信先・通信内容、機密データの取り扱い、社内の利用ポリシー違反がないかCClaude のバージョンDChrome のテーマ
   Chrome ウェブストアに公開（任意）