AI で生産性向上するなら、手始めにブラウザ拡張を開発してみたら？
AI 活用の手始めに、ブラウザ拡張開発はちょうどいい
今は AI があるから、開発者じゃなくてもかなり簡単にブラウザ拡張を開発できる。有名な IT 系ポッドキャスト Rebuild FM のエピソード 408 (2025 年 6 月 4 日) でも、非技術者がブラウザ拡張を開発できるようになってきた話が盛り上がっていたね。
Vibe coding ができるようになると、さっき仰ってた extension みたいな物も「あー、これ面倒くさいな」って思ったのが「コードで解決できるかも！」っていう風に、発想の転換が普通の人でもできるようになって、いいよね
Rebuild: 408: Democratize Coding for $200 a Month (yuka)
ブラウザ拡張は、ブラウザの動きを自分好みに調整する手段の一つ。Chrome 用にも Firefox 用にもマーケットプレイスがあるよね。Web ブラウザを使う中で「もう少し、ここがああいう風だったら良いんだけどなあ」と不満を感じる場面が、誰にでもきっとあるはず。AI 活用を、まずはここから始めてみては？
初めてでもカンタン！実際に作ってみよう
論より証拠。説明よりも、実際の例を紹介しよう。かく言う僕も、ブラウザ拡張開発の経験は全く無かったにも関わらず、AI を活用したら 2 つも Firefox 向けのブラウザ拡張を開発できてしまった (これら自体の紹介は本題じゃないので記事末尾に譲ろう)。
コードを書く開発過程はすべて Gemini とのチャットで完結した。自分で書いたコードは 1 行も無い。最初にブラウザ拡張を開発したのは 9 月だったので、ブラウザ経由のチャットでちょっと手間だったけど、2 つ目は 12 月に開発したので Google Antigravity (2025 年 11 月 18 日公開) を大いに活用できた。
いくつかコツがあるけど、動作を変えたい対象サイトの HTML を AI に渡してやると、実装が正確になりやすいと感じた。とはいえ、文章で「どうなってほしいか」をただ説明するだけでもかなり正確に実装してくれるから、HTML が CSS がと、気負いすぎないことのほうが大事かも👍
ストアに掲載すれば、別の環境でも使える
開発した拡張機能は、各ブラウザの拡張機能ストアに掲載しよう。もちろんローカルだけでも使えるけど、別の PC で使えないからちょっと不便だ。ストアに掲載するメリットは、ブラウザのアカウントに連動して自動同期でインストールされるから、環境を選ばず高い生産性を維持できること。あと、不特定多数に使ってもらうことを期待しても楽しいね。
公開手順については主にこのブログが参考になるけど、AI に聞けば手順も教えてくれるかもね。Firefox アドオンの場合、AMO (addons.mozilla.org) に載せると同時に自動検査が走る。そこで出たエラーも、AI にそのまま伝言すれば直してくれる (本当に頼もしいなあ！)。
特に問題がなければ、アップロードして数日で自動承認 (= 公開) される。僕の場合、1 つ目のアップロードは 9 月 27 日で、承認は 9 月 30 日。2 つ目のアップロードは 12 月 31 日で、承認は翌年 1 月 3 日。アップロードが完了すると、AMO からこんなメールが届くよ。
Thanks for submitting your Copy Image Name add-on to addons.mozilla.org (AMO)! Upon approval, your add-on listing will appear on our website here: https://addons.mozilla.org/ja/firefox/addon/copy-image-name/
Please note that your add-on can be subject to human review at any time. Some submissions might be held for up to a few days for human review before they get approved. While your add-on might be screened and automatically approved, reviewers may look into it later and determine that it requires changes or should be removed from the website. If that occurs, you will receive a separate notification with details and next steps.
Mozilla Add-ons <nobody@mozilla.org>
技術者じゃなくても、ブラウザ拡張を開発しよう！
要するに、AI の高度化によって、ブラウザ拡張の開発は今までになくハードルが下がっている。技術者じゃないとしても、自分の生産性を高めるための投資として、ブラウザ拡張開発は悪くない選択肢だと思う。
奇しくも、とてもよく似た趣旨の Note 記事『全人類に告ぐ！Chrome 拡張を作れ！』が 2025 年 12 月 26 日に公開されてた。この記事も割と説得力があるので、読んでみてブラウザ拡張開発への熱量を高めるといいと思う。
[蛇足] 僕が開発した拡張機能の紹介
(1) Copy Image Name は、画像名をコピーするもの。画像を右クリックして [Copy image name] をクリックすれば、拡張子を除いた画像のファイル名がクリップボードに入る。それだけの単純なブラウザ拡張だ。
これは、ブログの執筆を快適にする拡張機能。ときどき古いブログ記事を修正したくなるんだけど、記事に画像がある場合は、修正時に画像を貼り直す手間があるんだよね。画像名をサクッとコピーできると、貼り直すべき画像をライブラリからピンポイントに検索できてとても便利なのだ。
ちなみに画像を貼り直す手間がある理由は、古い記事の HTML の構造が WordPress 式になっていないせい。このブログは 2019 年 7 月以前は Livedoor ブログにホストされてたので、その頃に書かれた記事を編集するには厄介な変換が必要なのよね。
(2) MF Portfolio Ranking は、マネーフォワード Me の資産内訳画面を改善するもの。標準で資産構成は円グラフで表示されるが、これは酷く使いにくい。この拡張は円グラフを横棒グラフに置き換え、さらに各項目のクリックで内訳を展開 (ドリルダウン) して表示する。下図は [預金・現金・暗号資産] を展開した様子。
そもそも円グラフは問題だらけで、[a] 割合の違いを見分けるのが難しく、[b] 色覚多様性に排他的だ。例えば [a] について、円グラフではほぼ同じに見える下図のデータ A、B、C も、棒グラフなら違いがはっきりと読み取れると思う。マネフォを使ってみて最も使いにくいと感じた「資産内訳の円グラフ」の問題を是正するのがこの拡張の目的。
円グラフの深刻な欠陥については、Here’s why you should (almost) never use a pie chart for your data に詳しいから、ぜひ一読を勧める。これを出版したのは、オーストラリアの Queensland University of Technology の統計学教授 Adrian Barnett 氏と、The University of Queensland の特任教授 Victor Oguoma 氏で、円グラフの不用意な濫用に警鐘を鳴らしている。
