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 がと、気負いすぎないことのほうが大事かも👍
AMO (addons.mozilla.org) にブラウザ拡張をアップロードすると、自動検査が実行される。そこで出たエラーも、AI にそのまま伝言して直してもらった。本当に頼もしいなあ。公開手順については主にこのブログを参照したけど、AI に聞けば手順も教えてくれたかもね。
アップロードが完了すると、AMO からこんなメールが届く。特に問題がなければ数日で自動承認されると思う。僕の場合、1 つ目のアップロードは 9 月 27 日で、承認は 9 月 30 日。2 つ目のアップロードは 12 月 31 日で、承認は翌 1 月 X 日。
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 の資産内訳画面に棒グラフを追加するもの。資産構成のポートフォリオを多い順に横棒グラフで表示する。各項目をクリックすると、その内訳をさらに展開 (ドリルダウン) して表示できる。下図は [預金・現金・暗号資産] を展開した様子。
そもそも円グラフは (1) 割合の違いを見分けるのが難しく、(2) 色覚多様性に排他的だ。特に (1) については、下図を見れば一目瞭然。円グラフよりも、棒グラフのほうが遥かに割合を認識しやすいと思う。マネフォが資産構成を円グラフで表現していることは、使い始めてみて最も失望した点だった。
円グラフの深刻な欠陥については、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 氏で、円グラフの不用意な濫用に警鐘を鳴らしている。
