🎈

Geminiと一緒にChrome拡張機能を作った。便利🎈

に公開

はじめに:私が愛用していたAsana拡張機能と、ある日の「小さな絶望」

突然ですが、皆さんはブラウザで開いているページの「タイトル」と「URL」をセットでコピーしたい時、どうしていますか?

私は参考にしたページの情報を誰かにチャットで共有したり、資料の末尾に参考文献として記載したりする機会が非常に多くあります。そんなとき、長年愛用していたのがAsanaのChrome拡張機能でした。

この拡張機能、本来はタスク管理ツールAsanaにページ情報をタスクとして登録するためのものですが、秀逸なのが「タスク作成」ボタンを押すと、ポップアップにページのタイトルとURLが自動で入力された状態で表示される点です。

ちょっとした情報共有の際に、この「タイトルとURLのセット」を拝借するのに、本当に重宝していました。

しかし、ある日のアップデートで、私のささやかな幸せは終わりを告げます。

抱えた2つのストレス

アップデートされたAsana拡張機能は、さらに便利になっていました。なんと、タイトル部分がページへのハイパーリンクになったのです。これにより、Asana上のタスクから直接ページに飛べるようになり、ワークマネジメントツールとしては間違いなく「アップデート」でした。

…ただ、私にとっては違いました。

  1. URLが単体でコピーできなくなった
    タイトルとURLが一体化したことで、私が求めていた「URLのテキスト」をサクッとコピーすることができなくなってしまったのです。

  2. 起動がもっさりしてきた
    多機能になったこともあるのか、拡張機能のアイコンをクリックしてからウインドウが表示されるまでに少しラグを感じるようになりました。ページタイトルだけ欲しい時は、拡張機能の起動を待つよりアドレスバーからURLをコピーした方が早い、という本末転倒な状態に。

Asana拡張機能の画面
タイトルがURLへのリンクになり、URLテキストのコピーが一手間かかるように。

この小さな、しかし頻繁に発生するストレスから解放されたい。
そう思った時、ふと頭に「これ、Geminiと一緒に作れるんじゃあないか?」と思い浮かびました。

Geminiに相談!Chrome拡張機能開発スタート

思い立ったら即行動です。
普段はGoogle Workspaceの導入支援などを行うエンジニアをしていますが、プログラミングの経験はほぼありません。 そんな私が、早速GoogleのGeminiアプリに相談してみることにしました。

Chrome拡張機能を作りたいです。
ボタンを押すと今開いているページのタイトルとURLを取得して、クリップボードに保存するだけのシンプルなものです。

こんなざっくりとしたお願いからスタート。すると、Geminiは必要なファイル構成から、それぞれのファイルに書くべきコードまで、驚くほど丁寧に教えてくれました。

  • manifest.json(拡張機能の設計図)
  • popup.html(ポップアップの見た目)
  • popup.js(ポップアップの動作)

提示されたコードをローカルのファイルにコピペして、Chromeで読み込んでみると…本当に動いた!

完成した拡張機能のポップアップ画面
本当に必要な機能だけの拡張機能がすぐに完成!

Asana拡張機能のようなリッチさはありませんが、その分クリックした瞬間に表示される軽快さは、まさに私が求めていたものでした。

ここから、さらにGeminiと対話を重ねて表示の内容を少しだけカスタマイズして完成しました。
チャットで会話するように機能が追加されていくのは、本当に楽しい体験でした。

次のステップ:面倒くさがりが故の「ストア公開」

こうして完成した自作拡張機能は、私の業務に欠かせないツールになりました。
しかし、新たな面倒が発生します。この拡張機能は私のメインのPCにしか入っていません。
別のPCで作業する時にはまた設定しないといけないし、少し手間です。

「ローカルにファイルを置いておくの、面倒だな…」

その面倒くさいという気持ちが、次のステップへ私を後押ししました。
「そうだ、Chromeウェブストアに公開しよう!」

もちろん、公開方法もGeminiに聞いたところ驚くほど的確な答えが。
開発者登録の方法から、manifest.jsonに追記すべき項目、必要なアイコンのサイズ、ストア申請時に入力する説明文の項目まで、一つ一つ丁寧に教えてくれました。

まるで専属のテクニカルサポートがいるような感覚で、無事に私作った拡張機能がChromeウェブストアに公開されたのです。

完成した拡張機能と、まとめ

こうして公開したのが、こちらの拡張機能です。

Chromeウェブストアに公開された拡張機能

https://chromewebstore.google.com/detail/ページ情報コピー拡張機能/ijkmebpfmiaaaogildmejopndkljlhpc

やったことは、「Geminiにやりたいことを伝えて、返ってきた答えを実行しただけ」です。

もちろん、複雑な処理が関わるものを作るには、専門的な知識や慎重な検証が必要です。

しかし、今回の経験を通して痛感したのは、専門家でなくても 「解決したい課題」と「こうなりたいという熱意」さえあれば、誰でも"作り手"になれる時代が来た、ということです。

もし、あなたの日常にも「ちょっと不便だな」と感じる瞬間があるなら、ぜひその気持ちをAIにぶつけてみてください。「これ、作れないかな?」と。

案外、世界で一番あなたを幸せにするツールは、あなた自身の手で生み出せるのかもしれません🎈🎈🎈

電算システム 有志

Discussion