この記事の目的
Claude Codeを活用して、実用的なChrome拡張機能を一から構築します。今回開発するのは「Webページの文字数をカウントする拡張機能」です。
Chrome拡張機能について
ブラウザに機能を追加するプログラムです。AdBlockやDeepLといった有名な拡張機能も同じ仕組みで作られており、自分でカスタマイズしたものを開発できます。
開発を進める
mkdir chrome-word-counter
cd chrome-word-counter
claude
ステップ1：基本ファイルの準備
Chrome拡張機能を開発したい。Manifest V3対応で。
機能：Webページの全体文字数をカウントしてポップアップで表示する。
以下のファイルを生成してください：
- manifest.json
- popup.html
- popup.js
- content.js
- styles.css
Claude Codeがすべてのファイルを自動生成します。
ステップ2：Chromeへのロード
- Chromeで
chrome://extensions/にアクセス - 画面右上の「デベロッパーモード」をON
- 「パッケージ化されていない拡張機能を読み込む」を選択
- 作成したプロジェクトフォルダを指定
ツールバーに拡張機能のアイコンが表示されます。
ステップ3：機能の追加
選択テキストの文字数もカウント対応にして。
ポップアップに「ページ全体: ○○文字」と「選択中: ○○文字」を表示。
単語数、行数、推定読了時間も表示してください。
日本語は400文字/分、英語は200words/分で計算。
ステップ4：UIの改善
ポップアップデザインを改善してください。
幅300px、角丸デザイン、ドロップシャドウ付き。
数値は大きめの太字。ダークモード対応も忘れずに。
その他の開発例
| 拡張機能 | 作成指示の例 |
|---|---|
| タブ管理 | 「複数のタブをグループ化して一括管理できる拡張を作成」 |
| スクリーンショット機能 | 「Webページをキャプチャしてクリップボードにコピー」 |
| 後読みリスト | 「現在のページを保存して後で読み返せる機能」 |
| カラーピッカー | 「ページ上の色をHEXコードで抽出」 |
| テキスト翻訳 | 「選択テキストをポップアップ内で翻訳」 |
Chrome Web Storeでの公開
- Chrome Web Store Developer Dashboardに登録（初回登録料$5）
- プロジェクトをZIPファイルに圧縮してアップロード
- Googleの審査を完了待ち（通常数日）
このプロジェクトをChrome Web Store用にパッケージ化してください。
不要なファイルは除外してください。
まとめ
- Chrome拡張機能は manifest.json・HTML・JavaScript で実装可能
- Claude Codeなら日本語指示で自動生成できる
- 「デベロッパーモード」でローカル環境での動作確認ができる
- Web Store公開により世界中のユーザーに配布可能
この記事が参考になったらLGTMお願いします！
Zennでも技術記事を発信中です → https://zenn.dev/and_and_and