codexを入れてChromeの拡張機能でGoogle検索画面でhjklでのキーボード操作が出来るようにした

普段、Googleで検索した後に、検索結果をキーボードでサクサク移動できたら便利だな…と感じることはありませんか？

今回は、ChatGPT Plusの機能「Codex」を使って、Google検索結果をVimライクなhjklキーで上下に移動できるChrome 拡張機能を自作してみました。

私はプロの開発者ではありませんが、データ加工でSQLを書く程度の知識はあります。そんな私でも驚くほど簡単かつ短時間で作成できたので、その手順を詳しくご紹介します！

今回使用する「Codex」は、ChatGPTのサイドメニューからアクセスできる機能です。（※ChatGPT Plusユーザー向け）

自然言語（日本語）で「こんなツールが欲しい」と指示するだけで、ソースコードを生成し、GitHub リポジトリにコミットまでしてくれるという優れものです。

拡張機能の作成手順

Codexの画面からGitHubへの接続を許可します。

今回は、Codex専用の新しいリポジトリを作成し、そのリポジトリのみにアクセス権限を与えました。

ここで一つ注意点が。リポジトリを新規作成した直後の空の状態で連携しようとすると、エラーが発生しました。 README.mdファイルなどを追加して、リポジトリが空でない状態にしてから再度試したところ、無事に連携が完了しました。

Chromeの拡張機能を作成したい。google検索画面で、hjklで検索結果の選択移動が出来る様にしたい

入力後、「作成」ボタンを押して生成を開始します。

生成プロセスと待機生成が始まると、画面右側の「タスク」に進行状況が表示されます。最初、どこで進んでいるのか分からず少し戸惑いましたが、ここで確認できるようです。（気づかずに2回実行してしまいました…）

生成には少し時間がかかります。今回は約10分ほどで完了しました。

GitHubでPull Requestをマージ生成が完了すると、なんとCodexが自動でPull Request（PR）まで作成してくれます。これは本当に驚きました。

GitHubに移動し、作成されたPRを確認してマージします。

ローカルに導入してChromeにインストール PRをマージしたら、ローカル環境にリポジトリをgit cloneします。その後、Chromeで以下の手順で拡張機能をインストールします。

Chromeブラウザで chrome://extensions/ を開きます。

右上の「デベロッパーモード」をオンにします。

「パッケージ化されていない拡張機能を読み込む」をクリックし、先ほどcloneしたリポジトリのフォルダを選択します。

動作確認早速Google検索画面を開いて試してみると… 動きました！ jで下へ、kで上へと、検索結果が青い枠で示されながら移動します。移動先でEnterキーを押せば、そのページに遷移できました。これは本当に便利です！

今回は、ChatGPTのCodexを使って、Google検索をキーボードで操作するChrome 拡張機能を自作してみました。

専門的なプログラミング知識がなくても、やりたいことを日本語で伝えるだけで、実用的なツールが10分程度で完成してしまいました。 PRまで自動で作ってくれるのには本当に感動しました。

「こんなちょっとしたツールがあったら便利なのに」と感じている方は、ぜひ一度Codexを試してみてはいかがでしょうか。思った以上に簡単に、あなたの「欲しい」が形になるかもしれません。