最近、Chrome拡張が manifest v3 のみ動作可能になった影響で、昔から使っていたChrome拡張が動作しなくなりました。

ちょっと不便なので、代替のChrome拡張を探したり自分で作ってみたりすることも考えました。とはいえ、せっかくなのでいわゆるAIエージェントを使って自作してみたくなりました。

そこで、「AmazonのURLが長い場合、シンプルなURL ( /dp/ASIN ) 形式へとリダイレクトする」というChrome拡張をClineとともに作ってみたことから、2025/3時点ではどんな感じなのかをメモとして残します。

なお、今回対応範囲としたAmazonのURLのリストは以下のページを参考にしています。ありがとうございます。
Amazonの商品個別ページのURLからASINを取得する | unoh.github.com by unoh

　
目次

• 環境
• 事前検討
  • AIエージェントは何を使うかについて
  • Chrome拡張を作る手段について
  • 開発環境について
• 環境構築
  • Dev Container 環境の構築
    • Dockerfileの作成
    • devcontainer.json の作成
  • Anthropic APIキーの取得
  • Clineの公式ドキュメントをGoogle NotebookLM に読み込ませる
• Cline関連の設定
  • Settingsアイコンによる設定
  • Auto approveの設定
  • .clinerulesディレクトリへのファイル追加
  • memory-bankディレクトリへのファイル追加
  • .clineignore ファイルの用意
• Clineとの協業
• おわりに
• 参考：Gemini 2.0 Flash モデルの場合
• ソースコード

　

環境

• Windows11
• Dev Containerで開発
• VS Code
• Cline 3.8.0
• AIモデル
  • Claude 3.7 sonnet 20250219
• Google NotebookLM
  • 主にClineの公式ドキュメントを読むのに使用

　

事前検討

AIエージェントは何を使うかについて

2025/3時点では、いくつものAIエージェントが存在します。そんな中、以下の記事を読みCline系をさわりたくなりました。
CLINEに全部賭けろ

forkしたRoo Codeは気になりましたが、まずは本家からさわろうということで、Clineを使うことにしました。

　

Chrome拡張を作る手段について

昔Chrome拡張を作った頃からは時が流れていることもあり、改めて最近のChrome拡張の作り方を調べたところ、以下の方法がありそうでした。

• Googleのドキュメントにあるように、必要最低限のファイルで作る
  • Hello World 拡張機能  |  Chrome Extensions  |  Chrome for Developers
• Chrome拡張用のフレームワークを使う
  • crxjs/chrome-extension-tools: Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
  • PlasmoHQ/plasmo: 🧩 The Browser Extension Framework
  • wxt-dev/wxt: ⚡ Next-gen Web Extension Framework

　
今回の場合、「シンプルなChrome拡張なのでおそらくフレームワークは使わなくて良さそう」と考え、フレームワークなしでゼロからClineと作ることにしました。

また、シンプルにということで、TypeScriptではなく、JavaScriptでChrome拡張を作ることにしました。その際、Linter & Formatterとして Biome を使うことにしました。 Biomeでは、デフォルトである程度の設定が入っていることから、今回は Biome の設定ファイルは作らないこととしました。

　

開発環境について

Clineによりコマンドを実行することもあることから、念のため、開発環境として Dev Container を使うことにしました。

ちなみに、今までWSL2側で開発してきたため、Windows11側には何もセットアップしてませんでした。そこで今回の開発を機に Windows11向けの Dev Container 環境を構築することにしました。

　

環境構築

Clineとともに開発するための環境をゼロから構築しました。

　

Dev Container 環境の構築

.devcontaner ディレクトリに Dockerfile と devcontainer.json を用意します。

Dockerfileの作成

Linterとして Biome を使うため、Node.js を Dev Container へ準備することにしました。Dev Container のイメージを探したところ、LTSである Node.js v22 も用意されているようでした。
https://mcr.microsoft.com/v2/vscode/devcontainers/javascript-node/tags/list

