AIを駆使してChrome拡張を作った~AI活用した開発~
公開日: 2025年5月7日
最終更新日: 2025年5月7日
タイトルの通りAIを使いながらChrome拡張を作ってみた記事です。
最近はどこもかしこもAI,AI。もれなく自分もAIを使って開発しております。
とはいえ、ChatGPTから入り会話は面白いかもしれないけど、おもちゃの域だなぁ。という感想を持ってテストコードの生成とか簡単なことはさせても、ほんのちょっとしたシンプルなタスクの時短しかできない印象でした。
それが確か2年半くらい前だったと思いますが、そこから時が立ちいろいろな部分でAIが使われ始め、使えるAIもかなりたくさん出てきました。
今回はそんなAIを触って開発を行った経験を共有しようと思います。
この記事は2025年5月前半の執筆時点の感想になります。
目次
- ChatGPTはどうだったのか
- 今使っているAIツールたち
- GitHub Copilot
- Perplexity
- 実際にどういった使い方をしたのか
- 作ったツールを紹介
- 最後に
ChatGPTはどうだったのか
約2年半ほど前、ChatGPTが話題に上がってた頃に初めてAIを使い始めることになりました。
最初に使ってた頃には質問をしたり、簡単なテストを書かせることはありました。
ですが、それ以上の作業となると、プロンプトを作成するコストに対して出力される成果物の質が悪くあまり使い物にならないという印象を持ったことを覚えています。
それからもちょくちょくAIで資料作りなども行うものの、なんとも淡白な、そして不正確な資料が量産されるので、本当に簡単な資料しか作れない。ということでかなりがっかりとした印象でした。
今使っているAIツールたち
ChatGPTに不満を持ちながらも、ちょくちょく使っているそんな中、AIでイラストを作成できたり、アニメーションを作成できるなど
さまざまなことができて、業務的な部分としても、AIがエディタに入ったり、Deep Researchなども増えてきて、使えるAIというのが増えてきた印象を持ったので
そんな中で、今時点でしっくりきたAIがいくつかあったので、その使い方を共有しようと思います。
- GitHub Copilot
- Perplexity
GitHub Copilot
GitHub Copilotは普段使用しているVSCodeや、JetBrain製のエディタなどさまざまなエディタに組み込むことができるコーディングサポートのできるAIです。
まずは料金ですが、プランがいくつかあるのですが、私が使っているProプランだと月額 $10 にて利用することができます。 ※個人向けプランです
出始めの頃から課金して使っていたのですが、最近 Agentモード の追加と、モデルとしてClaudeが追加されたことにより、実用性がかなり増えました。
Copilotのモデルについて
モデルをGPT4-oで使用していると、どうしてもプロンプトの解像度を上げていかないといけないので、プロンプトを作成する時間が長くなってしまいます。
それに比べて、Claude3.7を使用してやり取りをすると、抽象的な指示で作業を90%くらい遂行できるようなイメージを持ちます。
ただ、最後の10%に関しては自分で実装するか、細かくプロンプトを設定するか。ということになるので、完璧に任せ切れるような代物ではないです。
GPTの方だと50%の完成度 or 70%の完成度で方向性が違う成果物。というイメージだったのでClaudeになってからかなり安定感のある開発が進められました。
AgentモードとそれまでのAsk,Editモード
Agentモードを使用するとClineなどのようにterminalにコマンドを打っていって色々なパッケージのインストールなどを進めてくれます。
これにより、AIに依頼できる作業がかなり増えたので、最初の環境構築から進めることができました。
その他のGitHub Copilotの嬉しい点
上記以外に一つあるかなり便利な点が、Gitコメントを自動で生成してくれる機能もあります。
使ってるのも個人で作っている制作物なので、そんなにコメントに細かくこだわって書いてないので、内容をサクッと書いてくれるのは時間がかなり短縮できるのでありがたいです。
GitHub Copilotの設定
あとは、Copilotを使用するにあたって instructions (AIの初期設定) を指定するとかなり使いやすくなるので、今使っている設定は以下になります。
設定ですが、2つ設定してまして、一つはコード生成など対話しながら使用するAIに対する設定です。
もう一つの commitMessageGeneration はgitコメントを生成する時の設定になります。
ここに以下の設定をすることですごくシンプルにAIを使用することができます。
"github.copilot.chat.codeGeneration.instructions": [
{
"text": "日本語で返してください。"
},
{
"text": "出力はできるだけシンプルにしてください。不要な褒め言葉や感想は一切含めないでください。"
}
],
"github.copilot.chat.commitMessageGeneration.instructions": [
{
"text": "日本語で返してください。"
}
]
Perplexity
PerplexityはAIを使ってWEB検索を行うことができるサービスです。
料金
Proプランを使用してまして、月$20がかかるようです。
ソフトバンク系の回線契約をしてる場合１年間Proプランを使用できるクーポンをもらえます。
何がいいのか？
ChatGPTでは ハルシネーション (本当のことのように嘘を返答する) が顕著に現れるので、どうしても仕事で正しい情報を知るために使うことができなかったです。
ですが、PerplexityではDeep Researchの様に検索を行い、その結果をまとめて返答する。というアプローチのツールになります。
なので正しい情報（ネットの情報）を返答する確率が高いため、新しい技術に対する質問や、エラーコード周りに対する質問もかなり正確性の高い回答ももらえるので、めちゃくちゃ役に立ちます。
実際にどういった使い方をしたのか
実際に上記２つのAIを使ってChrome拡張を作成したので、具体的にどういったシチュエーションで使用したのかを共有しようと思います。
流れ
1.アイデア出し
アイデアを出すために使用したのは Perplexity を使用しました。
まず、「コードレビューの観点や意図が曖昧で、チーム内での認識のズレや伝達ミスが起きやすい」という課題を整理しました。
その後、いろいろなアイデアをもらった中で以下の点を深掘りました。
2. レビューコメントに観点を明示する
指摘時に「MUST(Design): 〜」のようにPrefix（観点）を付けてコメントすることで、どの観点で指摘しているかを明確にできます。
これにより、指摘内容の偏りや抜け漏れを防げます。
その後、これをChrome拡張で作ることとし、仕様書を出力させました。
実際に出力した仕様書
# コードレビュー観点ラベル支援Chrome拡張 最終MVP仕様書
## 1. 主な機能
- GitHubのPRコメント入力欄に「観点ラベル」と「温度感ラベル」を挿入するUIを提供
- 複数ラベルを同時付与可能（例：`[設計][FYI] コメント内容`）
- ラベルの説明文をツールチップで表示
- 観点リストをJSONでカスタマイズ・チーム共有可能
## 2. UI詳細
### ラベル選択UI
1. コメント入力欄の上に「ラベルを追加」ボタンを配置
2. クリックで観点ラベルのドロップダウンを表示
3. ラベル選択後、「挿入」ボタンでコメント先頭に追加
### ツールチップ表示
- ラベルにマウスオーバーした際、説明文をツールチップで表示
（例：`設計` → `設計や仕様に合致しているか`）
### ラベル挿入フロー
1. ユーザーがコメントを入力
2. 「ラベルを追加」ボタンクリック
3. ドロップダウンからラベル選択（複数可）
4. 「挿入」ボタンクリックで選択したラベルをコメント先頭に追加
5. ユーザーがコメントを送信
## 3. データ管理
### JSON設定例
```json
{
"labels": [
{
"type": "観点",
"items": [
{ "label": "設計", "description": "設計や仕様に合致しているか" },
{ "label": "テスト", "description": "テストが十分か" }
]
},
{
"type": "温度感",
"items": [
{ "label": "FYI", "description": "参考情報の共有" },
{ "label": "Q", "description": "質問" }
]
}
]
}
```
### 設定画面
- 拡張のオプション画面で以下を可能に：
- ラベルの追加・削除・並び替え
- JSONのインポート／エクスポート
- ラベルタイプ（観点・温度感）の分類
## 4. 技術仕様
- **対応環境**: GitHub Pull Request画面（Chrome拡張）
- **データ保存**: `chrome.storage.local` を使用
- **DOM操作**: コメント入力欄の特定方法（例：GitHubのDOMクラスを解析）
- **セキュリティ**: 外部通信なし、GitHub以外のページでは無効化
## 5. 開発計画
1. **PoC開発**: GitHubのPR画面でDOM操作の可否を確認
2. **UIプロトタイプ**: ドロップダウン＋挿入ボタンの動作確認
3. **JSON設定連携**: インポート／エクスポート機能の実装
4. **テスト**: 実際のPR画面での動作検証
5. **リリース**: Chrome Web Storeに公開（プライベート配布も可能）
2.実装
ここまでできればあとは実装に進めることができました。
実装では GitHub Copilot を使用していました。
Agentモードができたことにより、対象のmdファイルを読み込ませて、「アプリを作成してください。」という指示を行うことで次々とディレクトリを作成してファイルができていきます。
また、その後出力されたファイルはjsファイルだったので、jsでDOM操作をするのはかなり大変なのでTypeScriptに変換し、その後Reactに変換する流れで作成を行いました。
Reactまで分解できれば、あとは普段使用しているコード同様の使用感まで落とし込めているので、メンテナンス可能なコードに仕上がりました。
そこから先は地道に動きを見ながら修正し、emotionの導入なども行ったりしていました。
3.リリース
最後にリリースする方法も知らなかったので Perplexity を使用してリリース方法を調べました。
実際の内容
Chrome拡張をストアで配信するための準備を教えてください。
一応動くソースコードは用意できていってる感じです。そこから先の手続きだったりが必要なのかとか。
Chrome拡張をストアで配信するための準備を教えてください。 一応動くソースコードは用意できていってる感じです。そこから先の手続きだったりが必要なのかとか。
=== 答え ===
Chrome拡張機能をストア（Chromeウェブストア）で配信するための準備と手続きは、以下の流れになります。
必要な準備
動作するソースコード一式（manifest.json含む）が既に用意できている前提です。
配信までの具体的な手順
1. デベロッパー登録
Chromeウェブストアで拡張機能を公開するには、まずGoogleアカウントでデベロッパー登録が必要です。
初回のみ**5ドル（約700円）**の登録料をクレジットカードで支払います。
2. 拡張機能のパッケージ化
拡張機能のディレクトリ（manifest.jsonやアイコン画像、スクリプト等が入ったフォルダ）をZIP形式で圧縮します。
3. デベロッパーダッシュボードへアクセス
Chromeウェブストアのデベロッパーダッシュボードにログインし、「新しいアイテムを追加」からZIPファイルをアップロードします。
4. ストア掲載情報の入力
拡張機能の説明、カテゴリ、言語、アイコン画像、スクリーンショットなど、ストアに表示される情報を入力します。
権限（permissions）を使う場合は、その理由やプライバシーポリシーも記載します。
5. 公開範囲・配布地域の設定
公開範囲や配布したい国を選択します。
6. 審査の申請
入力が完了したら「審査のため送信」ボタンでGoogleの審査に提出します。
7. 審査・公開
審査は数時間～数日かかる場合があります。通過後、自動または手動で公開設定を行い、Chromeウェブストアに掲載されます。
注意点・補足
manifest.jsonやアイコン画像にエラーがあるとアップロード時に指摘されます。修正して再アップロードしてください。
権限が多い場合や機密性の高い権限を使う場合は、審査が厳しくなることがあります。
公開後、ストアの検索結果に反映されるまで数時間かかることがあります。
拡張機能を更新する場合は、manifest.jsonのversion番号を上げて再度ZIP化・アップロードします。
この流れで進めれば、Chrome拡張機能をストアで配信できるようになります。ご参考ください。
という回答が出てきます。
これは、ボタンの名前なども結構正確で、Google検索を行ってそのあと正しい情報を探す手間が省かれていてとても使い勝手のいい状態だと感じています。
さらに細かいやり取りや、GIMPでのアイコン作成についてなど確認してストアへ公開が叶いました。
作ったツールを紹介
Lighttag PR というツールを作成したのでぜひストアを覗いてくれると嬉しいです。
最後に
ChatGPTだけだと、どうしても細かい指示や正確な指示をしないと思った通りに動かないのでAIを使っていても効率的だと思うことは少なかったです。
ですが、今回いろいろなツールを使って思ったのは「目的を持ったAI」を使うことでかなり業務改善が見込めると思いました。
「コードを書く補助をする」「調べ物をしてまとめる」などのように用途がある程度決まっているからこそある程度プロフェッショナルな動きができるんだなと思いました。
じゃあChatGPTが悪いかというとそうでもなく、レスポンスの速さやコストの安さという点も考えると、シンプルなタスクをやってもらうにはいい選択肢になるかと思います。
ただ、複雑なタスクになった時に Claude などのLLMが向いているというだけで、人間側も用途に合わせてAIを使い分けることで効率のよい開発ができると思いました。
プロフィール
- 名前
- GASHIRA-E
- 経験
- フロントエンド(React,Next.js)/firebase/Node.js(Express)
最新記事