いまからやってみるClaude入門：Chrome拡張機能をつくってみる
製造ビジネステクノロジー部・浅野です。
みなさま、生成AIは活用されているでしょうか？
「ChatGPTとかClaudeとかGeminiとか、名前は聞くけどなあ……」
「チャットはしてみたけど……」
「なんかいろいろ作れるらしいじゃん？ でも何をつくってもらえばいいのか悩んじゃうなあ……」
こうした思いで、どこから手をつけていいものか悩んでしまう／結局あまり使ったことがない、という方もまだまだ多いのではないでしょうか？
そこで本記事では、 「普段使いできる小さなChrome拡張機能をつくってみる」 という題材で、実際に生成AIサービス（ Claude ）に入門してみたいと思います。
ただ生成AIに入門するだけではなく、読み終わった時にはご自身の日々のタスクを効率化する素敵なツールが出来上がっているかもしれません！
前提
- 本記事では、Claudeを活用します。
- 初めての方でも取り組みやすいことを意識して、 Freeプラン（無料）・Web版でサービスを利用する想定 で記載します。
- Claudeではプランに応じて使用制限が設けられています。
- 本記事程度の内容であれば問題ないはずですが、制限に到達した場合、時間をおいて作業をするか、他プランに切り替えるなどをお願いします。
- ちなみに、筆者はMaxプラン（有料）を利用しているため、画面の表示が一部異なっています。ご了承ください。
- つくってみるもの：Chrome拡張機能
- ちょっとした機能であれば必要なプログラムの分量も少なくて済み、かつ普段使いもしやすいということで、個人的には最初の制作物としておすすめしたいです。
- Google Chromeをご利用でない方は、ご利用中のブラウザの拡張機能などに読み替えてください。
- 想定する読者
- 生成AIでのモノづくりを試してみたい方
- まだClaudeを使ったことがない方
やってみよう！
Claudeのチャット画面を眺める
まずはClaudeにアクセスしてみましょう！
初めてアクセスする場合、アカウント登録を求められるはずです。
ログインが完了すると、画像のようにチャットを送信できる画面が表示されます。
Claudeはユーザーがどう呼んで欲しいかを覚えているので、名前で呼びかけてくれていますね。
使い方としてはここからチャットを送るだけなのですが、1つ注意しておくべきことは 「利用しているモデルがどれか？」 という点です。
モデルは、生成AIの頭脳 に当たります。
モデルが高性能なほど、より複雑なタスクが可能になります。
画像内では、チャット画面の右下に「Sonnet 4.6」と表示されています。
この部分で利用するモデルを選択することができます。
ご利用のプランによって、利用できるモデルは異なります。Freeプランの場合は、まずはデフォルトで「Sonnet」が指定されているはずです（※本記事執筆時点）
今回の記事の内容であればデフォルトの「Sonnet」で十分です。もしより高度な内容を扱いたい場合には、プランの変更・上位モデルの利用を試してみてください。
拡張機能をつくる
さて、実際につくりはじめてみましょう！
チャット画面にて、お願いしたい内容を記載していきます。
「どんなものをつくりたいか？」という点は各々あると思いますので、少し時間をとって考えてみましょう。
この際、以下を踏まえるとご自身にとって使い勝手の良いツールになるかと思います。
- 自分が普段よく行っている行動をふりかえり、その行動をサポートする小さなお助け機能をイメージする。
- あまりに大きすぎる内容は、言語化するのも、開発してもらうのも大変になります。まずは小さくはじめましょう。
- できる範囲で構わないので、簡潔かつ明確に記載する。
- 「できる範囲で」で大丈夫です！
- 「なぜ／何をつくりたいのか」、「どんな入力が来るのか」、「どんな結果・出力を期待しているのか」 という点を意識すると書きやすいかと思います。
私は以下のように書いてみました。
（Chromeのタブをがんがん新規に開く使い方をしているせいか、目当てのタブが探し出せず迷子になりがちなので……）
「同じ悩みがある」または「とりあえず何かつくってみたい」という方は、以下をコピーしてご利用ください。
Chromeの拡張機能を作りたいです。
以下の機能を持つ拡張機能を作ってください。
・Chromeのタブで、複数重複して開いているタブのうち、1つだけを残して他のタブは閉じる
チャットが書けたら、とりあえず送ってみましょう！
もしも詳しく書いて欲しい部分があれば、Claudeから尋ねてくれます。
なのでチャットの文面は心配しすぎずで大丈夫です。
しばらくいろいろと考えてくれて……
拡張機能を利用するための方法とともに、ZIPファイルを送ってくれました。もうできたみたいです。
このあたりは、もしかしたらZIPファイルではなく、画面に直接プログラムを表示してくれる場合があるかもしれません。その際はClaudeの指示に従って、お手元にプログラム用のファイルを用意してあげてください。手順の細部がわからなくなってしまった場合も、チャットで質問して解決することができます。
中身も見てみましょう。
ふむふむ、どうやら必要そうなものをまとめて用意してくれたようです。
このまま使いはじめても良いのですが、Chrome拡張機能はブラウザの権限を付与する関係上、セキュリティの観点で「利用して問題なさそうか？」は念押ししておきたいところです。特に情報を外部に送るような挙動がないかは気になりますね。
なので、それについてもClaudeに尋ねてみましょう。
外部通信はしていないとのこと。
「この回答を全て信頼しても良いか？」という点の判断は難しいですが、付与している権限の情報などは確かに出力されたプログラムと照らしても合っていました。付与されたtabs権限も、若干範囲の広い権限ではありますが、今回つくりたいものを実現する上では妥当に思われます。個人利用の範疇では問題ないと判断し、Claudeの生成物・回答を信頼して進みます。
（ご自身で出力された拡張機能について、気になる点があればチャットで続けて訊いてみましょう！）
実際に作成された拡張機能を使ってみます。
まずは、先ほどClaudeが教えてくれた手順に従ってインストールしました。
DevelopersIOをわざと複数のタブでひらいて、
つくった拡張機能を起動します。デザインがなんとなくかっこいいですね。
確かに重複していることを検出してくれています。
本命の機能を動作させてみます。
3件ひらいていたタブが、1件に減りました！ 目的達成です！
これでタブを探して彷徨う日々とはおさらばできそうです。
まとめ＆さらに進んで
小さなChrome拡張機能をつくる過程を通じて、生成AI（Claude）に入門しました。
日々をさらに素敵にしてくれるようなツールは完成したでしょうか？
上手く完成していたらおめでとうございます！ ぜひ自分で利用して、さらに改善してみてください。
もし上手く完成しなくても大丈夫です。今回のやり方を踏まえて、さらに会話を続けてみてください。
きっとより良いものが出来上がる瞬間が来ます。
今回は初めての方でも取り組みやすいよう、Freeプラン・Web版の利用を前提にしていました。
Claudeには、さらに開発を効率的に行えるデスクトップ版アプリや、「Claude Code」と呼ばれるツールも存在しています。
このDevelopersIOでは、Claudeについての記事を他にも数多く公開しています。
興味があればぜひそちらも読んでみてください！