そこで今回は mcr.microsoft.com/devcontainers/javascript-node:22 をイメージとして使うことにしました。

FROM mcr.microsoft.com/devcontainers/javascript-node:22

　

devcontainer.json の作成

今回はClineに開発をほぼお任せするため、最低限のVS Code拡張として

• Biome
• Cline

をインストールするにとどめました。

あとは、起動時にBiomeを使えるよう、 onCreateCommand に npm install を追加しました。

その他は以下の記事を参考にして、Dev Container の設定としました。

• VSCode Devcontainer 放浪記
• devcontainerの運用ベストプラクティス #Docker - Qiita

{
  "name": "Amazon URL Redirector",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "biomejs.biome",
        "saoudrizwan.claude-dev"
      ]
    }
  },
  "onCreateCommand": "npm install"
}

　
あとは F1 キーから Open in Container を選択し、Dev Container の中に入りました。

　

Anthropic APIキーの取得

AIモデルに Claude 3.7 sonnet 20250219 を使うことから、 Claude 3.7を使えるAPIキーを取得します。

特にこだわりがなかったため、今回はAnthropicのConsoleでアカウントを作り、APIキーを取得することにしました。公式ドキュメントを読み、APIキーの取得方法を確認します。
Welcome to Claude - Anthropic

Initial setupのページにConsoleへのリンクがあったため、そこからアカウントを作成しました。
Initial setup - Anthropic

また、途中でClineが止まっても困るので、追加でCreditを購入しておきました。Creditの有効期限は1年あるようです。

　

Clineの公式ドキュメントをGoogle NotebookLM に読み込ませる

Clineの使い方で悩んだ時に調べやすくするよう、Clineの公式ドキュメントをGoogle NotebookLMに読み込み、チャットで質問しながら読むことにしました。

• https://docs.cline.bot/
• https://notebooklm.google.com/

ソースとして1ページずつ読み込ませる手間はありましたが、Clineの使い方を一通り学ぶことができました。英語のページを日本語で要約してくれるのでありがたいです。

　

Cline関連の設定

Clineとチャットする前に、Cline関係の設定をいくつか行いました。

　

Settingsアイコンによる設定

VSCodeのClineを起動し、Settings アイコンから設定を行います。

項目	値
API Provider	Anthropic
Anthropic API Key	取得したAPIキー
Model	claude-3-7-sonnet-20250219

Custom Instructionsについては、ClineのMemory Bankページにあった Custom Instructions [COPY THIS] の内容をコピーしました。
Cline Memory Bank | Cline

その際、Clineがコンテキストを把握しているか確認しやすくするため、冒頭に以下の文も追加しています。

# Important
- Think English, Speak Japanese Kansai dialect.
- Writing to files in the memory bank directory must be done in English.

　

Auto approveの設定

Auto approveについては、最初 None にしていたものの、

• ファイルを読むだけなら問題ないよね...ということで途中から Read files and directories にチェックを入れた
• しばらく様子を見るうちにファイルの編集も大丈夫そうと分かったところで、 Edit files にもチェックを入れた

と、都度approveするのが手間と感じた時点でOKとしてしまいました。

コマンドの実行などはこわかったので、ひとまず Auto-approveについては上記の許可だけにしています。

　

.clinerulesディレクトリへのファイル追加

Clineの公式ドキュメントを読んだところ、 .clinerules ディレクトリへの設定が可能と分かりました。
https://docs.cline.bot/improving-your-prompting-skills/prompting#clinerules-folder-system

そこで、今回は .clinerules ディレクトリの中に必要なファイルを置くことにしました。

とはいえゼロから考えるのは大変なので、 まずはmizchiさんの ailab にある .cline/rules 内の各ファイルを読みました。公開してくださるのありがたい限りです。
https://github.com/mizchi/ailab

　
次に自分の場合はどうするかを考えました。今回は小さなChrome拡張なのでそこまでの記述はしなくてよさそうと考え、

