ブックマークの上位互換のChrome拡張を作った

新たにChrome拡張を作成したのでその記事となります。
今回はCursor,Cometを活用して開発を行ったので、うまく使えた方法をナレッジとしてまとめます。

作成したChrome拡張の紹介

quick-link-jump というChrome 拡張を作成しました。
この拡張機能の詳細はぜひストアを見てほしいのですが、仕事で普段使ってるツールのkeyで画面遷移ができる（かもしれない）ようなツールです。

一番想定したシチュエーションが、普段JIRAを使っていてスプレッドシートなんかでチケット番号だけもらって、リンクがない時に画面遷移をするために、適当なチケットを開く→チケットのURLのチケット番号部分を書き換える。という流れを取ってました。
そこで、チケット番号を選択して右クリックし、選択されたテキストをテンプレートに埋め込み画面遷移ができるような拡張機能です。

環境

使用した生成AI / ツール

• Cursor
• Perplexity
• Comet(PerplexityのAIブラウザ)

開発の流れ

1. 作成する拡張機能を整理して仕様として作成する
2. 実際にプログラムを作成する
3. Chrome Web Storeで申請する

大きくはこの流れとなります。この中にも細かいステップを踏んでいったのでナレッジとして残そうと思います。

1.要件定義 (Perplexity)

ほしい拡張機能のアイデアは、仕事中に「チケット番号のテキストだけもらってリンク移動するの面倒だな。」と思ったところが発端です。
最初のアイデアはすでに固まっていました。
ただ、Chrome拡張でどこまでのことができるのか？という広い知識がないためそこでPerplexityの出番です。

前の記事でも書いたのですが、Perplexityはウェブの情報を調べてくれるので
ハルシネーションリスクは一般的な生成AIより低いと思っております。

具体的な対話の進め方として以下のステップを踏んで情報をまとめていきました。

1. やりたいことの言語化を行う
2. 実現するための技術調査を依頼する
3. 技術的情報も込みで仕様書を出力する

この流れで実現性の高い仕様書が出力されました。

今回作成したCursor向け指示書はこちら

2.実装 (Cursor)

仕様書が完成したら次はCursorで実装を進めていきます。

まずは仕様書をリポジトリに配置し、そのリポジトリを元に実装を進めます。
ただしここでも仕様書を元に実装をすぐに依頼するのではなく、仕様書を読んだ上で実装のステップを表示させるようにしています。

（当時のやりとりログは消してしまったので思い出しながらの例ですが）

@指示書.md
指示書を確認し、実装を進めるためのステップを表示してください。  
チェックポイントを設けやすい形でステップを提示してほしいです。

という形でプロンプトを送り、ステップを表示してもらいました。
そのステップを手元のメモに残しステップ毎にプログラムの作成依頼を投げていきました。

ステップ毎に指示を出すことで、一気に全ての変更を出力しないので、作業毎に自分で判断をしやすいです。
また、全体の作業予定はわかっているためステップが問題ないかを判断しやすいというのも信頼性の高い開発が進められた形となります。

また、今回の開発で意識できたこととしてある程度実装が進んだタイミングでリファクタリングをかけていくことですね。
普段人力でやる時は実装途中でリファクタが気になって雑念的な感じで出てくるんですが、AIで実装をしていると、リファクタのフェーズと実装のフェーズを繰り返しながらの実装が大変楽にできるから、品質も上がっていっている感じがします。

「計画→実装→見直し→リファクタ」このループを細かく進めていけることこそAI実装の強みなのかなと最近は考えています。

3.公開申請 (Comet)

Chrome拡張を公開するために、Chrome web storeで拡張機能の申請を行う必要があります。
その時にとても便利だったのがCometです。

Cometは、現在誰でも使えるわけではなく2025/07/27現在だとアーリーアクセスでの提供を行っており、招待制で利用が可能なブラウザです。
ChatGPTも同じようなAIブラウザを配信し始めたようですね。

そんなAIブラウザのCometはページの要約だったり、タブ自体を @ で指定することで複数のタブで情報を比較したりなどが行えます。
そしてそのほかにできることが、フォームの入力などブラウザの操作も可能です。

例えばGoogle Formでフォームを作る指示を出したのですが、以下のような動きをします。

1. Google Form を開いて右側のエージェント欄に指示を入力

2. 実際に指示通りに実行してくれた後のキャプチャ（ここまで6分）

このような処理をプロンプトひとつで進めてくれるような機能が搭載されています。
これをどう役に立てたのか？というと、Chrome web storeではChrome拡張の登録をする時に「権限が必要な理由」や「単一用途」（どういった目的の拡張機能なのか）を記載する必要があります。
毎回これをある程度の定型分に沿って書くのは手間なので、以下手順で対応しました。

1. Cursorで、作成した拡張機能の概要を作成
2. Cometで申請ページへ移動
3. 概要を貼り付けてプライバシー部分を埋めてもらう

上記手順でプライバシー欄はすぐに埋めることができました。

若干味のないやり方ではありますが、個人制作なのでこの辺りはサッと済ませたいですからね。

あとは、アイコンを作ったりキャプチャを用意したりなどを行い公開申請を行いました。

最後に

最近は生成AIによって個人で書いたコードが最後まで進むことが増えた気がします。
CometやCursorなど何かに特化したソフトウェアが存在し、対話型AIが主流だった２年前とは全く違う景色になってきましたね。
これからさらにAIが低レイヤーに入っていって、近い未来macOS自体で生成AIが動いてくれるでしょうね。

一方で、生成AIが低レイヤーを扱うにあたって「プライバシーとは？」なんていう原初の疑問に立ち返っていく必要も出てきますね。

生産性と安全性、しっかりとバランスを取って開発を進めていきたいと思う今日この頃でした。

お読みいただきありがとうございました。