以前、Cline + Claude 3.7 sonnet やローカルLLMとともに Chrome 拡張を作ったことがありました。

　
Cline + Claude 3.7 sonnet はChrome拡張を作成できた一方で、ローカルLLM + JetBrains AI Assistant では作成できませんでした。

現時点ではAIモデルを選べない JetBrains Junie の場合は Chrome 拡張を作ることができるのか気になったことから、試してみたときのメモを残します。

環境

mac
WebStorm 2025.1
JetBrains Junie 251.72.165

　
また、今回はChrome拡張の仕様を .junie/guidelines.md ファイルとして用意しました。

Junie が guidelines.md ファイルをどのように扱うかについては、JetBrainsの記事を参照してください。
IntelliJ IDEA Junie Playbook - JetBrains Guide

AmazonのURLをシンプル化するChrome拡張

はじめに、AmazonのURLをシンプル化するChrome拡張から作ります。

　
ローカルLLMを使ったときと同じ guidelines.md ファイルを元に、Junieへ作業依頼をしました。

まずは設計を行うため、以下のプロンプトを Ask モードで入力しました。

guidelines.md を読んで、どんなChrome拡張機能を作ればいいか、設計してください

　
Junieの回答です。良さそうでした。
https://github.com/thinkAmi-sandbox/amazon_url_redirector_with_junie/blob/main/.records/step_1.md

　
設計は良さそうだったため、 Code モードに切り替えて、実装を依頼しました。

設計は良さそうですので、設計に従ってchrome拡張機能に必要なファイルを作成してください。

　
しばらく待つと、Junieがいくつかのファイルを作成しました。コミットはこちら。
https://github.com/thinkAmi-sandbox/amazon_url_redirector_with_junie/commit/3013e3782d27a898fe164e5819a980e620880884　

Chrome拡張として設定したところ、仕様通り動作しました。一回で正常に動作するものができたので、 guidelines.md の記載は適切だったようです。

　
しかし、使ってみるとやや使い勝手が悪いところがありました。そこで、Junieを Ask モードにして設計変更を依頼しました。

redirectで動作しています。ただ、読み込みが終わったあとにredirectするため、画面にちらつきが発生します。他の方法でAmazonのURLを適切なフォーマットにする方法はありますか？

　
Junieは declarativeNetRequest APIを使う、別の設計を提案してきました。
https://github.com/thinkAmi-sandbox/amazon_url_redirector_with_junie/blob/main/.records/step_4.md

　
Claude 3.7 sonnet のときと同じ設計になったため、そのまま実装を進めてもらいました。

その設計に従い、ファイルを修正してください

　
しかし、修正したものをChrome拡張として設定したところエラーになったことから、 Ask モードに切り替えて、原因を考えてもらいました。

chrome拡張機能として設定したところ、以下のエラーが発生して読み込めませんでした。何が原因なのか教えて下さい。


rules.json: Rules file must contain a list.

　
Junieは原因が分かったようでした。
https://github.com/thinkAmi-sandbox/amazon_url_redirector_with_junie/blob/main/.records/step_6.md

　
そこで、再度 Code モードに切り替えて、修正を依頼しました。

では修正を行ってください

　
再度、修正後のChrome拡張を設定したところ、問題なく動作しました。
https://github.com/thinkAmi-sandbox/amazon_url_redirector_with_junie/commit/726e37ac18d99d702a4cf81b56b5e0d83ff71288

開いているWebページのURLをmarkdown形式でコピーするChrome拡張

はじめに、Clineで作ったときの memory-bank/productContext.md を元に guidelines.md を作るところから始めました。
https://github.com/thinkAmi-sandbox/url_copy_chrome_extension_with_ai/blob/main/memory-bank/productContext.md

これをベースに、ChatGPTに「以下の文章を英語にしてください。省略せず、すべてを英語にしてください。」というプロンプトで依頼した結果を guidelines.md へ貼り付けました。
https://github.com/thinkAmi-sandbox/url_copy_chrome_extension_with_junie/blob/main/.junie/guidelines.md

　
準備ができたので、Junieを Ask モードに設定して依頼しました。

guidelines.md を読んで、どんなChrome拡張機能を作ればいいか、設計してください

　
Junieの回答です。だいたい良さそうでした。
https://github.com/thinkAmi-sandbox/url_copy_chrome_extension_with_junie/blob/main/.records/step_1.md

　
ただ、アイコンが必要そうな作りだったため、アイコンなしバージョンでの作成を依頼しました。