• 00_basic.md
• 01_coding.md
• 10_directory.md
• 20_talk.md

のファイルへ簡単な内容を書きました。詳細は後述のGitHubのリポジトリを参照してください。

　

memory-bankディレクトリへのファイル追加

.clinerules ディレクトリと memory-bank ディレクトリの違いがあまり良くわからなかったため、NotebookLMに

clinerulesとmemory-bankディレクトリで、設定する内容の違いを教えて下さい 

と聞いたところ、以下のような回答が返ってきました。

.clinerules ファイルは、プロジェクト固有のルールやガイドラインを定義するために使用されます。これは、Cline がプロジェクト内でどのように振る舞うべきかを指示するものであり、チーム全体で一貫した開発プラクティスを維持するのに役立ちます

(略)

memory-bank ディレクトリは、プロジェクトのコンテキスト（文脈）をセッション間で維持するために使用される、構造化された Markdown ファイル群を格納する場所です。Cline はタスクを開始するたびにこれらのファイルを読み込み、プロジェクトに関する知識をリセットすることなく作業を継続できるようにします

　
そのため、以下のファイルを用意しました。

• activeContext.md
  • 最初は空
• productContext.md
• progress.md
  • 最初は空
• projectbrief.md
• systemPatterns.md
• techContext.md

　
特に productContext.md については、他のファイルと比べると気持ち厚めに

• 解決すべき問題
• Chrome拡張の機能
• AmazonのURL形式のパターンについて
• Chrome拡張の動作に関する期待値について

を書きました。詳しくは後述のGitHubを参照してください。

　

.clineignore ファイルの用意

.clineignore ファイルでは、Clineが分析する際に無視するファイルやディレクトリを指定するようでした。
https://docs.cline.bot/improving-your-prompting-skills/prompting#clineignore-file-guide

　
そこで、Chrome拡張の作成に不要そうなものを指定しました。

node_modules/
**/node_modules/
.devcontainer/
package-lock.json
package.json
README.md
.env
__deprecated/

　

Clineとの協業

準備ができたので、まずは Plan モードにした上で、チャットに initialize memory bank を入力し、memory-bank内の内容を確認してもらいました。

すると

実装の流れとしては：

1. まずはAmazonのURLパターンを解析する関数を作る
2. リダイレクト処理を実装する
3. Manifest V3の設定ファイルを作成する

メモリバンクの更新と実装を進めるために、Act modeに切り替えてもらえへんかな？そしたら具体的な実装に入れるわ。

みたいな回答が返ってきました。良さそうだったので、Act modeに切り替えたところClineが実装を進めました。

一通りできたところで確認を求められたので、　

今回の拡張はiconはまだ不要だから、manifest.jsonからiconsキーを削除してくれない？

としたところ、初版が完成しました。

　
そのChrome拡張を動かしてみたところエラーになったため、

拡張機能を実行したところ次のエラーが出ました。対応してくだい。'webRequestBlocking' requires manifest version of 2 or lower.

を指示したところ、Clineが修正を行った後、完了のメッセージが届きました。

　
しかし、またエラーが出たため、

次のエラーメッセージが出ます。おそらくpermissionまわりなので、permissionを見直してください。
Unchecked runtime.lastError: You do not have permission to use blocking webRequest listeners. Be sure to declare the webRequestBlocking permission in your manifest. Note that webRequestBlocking is only allowed for extensions that are installed using ExtensionInstallForcelist.

と指示したところ、Clineが色々修正した後、以下のメッセージが返ってきました。

メモリバンクの初期化と、Amazon URL Redirector Chrome拡張の実装が完了したで！

実装内容はこんな感じや：

1 メモリバンクファイルを更新したわ

• activeContext.md - 現在の作業状況と次のステップを記録
• progress.md - 実装の進捗状況を記録

