ブラウザ拡張機能
毎日使うブラウザを便利にする。配布もしやすい
どんなもの?
Chromeなどのブラウザに機能を追加する拡張機能。「ページを要約」「価格を自動チェック」「作業を効率化」など、毎日使うブラウザ体験をカスタマイズできます。ストアで配布すれば世界中の人に使ってもらえ、作ったものが広まりやすいのも魅力です。
自分や周りの作業を便利にするツールを作りたい人
Chromeなどのブラウザに機能を追加する拡張機能が手に入ります。「ページを要約」「価格を自動チェック」など、毎日使うブラウザ体験をカスタマイズでき、ストアで配布すれば世界中の人に使ってもらえます。
おすすめの技術スタック
拡張機能はJavaScriptで作れるので、Web開発の知識がそのまま活きます。実装はCursor/Clineに任せ、AIで賢い処理をするならClaudeを組み込み。設定やデータの保存はブラウザの標準機能かSupabaseを使います。
費用の目安
作って自分で使うだけなら完全無料です。Chromeウェブストアで公開する場合のみ、初回に一度だけ5ドルの登録料がかかります。
| 項目 | 費用 | 補足 |
|---|---|---|
| Cursor / Cline | 無料プランでOK | 無料枠で作れます |
| Anthropic API(AI機能を足す場合) | 従量課金 | 要約など賢い機能を入れる場合のみ |
| Supabase(設定同期する場合) | 無料枠あり | 任意 |
| Chrome Web Store(公開する場合) | 初回登録料5ドル | ストア公開時のみ。一度きり |
| GitHub | 無料 | 個人利用は無料 |
必要なアカウント
開発を始める前に、下のサービスの無料アカウントを用意しておきましょう。
必要なAPIキー・設定
APIキーとは、外部のサービスを自分のアプリから使うための「合鍵」です。下記を取得・設定します。
作り方: まずこのプロンプトをClaudeに送る
細かい手順を覚える必要はありません。下のプロンプトをコピーして、Claude(やCursorのAIチャット)にそのまま貼り付けてください。 あとはClaudeが1ステップずつ伴走してくれます。詰まったら、エラー文や状況をそのまま伝えれば解決に導いてくれます。
あなたはプログラミング初心者の私に、ブラウザ拡張機能の作り方を最初から最後まで伴走してくれるメンターです。以下の前提と要望をふまえて、私が迷わないように「一度に1ステップずつ」教えてください。
【私の状況】
- プログラミングはほぼ未経験です。専門用語は都度かんたんに説明してください。
- パソコンはWindows(またはMac)を使っています。※実際のOSに置き換えて伝えてください
- AIエディタ「Cursor」をインストール済みです。
- 必要な無料アカウント(このページに記載のもの)は作成済みです。
【作りたいもの】
- Chromeブラウザに機能を追加する拡張機能。※作りたい機能もここに書いてください
- 例:「今見ているページをAIで要約する」「特定サイトの価格を自動チェックする」。
- まず自分のブラウザに開発者モードで読み込んで動作確認できる最小構成を作りたい。
- AIで賢い処理(要約・翻訳など)をする場合は、Claude(Anthropic API)を組み込みたい。
- manifestなど拡張機能特有の設定も、初心者向けに説明しながら進めてほしい。
- 慣れたらChromeウェブストアでの配布手順も教えてほしい。
【進め方のお願い】
1. まず全体像(何をどの順でやるか)を、専門用語なしで箇条書きで教えてください。
2. そのあと、最初のステップだけを具体的に指示してください。私が「できた」と言ったら次へ進んでください。
3. 各ステップでは、私が実行するコマンドや操作を省略せずに書き、それが「何のための作業か」も一言添えてください。
4. エラーが出たら私がその文面を貼るので、原因と対処をやさしく説明してください。
5. データベースやログインを扱う場合は、セキュリティ(他人にデータが見えない設定)も忘れずに教えてください。
6. 途中で必要なファイルの中身は、コピーして貼れる完全な形で提示してください。
まずは【1】の全体像から教えてください。 ※ 【私の状況】の部分(OSや、まだ登録していないアカウント)は、あなたの環境に合わせて書き換えてから送ると精度が上がります。
つまずきやすいポイント
- 最初の環境構築でエラーが出やすいです。エラー文をそのままClaudeに貼れば、原因と対処をほぼ特定してくれます。
- 拡張機能には独自の設定ファイル(manifest)や作法があります。Claudeが用意してくれるので指示通り進めましょう。
- 自分のブラウザに「開発者モード」で読み込んで動作確認します。この手順もClaudeに聞けます。
- APIキーやパスワードはコードに直接書かず「環境変数」に入れます。GitHubに公開する際に漏らさないよう、Claudeに「秘密情報の安全な扱い方」も聞きましょう。
収益化のヒント
Cursor等の開発ツール導線。拡張機能は配布しやすく、作例記事の需要も安定して高い。