AIでChrome拡張機能を作る（コーディング不要）

「ブラウザがこうだったらいいのに」と思ったことは、ほとんどの人にあるはずです。サイトの邪魔な部分を隠したい。今見ているページをきれいなテキストとしてコピーするボタンが欲しい。気を散らすサイトに費やした時間を計りたい。1日に10回も入力しているフォームを自動入力したい。こうしたことこそまさにChrome拡張機能の出番であり、それを作るのにもうJavaScriptを学ぶ必要はありません。

AIコーディングエージェントを使えば、欲しい拡張機能を説明するだけで、本物のインストール可能なコードを作ってくれます。仕組みを見ていきましょう。

Chrome拡張機能とは何か（そしてAIが得意な理由）

Chrome拡張機能とは、ブラウザが読み込む小さなコードファイル群にすぎません。それだけです。小さく、自己完結していて、よく知られた構造に従っているため、AIに端から端まで作らせるのに最も簡単な部類のものの一つです — 動かすサーバーもなければ、用意するホスティングもありません。フォルダを作り、Chromeに読み込ませれば、それで動きます。

この「小さくて自己完結している」という形こそ、まさにバイブコーディングが輝く場所です。一つの明確な仕事を説明すれば、すぐに動くものが手に入ります。

最初に作るのにちょうどいい拡張機能

コツは、小さくて具体的なものを選ぶことです。うまくいきやすい例をいくつか挙げます。

• 読みやすくするボタン — 記事から広告や余計な要素を取り除く。
• ページをテキストにコピーするツール — ワンクリックでページをきれいなプレーンテキストとしてコピー。
• サイトブロッカー／タイマー — X分経ったらそのサイトから離れるよう促す。
• クイックメモのポップアップ — 今見ているページに紐づいたメモをさっと書く。
• フォーム自動入力ツール — 何度も繰り返し入力しているフォームを自動化する。

どれも「一つのことをうまくやる」ツールで、最初に作るのにぴったりです。

コーディングなしで作る手順

1. コーディングエージェントを用意する。 スニペットを見せるだけのチャットボットではなく、自分のパソコン上で本物のコードを書いて実行できるツールが必要です。meshcodeはMacとWindows向けのネイティブなエージェントです。
2. 拡張機能を明確に説明する。 明確であればあるほど良い結果になります。「拡張機能を作って」ではなく、こう言いましょう。「ツールバーにボタンを追加するChrome拡張機能。クリックすると、今見ているページの本文（広告やメニューを除く）をクリップボードにコピーして、『コピーしました』という小さなメッセージを表示する」
3. ファイルを作らせる。 エージェントが拡張機能のフォルダ — マニフェストとコード — を自分のパソコン上に作成します。
4. Chromeに読み込む。 chrome://extensions を開き、デベロッパーモードをオンにして、「パッケージ化されていない拡張機能を読み込む」をクリックし、そのフォルダを選ぶだけ。これでブラウザ上で動き始めます。
5. 説明して仕上げる。 「ボタンを青くして」「画像も取り除いて」と言うだけで、コードが編集されます。

構文を覚える必要はありません。説明して、確認して、仕上げるだけです。

正直に言っておくこと

• 具体的に伝える。 「拡張機能を作って」だけではぼんやりした結果になります。正確な動作を一文で明確に説明すれば、実用的なものができます。うまく説明することこそが、本当に必要なスキルです。
• 実際のページでテストする。 ボタンを押してみて、いくつかのサイトで試して、意図した通りに動くか確認しましょう。
• Chromeウェブストアへの公開は別のステップです（一度きりの開発者登録料と審査が必要）。個人利用なら「パッケージ化されていない拡張機能を読み込む」だけで十分 — ストアも登録料も不要です。

この用途にmeshcodeが向いている理由

meshcodeは自分のパソコン上であなたが所有する本物のコードを作ります — つまりその拡張機能は、保管したり、微調整したり、後で開発者に渡したりできる普通のフォルダになります。プラットフォームのロックインもなし。世界最低水準のコーディングトークンコストを持つモデルスタック上で動き、しかも従量課金です。2〜3ドルチャージすれば、小さな拡張機能を作るのに数セントしかかかりません。

一番なくしたいブラウザの不満を一つ選んで、直したい内容を一文で説明すれば、今日の午後には出来上がります。

👉 meshcodeをダウンロード — Mac、Windows。コーヒー1杯ほどの値段から始められます。