2 Chrome拡張の必要なファイルを作成したで

• manifest.json - Manifest V3に対応した設定ファイル
• background.js - URL解析とリダイレクト処理を実装

3 Manifest V3の互換性問題を修正したんや

• webRequestBlockingはManifest V3では使えへんから、declarativeNetRequest APIに変更したわ
• webNavigationリスナーを削除して、完全にdeclarativeNetRequestルールだけで動作するようにしたんや
• 要件に記載されてる全てのAmazonのURL形式に対応するルールを追加したで

background.jsでは、こんな機能を実装したで：

• 様々なAmazonのURL形式からASINを抽出する関数
• 正規表現を使ったURL形式の判定
• declarativeNetRequest APIを使った標準形式（）へのリダイレクト処理

これで拡張機能は完成や！Chrome拡張として読み込むことで、様々なAmazonのURL形式を標準形式にリダイレクトできるようになったわ。

　
productContext.md に記載した Chrome拡張の動作に関する期待値について を確認したところ、問題なく動作していました。10分くらいで完成しました。

コストは以下でした。

　
その後、Chromeで色々アクセスしたところ、考慮がもれていたパターンを発見しました。

そこで、 productContext.md を更新しつつ修正を依頼しました。

AmazonのURLを調べたところ、 https://www.amazon.co.jp/dp/B09KZJXDN1?tag=hatena-22&linkCode=osi&th=1&psc=1/ のようなパターンもありました。そこで、 productContext.md の 「Chrome拡張の動作に関する期待値について」に、番号17としてパターンと期待値を追加しました。productContext.mdを参照の上、プログラムを修正する計画を立ててください。

　
すると、色々確認して修正まで完了しました。ただ、修正しても動作しなかったことから、追加で依頼しました。

実際に試してみたところ、 https://www.amazon.co.jp/dp/B09KZJXDN1?tag=hatena-22&linkCode=osi&th=1&psc=1 はリダイレクトされませんでした。なにか原因は分かりますか。

　
すると再びClineが修正を実施し、完了したところで返信が来ました。

(略)

この修正により、以下の両方のパターンに対応できるようになったで：

• (末尾にスラッシュなし)
• (末尾にスラッシュあり)

どちらの場合も にリダイレクトされるはずや。

Biomeでフォーマットもしたし、メモリーバンクのファイルも更新したで。これで問題解決したはずやけど、もし他に問題があったら教えてな！

　
動作確認したところ良さそうでした。また、このときのコストは以下でした。

　

おわりに

「いつかは作りたいけど、時間をかけてまで作るのはちょっと...」と思っていたモノが完成したのは良かったです。

他にも「いつかは作りたいけれど、作ったりメンテナンスする時間を捻出するのはちょっと難しそう」と思っていたモノがいくつかあります。AIエージェントの感触をつかむためにも、今後も継続して作っていこうかなと思ったのでした。

　

参考：Gemini 2.0 Flash モデルの場合

Gemini 2.0 Flash モデルで試してみたところ以下の結果となりました。

• Claude 3.7 とは異なる実装をした
  • chrome.tabs.onUpdated.addListener で実現しようとした
• Gemini自身ではバグを解決できず、自分も調査して解消した
  • ただし、正規表現の不具合は直すのが手間そうだったので、残ったまま

2025/3時点では、Claude 3.7 のほうが良い結果が出るようです。

　

ソースコード

GitHubに上げました。
https://github.com/thinkAmi-sandbox/amazon_url_redirector_with_ai

今回のプルリクはこちら。
https://github.com/thinkAmi-sandbox/amazon_url_redirector_with_ai/pull/1

なお、実際のChrome拡張については以下のとおりです。

• Claude 3.7版
  • src ディレクトリの中
• Gemini 2.0 Flash版
  • __deprecated ディレクトリの中
    • 正常には動かないので注意