アイコンを使わないChrome拡張にできますか？

　
Junieの回答です。アイコンを使わないようになっていました。
https://github.com/thinkAmi-sandbox/url_copy_chrome_extension_with_junie/blob/main/.records/step_2.md

　
設計は良さそうだったため、 Code モードに切り替えて依頼しました。

設計に従って必要なファイルを作成してください

　
しかし、作成してきたものが「ツールバーの拡張機能アイコンをクリックすることで、URLをmarkdown化してコピーする」という内容だったため、修正を依頼しました。

拡張機能のCopy Markdown URLボタンをクリックするとコピーするのではなく、ショートカット Cmd + I を押したらコピーするように修正してください

　
ショートカットのみでの実装にしたものの、そのショートカットはうまく動きませんでした。そこで、

# 1回目
インストールして動作確認しましたが、 Cmd + I をクリックしても動作しませんでした。何か原因は考えられますか

# 2回目
Ctrl + I をクリックしても、画面には何もメッセージが表示されず、クリップボードへのコピーも実行されていませんでした。

と依頼したものの、デバッグ用コードを書いただけで終わってしまいました。これ以上の往復は厳しそうなので、自分の方で原因を調査することにしました。

　
ショートカットが効かないことから、 chrome://extensions/shortcuts でChromeのショートカット一覧を確認したところ、

拡張機能を有効にする にショートカット Cmd + I が割り当てられている
Copy current page URL in markdown format には何もショートカットが割り当てられていない

という状態でした。

Ask モードに切り替え、その内容をJunieへと伝えました。

ショートカットを確認したところ、「Copy current page URL in markdown format」には何もショートカットが割り当てられておらず、拡張機能を有効にするのところに「Cmd + I」が割り当てられていました。原因として考えられることを教えて下さい

　
Junieの回答です。ここまでのJunieの実装で、ショートカットがコンフリクトしてしまっていたようでした。
https://github.com/thinkAmi-sandbox/url_copy_chrome_extension_with_junie/blob/main/.records/step_7.md

　
Junieからおすすめの対応を提案されたため、Code モードへ切り替えてその案での対応を依頼しました。ただ、他にも修正が必要そうなところがあったため、追加の依頼も行いました。

# 1回目
では Option 1 で修正してください

# 2回目
ほかにも _execute_action が残っているところがないかを調べ、残っていたら削除してください

　
修正後のChrome拡張を設定して動作確認したところ、仕様通りの挙動となっていました。ただ、ソースコードには不要なコードが残っていたため、複数回に分けて追加の依頼をしました。

# 1回目
ショートカットが動作しました。デバッグ用の console.log をすべて削除してください。

# 2回目
このChrome拡張はショートカットでだけ動作すればいいので、ツールバーへ表示する機能を削除してください

　
最後に、メッセージの改善を依頼しました。

Clipboardへコピーしたときに表示されるメッセージに、コピーした内容も表示してください

　
以上で修正が完了しました。

感想

AmazonのURLをシンプル化するChrome拡張については、途中に設計変更もあったものの、Junieは特に問題なく実装していました。

Cline + Claude 3.7 sonnet の実装と比べると、 declarativeNetRequest のルールを rules.json のように切り出すなど、個人的にはJunieのほうがわかりやすい実装になっていると感じました。

　
一方、開いているWebページのURLをmarkdown形式でコピーするChrome拡張については、往復回数が計10回となり、ちょっと時間がかかった印象です。

ただ、これは仕様をきちんと伝えられていない guidelines.md だったのが原因かもしれません。「アイコンを使わず、ツールバーにも表示しない」という仕様を明示できていれば、ショートカットがコンフリクトすることはなかったかもしれないと感じたためです。

Cline + Claude 3.7 sonnet の実装と比べると、 background.js のインデントが適切になった上でシンプルになっているようでした。また、manifest.json の permission に差異が出ていました。もし外部公開して利用してもらう場合は、どちらが正しいのかはちょっと調べたほうがいいかもしれません。

　
他に気づいたこととして、Junieの Ask モードで開いたときのエディタデータは、プロジェクト間で共有するようです。また、履歴を追いかけて View in editor tab をクリックしたときには _1 のような suffix 付きで別ファイルとして作成されるようです。今回の作業でも、Scratchesに表示されるデータがこんな感じで増えました。