「Chatworkでコピーしたリンクを送ったのに、なぜか相手が開けない。」

そんな経験、ありませんか？

実は原因は、コピーした文字列に紛れ込む「プレビュー」という余計な一言です。

これまでは我慢して使うしかありませんでした。しかし今は、AIに伝えるだけで、こうした小さな不便を解消する拡張機能を自分で作れる時代になっています。

Chrome拡張機能は、「探すもの」から「作るもの」に変わりました

Chrome拡張機能とは、Chromeに新しい機能を追加する小さなプログラムのことです。翻訳・広告ブロック・スクリーンショットなど種類はさまざまですが、これまでは「Chromeウェブストアの中から、誰かが作ったものを探してダウンロードする」のが当たり前でした。

中身は、HTMLやJavaScriptといった複数のシンプルなファイルで構成されています。以前はこの中身を自分で書くにはプログラミングの知識が必要でしたが、生成AIが登場したことで、この「中身」を自分で作るハードルが大きく下がりました。

この記事では、次の4ステップで進めていきます。

1. AIに欲しい機能を伝える
2. 作られたファイルをフォルダへ保存する
3. Chromeに拡張機能として読み込む
4. 実際に使ってAIと一緒に修正する

一発で完成させる必要はありません。使いながら少しずつ育てていくのがコツです。この手順の通りに進めれば、今日中に自分専用のChatwork拡張機能が完成します。

作る前に全体の流れさえ分かれば、あとは難しくありませんよ。

事務員のミオちゃん

Chatworkの「プレビュー」問題を消す拡張機能も、やることはたった4つ

Chromeの拡張機能と聞くと複雑な機能を想像するかもしれませんが、やっていることは意外とシンプルです。

• 消す：邪魔な表示やメニューを非表示にする
• 変える：デザインやボタンの動きを変更する
• 足す：独自のボタンや機能を追加する
• 自動化する：コピーや入力などの作業を自動でおこなう

これから作る「プレビューの文字列を消す」拡張機能も、この中の「消す」に当てはまります。特別な技術ではなく、この4つの組み合わせでできていると知っておくだけで、拡張機能作りのハードルはぐっと下がります。

難しく考えず、この4つのどれかだと思えば大丈夫ですよ。

事務員のミオちゃん

作る前に、保存場所を1つだけ決めておく

拡張機能はプログラムなので、ファイルとしてパソコンに保存する必要があります。ここで最初に決めておきたいのが、保存する場所です。

Chromeは「このフォルダの中身を読み込んでください」という指示を覚えます。そのため、一度読み込ませたフォルダは、後から移動したり名前を変えたりしないでください。読み込めなくなってしまいます。

デスクトップなど分かりやすい場所に、専用のフォルダを1つ作っておきましょう。今後いくつ拡張機能を作っても、このフォルダの中に入れていく運用にすれば迷いません。

フォルダを1つ決めておくだけで、この後がぐっと楽になりますよ。

事務員のミオちゃん

AIに伝えるのは「プレビューをどうしたいか」だけ

保存場所が決まったら、あとはAIに欲しい機能を伝えるだけです。

例えば、次のように伝えるだけで十分です。

ここに含まれているのは、対象・困りごと・実現したいこと・自分のレベルの4点だけです。この一文だけで、必要なファイル一式を手順つきで出してくれます。

プロンプトを丸暗記する必要はありません。この4点を確認しておきましょう。

事務員のミオちゃん

ここで9割がつまずく、ファイル名の1文字

AIが出してくれたコードを保存するだけ、と思うかもしれませんが、実はここが最大の関門です。

拡張機能のプログラムは、決まった名前・決まった形式で保存しないと機能しません。例えば設計図の役割を持つファイルは、「manifest.json」という名前で保存する必要があります。これを1文字でも間違えると、拡張機能全体が読み込まれなくなります。

さらに注意したいのが拡張子です。Windowsでメモ帳から保存すると、「manifest.json.txt」のように、意図しない拡張子が余分についてしまうことがあります。保存時は「ファイルの種類」を「すべてのファイル」に切り替えてください。そのうえで、ファイル名の末尾が「.json」で終わっているかを確認しましょう。

• ファイル名は、AIが指定した通りに一字一句そのまま入力する
• 保存時の「ファイルの種類」は、必ず「すべてのファイル」を選ぶ
• 保存後、拡張子が意図した通りになっているか（.txtが余分についていないか）を確認する

この3点さえ守れば、保存でつまずくことはほとんどなくなります。

保存さえ乗り越えれば、あとはスムーズに進みますね。

事務員のミオちゃん

Chromeへの読み込みは、たった4ステップ

ファイルの保存ができたら、あとはChromeに読み込ませるだけです。

1. アドレスバーにchrome://extensions/と入力する
2. 右上の「デベロッパーモード」をオンにする
3. 「パッケージ化されていない拡張機能を読み込む」を選ぶ
4. 先ほど作成したフォルダを指定する

これだけで、自作の拡張機能が一覧に追加されます。修正した場合は、この画面で更新ボタンを押すのを忘れないでください。

読み込めたら、まずはコピーして確認してみましょう。

事務員のミオちゃん

直すために渡すのは、たった3つ

実際に使ってみると、「思っていたのと違う」という場面が必ず出てきます。ここで諦める必要はありません。

「この部分の文字列だけ消したい」「コピーした後に通知を出したい」など、気になったことをそのままAIに伝えれば直してくれます。エラーが出た場合は、エラー文章・スクリーンショット・現在のコードの3つを渡すのが近道です。

作る→試す→伝える→直す。この繰り返しこそが、拡張機能の完成度を上げる唯一のコツです。一度で完璧を目指す必要はありません。

最初の指示より、この後のやり取りの積み重ねの方が大事ですよ。

事務員のミオちゃん

コードの知識がなくても、AIと一緒に手を動かせば今日から作れる、自分専用のChrome拡張機能。

まずは今日、この手順のとおりに実際に作ってみませんか？