はじめに
Chrome拡張機能に限らず、ブックマークレットやTampermonkey、Shell Scriptなど、自分で作れば解決する課題は多々あります。
しかし、「便利になるのは分かっているけど、自分でコードを書くコストを考えると割に合わない」と諦めてしまうことも多いのではないでしょうか。
そこで役立つのが AI です。
AIに任せてしまえば、これまでコストが見合わなかった「自分専用のニッチなツール」がサクッと作れるようになります。
既製の拡張機能では手が届かない「あと一歩」の要望（例：Xなどの特殊なサイトで画像を保存したい、特定の要素だけ非表示にしたい等）も、自作なら自由自在です。
実装方針
さて、今回はChrome拡張機能を作ってみます。
本来の目的は「自分だけのニッチな要望」を叶えることですが、いきなり特殊なことをすると解説がややこしくなります。
そこで今回は、「見えないデータをDOMから取得して表示する」という基本動作の練習として、「開いているサイトのOGP画像を取得する機能」を題材にします。
この「DOMから情報を抜く」という基本さえAIと共有できれば、あとはターゲットを変えるだけで「自分だけのニッチなツール」に応用可能です。
フェーズ1：土台を作る
まずはChrome拡張機能の開発に必要な情報を集めるところから始めます。
ディレクトリ構成や必須ファイルが分からなくても、AIに聞けば問題ありません。
ざっくり質問したところ以下の返答が返ってきました。
Chrome拡張機能（Manifest V3）開発における標準的なディレクトリ構成と、各ファイルの役割まとめです。
-----
## ディレクトリ構成とファイル一覧
開発の規模によりますが、以下の構成が標準的です。
```text
my-extension/
├── manifest.json # 最重要：設定ファイル（必須）
├── icons/ # アイコン画像（必須推奨）
│ ├── icon-16.png
│ ├── icon-48.png
│ └── icon-128.png
├── src/ # ソースコード
│ ├── background.js # Service Worker (常駐・イベント処理)
│ ├── content.js # Content Script (DOM操作)
│ └── popup/ # ポップアップ画面
│ ├── popup.html
│ ├── popup.css
│ └── popup.js
└── _locales/ # 多言語対応する場合のみ
└── en/
└── messages.json
### 各ファイルの役割
1. **manifest.json (必須)**
* 拡張機能の「設計図」。バージョン、権限、読み込むスクリプトなどをJSON形式で定義します。
2. **アイコン画像 (16px, 48px, 128px)**
* ブラウザのツールバー、拡張機能管理画面、Chromeウェブストアで使用されます。
3. **background.js (Service Worker)**
* ブラウザの裏側でイベントを待ち受けるスクリプト。DOMにはアクセスできません。
4. **content.js (Content Script)**
* 閲覧中のWebページに挿入されるスクリプト。DOM操作（文字色の変更、要素の削除など）を担当します。
5. **popup.html / popup.js (Action)**
* アイコンをクリックした時に表示される小さなウィンドウのUIとロジックです。
これを元に実際にコーディングを依頼していきます。
ちなみに今回はVS CodeとGitHub Copilotを使っていますが、Gemini Code Assist（無料枠あり）やChatGPTなど、コード生成ができるAIなら何でもOKです（とはいえエディタと接合したものを推奨します）。
まずは「クリックしたらHello Worldと表示する」だけの最小構成を作ってみましょう。
プロンプト
あなたは熟練したエンジニアです。
ベストプラクティスでコーディングしてください。
下記の設計を元にChrome拡張機能を作成してください。
拡張機能をクリックしたら"Hello World"と表示するようにしてください。
---
(上記AIの回答を適当に貼り付ける)
結果
このようにコードが生成されました。
実際に動かしてみる
コードができたら、実際にブラウザで動かしてみます。
拡張機能の読み込み方法がわからない場合も、AIに聞いてしまいましょう。
プロンプト
作成された拡張機能をブラウザで試してみます
具体的な動作確認方法を教えて下さい
回答
1. Chromeを開きます。
2. アドレスバーに `chrome://extensions/` と入力してアクセスします。
3. 右上の「デベロッパーモード」をオンにします。
4. 「パッケージ化されていない拡張機能を読み込む」をクリックします。
5. 作成した my-extension フォルダを選択します。
6. 拡張機能アイコンをクリックし、「Hello World」と表示されることを確認します。
指示通りに読み込んでみます。
無事に動きました。
フェーズ2：OGP取得機能を実装する
土台ができたので、ここから肉付けをしていきます。
「現在開いているページのOGP画像を取得する」というロジックを追加します。
まずはAIに「OGPとは何か」「Chrome拡張でどう取得すべきか」を整理させます。
プロンプト
OGPとは何か、拡張機能の実装に必要な情報を簡潔にまとめてください
AIの回答
## OGP (Open Graph Protocol) とは
WebページがSNS（X, Facebook, Slack等）でシェアされた際に、**タイトル、画像、説明文などを正しく魅力的に表示させるためのHTMLメタタグの仕様**です。
拡張機能開発においては、「ブックマーク保存時」や「リンク生成時」にページのメタデータを取得するために利用されます。
## 拡張機能での実装要件
### 1\. 取得すべき主要なメタタグ
HTMLの `<head>` 内にある以下の要素がターゲットになります。
| 項目 | プロパティ名 (`property`) | 役割 |
| :--- | :--- | :--- |
| **タイトル** | `og:title` | ページのタイトル |
| **画像** | `og:image` | サムネイル画像 URL |
| **説明** | `og:description` | ページの概要・要約 |
| **URL** | `og:url` | 正規化されたページの URL |
| **タイプ** | `og:type` | コンテンツの種類 (article, website等) |
### 2\. データ取得の方法
OGPはDOM要素（HTML）の一部であるため、**Content Scripts** を使用して取得するのが最も標準的です。
この回答で、「content.js を使って <head> 内のメタタグを取得すればよい」と分かりました。
ちなみに最近のAIは会話の履歴（コンテキスト）を保持しているので、そのままでも話は通じます。
しかし、あえてAIが出した回答を、次のプロンプトで「参考情報」として明示的に与えると、実装がよりスムーズになる可能性があります。
少なくとも単に「これやって」と指示するよりも、「この情報（仕様）に基づいてやって」と具体的な材料をセットで渡すほうが、AIも迷わず的確なコードを書きやすくなります。結果として、手戻りを減らして最短でゴールに辿り着けます。
プロンプト
機能追加の依頼をしてみましょう。
現在開いているサイトのOGP情報を取得してポップアップに表示します
現在のコードに追加して機能改善してください
---
参考
HTMLの `<head>` 内にある以下の要素がターゲットになります。
| 項目 | プロパティ名 (`property`) | 役割 |
| :--- | :--- | :--- |
| **タイトル** | `og:title` | ページのタイトル |
| **画像** | `og:image` | サムネイル画像 URL |
| **説明** | `og:description` | ページの概要・要約 |
| **URL** | `og:url` | 正規化されたページの URL |
| **タイプ** | `og:type` | コンテンツの種類 (article, website等) |
### 2\. データ取得の方法
OGPはDOM要素（HTML）の一部であるため、**Content Scripts** を使用して取得するのが最も標準的です。
結果
更新された拡張機能をリロードして再度実行します。
正しくデータが取得できました。
補足
今回は例なので細かくフローを分割しましたが、この規模であれば「OGPを取得するChrome拡張を作って」と一発で投げてもある程度動くものは作れます。
しかし、要件が複雑になればなるほど、一発出しでは修正指示（リテイク）の回数が増えがちです。
「まずは仕様を固める」→「ベースを作る」→「機能を追加する」 のように、少しずつ確認しながら進めるのが、結果的に最短ルートになります。
おわりに
今回は「OGP画像を取得する」というシンプルな機能でしたが、このプロセスは様々な場面に応用が利きます。
- Google Apps Script (GAS): 毎日のルーチンワークの自動化
- Shell Script / Python: ファイル整理やバッチ処理
- UserScript: 自分好みのサイト表示への書き換え
「自分で書くのは面倒だけど、あったら便利」
そう思った時こそ、AIを壁打ち相手にして、自分だけのニッチなツールを作ってみてはいかがでしょうか。
余談
この文章自体、Geminiに作成してもらいました。
正確には構成と箇条書きレベルの内容は自分で書きましたが、文章の整形や補足はAI任せです。
たぶんやろうと思えばゼロから自動生成できると思うのですが、それはそれでガチャになるので自分としてはtxt2txtが一番楽に感じました。
私の所感として、AIは30%のモノを90%にするのは得意だが、90%を100%にするのは向いていないと思います。
したがって、たたき台を作る -> AIにブラッシュアップしてもらう -> 細かいところを自分で修正するという手順が完成度が高くなるのではないかと思っています。
株式会社SKIYAKIのテックブログです。ファンクラブプラットフォームBitfanの開発・運用にまつわる知見や調べたことなどを発信します。主な技術スタックは Ruby on Rails / React / AWS / Swift / Kotlin などです。 recruit.skiyaki.com/
Discussion