Claude Codeでタブを統合する拡張機能を作成してみた
はじめに
カスタマーサクセス部の中村です。今回「Claude Code」を使ってChrome拡張機能を作ってみました。本拡張機能はGoogle Chromeのタブが散らかってしまい、ひとつにまとめたいという動機から作成しています。
作ったもの
Tab Merger - 同じ種類のタブを自動的に1つにまとめてくれる拡張機能
例えば：
- Gmailのタブが複数ある → 最新のものだけ残す
- 特定のドキュメントURLを統合
使用環境
| 項目 | 内容 |
|---|---|
| 使用AI | Claude Code (Anthropic) v2.1.10 |
| 使用技術 | JavaScript, HTML, CSS, Chrome Extension API |
開発の流れ
1. 最初のプロンプト
まず、作りたいものを具体的に伝えました
Chrome拡張機能を作りたいです。
【機能】
- 指定したURLパターンに一致するタブを1つにまとめる
- 複数のマッチルールを設定できる
- 4つのマッチタイプ（ドメイン一致、完全一致、前方一致、ワイルドカード）
【技術要件】
- Manifest V3を使用
- 必要な権限: tabs, storage
- ポップアップで設定画面を表示
【UI要件】
- モダンでクリーンなデザイン
- 幅500px
- 緑系の配色
- ルールの追加・削除が直感的にできる
ファイル構成も含めて、全ファイルを作成してください。
2. AIが生成したファイル構成
Claude Codeは以下の構成で全ファイルを生成してくれました：
tab-merger-extension/
├── manifest.json # 拡張機能の設定ファイル
├── background.js # タブ監視とマージ処理
├── popup.html # 設定画面のHTML
├── popup.js # 設定画面のロジック
├── popup.css # スタイルシート
├── icons/ # アイコン画像
│ ├── icon16.png
│ ├── icon48.png
│ └── icon128.png
└── README.md # 使い方のドキュメント
3. 各ファイルの役割
manifest.json（拡張機能の設定ファイル）
Chromeに対して「この拡張機能は何者で、何ができるか」を宣言しました。
{
"manifest_version": 3,
"name": "Tab Merger",
"version": "1.0",
"description": "指定したURLパターンのタブを自動的に1つにまとめます",
"permissions": ["tabs", "storage"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
}
}
| 項目 | 意味 |
|---|---|
manifest_version |
バージョン。今回は3回改良しました。 |
name / description |
拡張機能の名前と説明 |
permissions |
この拡張機能が使う権限。tabsはタブ操作、storageは設定保存する権限です。 |
background |
裏で常に動くスクリプトを指定 |
action |
ツールバーのアイコンをクリックした時に開く画面を指定 |
background.js（バックグラウンド処理）
// タブが作成されたときに監視
chrome.tabs.onCreated.addListener(async (tab) => {
const rules = await chrome.storage.sync.get('mergeRules');
const mergeRules = rules.mergeRules || [];
// ルールにマッチするか確認
for (const rule of mergeRules) {
if (matchesRule(tab.url, rule)) {
await mergeTabs(tab, rule);
break;
}
}
});
処理フロー：
- 新しいタブが開かれたことを検知
- 保存されているルールを読み込む
- 新しいタブのURLがルールにマッチするか確認
- マッチしたら、同じルールに該当する既存タブを探す
- 既存タブがあれば → そのタブのURLを更新して新しいタブを閉じる
popup.html / popup.js / popup.css（設定画面）
ツールバーのアイコンをクリックすると開く設定画面。
| ファイル | 役割 | 例えるなら |
|---|---|---|
popup.html |
画面の構造（何をどこに置くか） | 家の間取り図 |
popup.js |
画面の動き（ボタンを押したら何をするか） | 家の中の人 |
popup.css |
画面の見た目（色、サイズ、余白） | 家の内装・装飾 |
設定画面でできること：
- URLパターンとマッチタイプを入力してルールを追加
- 登録済みルールの一覧を確認
- ルールの有効/無効を切り替え
- 不要なルールを削除
icons/（アイコン画像）
Chromeのツールバーや拡張機能管理画面に表示されるアイコン。用途に応じて3サイズ用意。
| サイズ | 用途 |
|---|---|
| 16px | ツールバーのアイコン |
| 48px | 拡張機能管理画面 |
| 128px | Chromeウェブストア |
4. 修正依頼
最初の生成後、2つの修正を依頼しました：
依頼1: デフォルトルールの削除
デフォルトでルールで検索エンジンの URL が設定されていたため、デフォルトルールを削除しました。
デフォルトで設定されているルールは不要なので削除してください
依頼2: READMEの改善
複数の人に使用してもらう予定で作成したため、README を見て設定ができるように、詳しくしてもらいました。
READMEをもっと詳しくしてください。
特に設定方法を詳細に、動作説明は簡潔にお願いします。
5. パッケージング
チームに共有したかったので、配布用のZIPファイルを作成を依頼しました。
配布用にZIPファイルを作成してください
おわりに
Claude Codeを使えば、技術的な知識が不足していても、実用的なChrome拡張機能が簡単に作れることに感動しました。
皆さんもぜひ、作りたい拡張機能があればAIに相談してみてください！
AWS運用代行・サーバー監視のご案内
クラスメソッド マネージドサービスは、AWS国内支援実績No.1のクラスメソッドが提供する、クラウド特有の対応やクラウド技術者の不足に課題をお持ちのお客様向けのAWS運用トータル支援サービスです。
監視や運用支援にとどまらず、お客様のクラウド利用を最適化し日々の負担を最小化することで、お客様のビジネス効果の最大化を支援します。
クラスメソッドオペレーションズ株式会社について
クラスメソッドグループのオペレーション企業です。
運用・保守開発・サポート・情シス・バックオフィスの専門チームが、IT・AIをフル活用した「しくみ」を通じて、お客様の業務代行から課題解決や高付加価値サービスまでを提供するエキスパート集団です。
当社は様々な職種でメンバーを募集しています。
「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、クラスメソッドオペレーションズ株式会社 コーポレートサイト をぜひご覧ください。※ 2026年1月 アノテーション㈱から社名変更しました
