はじめに
約1年前、Chromeで開いているタブのタイトルやURLをまとめてコピーできるChrome拡張「TAB INFO CLIP」を作り、その内容をQiitaに書きました。
https://qiita.com/elephantnode/items/c4a8064c217fb762588c
TAB INFO CLIPは、現在開いているタブの情報をMarkdownやCSV、HTMLなど好きな形式でクリップボードへコピーできるChrome拡張です。またよく開くサイトなどを一括でセーブ＆ロードできる機能があります。
1年通して使ってみて、不便だった内容などが溜まったので、久しぶりに機能追加や修正をしようと思い、約1年ぶりにリポジトリを開きました。
「少し直してリリースしよう」
くらいの気持ちだったのですが、思ったより簡単にはいきませんでした。
使っていたBoilerplateがアーカイブされていた
前回の記事では、Ver.2.0.0を作るタイミングで「Chrome Extension Boilerplate」というスターターキットを導入しました。
当時は、
- Vite
- React
- TypeScript
- Tailwind CSS
などがあらかじめセットアップされており、Chrome拡張を作るための環境をすぐに用意できる便利なBoilerplateでした。
そこにshadcn/uiなどを追加して、現在のTAB INFO CLIPのベースを作っています。今回アップデートするにあたり、まず依存パッケージなどを確認していました。
すると、以前使っていたChrome Extension Boilerplateのリポジトリがアーカイブされていました。
1年前には便利に使っていたものでも、メンテナンスが終了している。
Web開発では珍しいことではありませんが、自分で公開しているプロダクトの土台になっているものだと、なかなか考えさせられます。
このまま既存環境を使い続けることもできましたが、
- 今後もChrome拡張をアップデートしたい
- 依存パッケージも更新していきたい
- せっかくなら現在使われている構成へ移行したい
ということで、開発環境自体を見直すことにしました。
そういえばChrome拡張の作り方をちゃんと覚えていない
1年前にChrome拡張を作ったとはいえ、細かい仕組みをかなり忘れていました。
「manifest.jsonには何を書いてたっけ？」
「background.jsってどう動いてたっけ？」
という状態です。
そこで、いきなり新しいフレームワークを探す前に、Chrome公式のExtensionチュートリアルをもう一度やってみました。
https://developer.chrome.com/docs/extensions?hl=ja
以前にもやった内容ではありますが、実際に素のChrome拡張を作ってみると、
- manifest.json
- popup
- content script
- background / service worker
- Chrome Extension API
などの役割を思い出すことができました。
ドキュメントを眺めるだけでも発見がある
チュートリアルの後は、利用できるAPIやManifestのドキュメントもざっと眺めました。
もちろん全部を細かく理解する必要はありませんが、項目を見ているだけでも、
「こんなことまでできるのか」
「これなら別の拡張機能も作れそう」
と、できることのイメージが広がります。
Chrome拡張は、作りたいものからAPIを探すだけでなく、API一覧からアイデアを考えるのも面白いと感じました。
公式サンプルは実際に動かすとさらに分かりやすい
Chrome公式のGitHubには、さまざまな拡張機能のサンプルが公開されています。
https://github.com/GoogleChrome/chrome-extensions-samples/tree/main
コードを読むだけでも参考になりますが、実際にChromeへ読み込んで動かしてみるとさらに分かりやすいです。
「この機能はこういう使い方ができるのか」と体感できるので、新しいアイデアを考える材料にもなります。
AIコーディング向けのSkillもあった
今回面白かったのが、Chrome拡張開発向けのAI Skillも公開されていたことです。
AIにChrome拡張の知識やベストプラクティスを渡した状態で開発できるため、単にコードを書かせるよりもかなり頼りやすくなります。
開発だけでなく、デバッグや公開作業までAIを活用できる流れも整ってきています。
1年前と比べて、開発スタイルそのものがかなり変わったと感じた部分です。
Prompt APIは今回は見送り
Chrome内蔵AIを使えるPrompt APIも気になりました。
TAB INFO CLIPでも何かできそうですが、今回は開発環境の移行が目的でしたので、ここまで手を広げるとリニューアルどころではないと思い、今回は見送ることにしました。
Prompt APIについては、また別の機会に触ってみたいと思います。
移行先にはWXTを選んだ
Chrome拡張の基礎を一通り思い出したところで、改めて移行先を探しました。選んだのがWXTです。
WXTはWeb Extension向けのフレームワークで、Chromeだけでなく複数ブラウザに対応しています。
ReactやVue、Svelteなどのフロントエンドフレームワークも利用でき、TypeScriptにも対応しています。
そのほか、
- MV2 / MV3対応
- ファイルベースのentrypoint
- 開発時のHMR
- 複数ブラウザ対応
- 自動Publish
- TypeScript対応
など、Web Extensionを継続的に開発するための機能がまとめられています。
以前使っていたものは、どちらかというと「Chrome拡張を作り始めるためのBoilerplate」という印象でしたが、WXTは
Web Extensionを開発するためのフレームワーク
という立ち位置です。
今後もTAB INFO CLIPを継続してメンテナンスすることを考えると、今回はWXTへ移行することにしました。
WXTへの移行はAI中心で進めた
WXTを詳しく勉強してから移行したわけではありません。
今回は既存のTAB INFO CLIPのコードを見てもらいながら、バイブコーディング中心で進めました。
AIにChrome拡張開発やWXT向けのSkillを読み込ませ、既存コードを確認してもらいながら、
- WXT向けのプロジェクト構成への移行
- PopupやSide Panel、Chrome API周りの調整
- エラー修正やコードレビュー
といった作業を進めてもらいました。
実装だけでなく、コードレビューや修正もAIが中心です。
自分はコードの細部を追い続けるというより、
- どんな機能を改善したいか
- 実際に使ってみて違和感がないか
- リリースして問題なく動くか
といったプロダクト側の確認や、スクリーンショットの取得などのリリース準備、デプロイに集中していました。
以前ならフレームワークの仕様を調べ、実装し、コードを確認するところまで自分で行っていましたが、今回はその多くをAIに任せています。
その分、自分は「どう作るか」よりも「何を良くするか」に時間を使えるようになりました。
それでも基礎を復習しておいて良かった
今回、チュートリアルで得た知識を使って、AIのコードを細かくレビューしていたわけではありません。
それでも、Chrome拡張がどのような仕組みで動いているのかを思い出し、公式ドキュメントやサンプルから利用できる機能をざっと把握したことで、
「Chrome拡張なら、こういうこともできそう」
という発想はしやすくなりました。
実装の細部はAIに任せても、プラットフォームそのものを知っていることで、AIに何を頼むか、次にどんな機能を作るかを考えやすくなる。
今回の基礎のおさらいは、コードを書くためというより、AIと一緒に開発するための前提知識を取り戻す作業に近かったと思います。
1年前と比べて、開発の仕方も変わった
今回一番印象に残ったのは、WXTそのものよりも、1年前と比べて自分の開発の役割が変わっていたことです。
以前はドキュメントを読み、コードを書き、エラーを調べ、コードレビューまで自分で行うのが中心でした。
今回は、実装やコードレビューのかなりの部分をAIに任せています。
その代わり、自分は機能改善を考え、実際に使って確認し、デプロイするところに集中しました。
AIによって開発が楽になったというだけでなく、
自分でコードを書くことが中心だった開発から、プロダクト全体を見ながらAIに実装を任せる開発へ、少し役割が変わった
という感覚があります。
1年前のTAB INFO CLIPと今回のTAB INFO CLIPでは、開発環境だけでなく、作り方そのものもかなり変わっていました。
最後に
「TAB INFO CLIPを少しアップデートしよう」と思って始めた今回の作業でしたが、結果的にはBoilerplateからWXTへの移行まで行うことになりました。
そして1年前と大きく変わったのは、開発環境だけではありません。実装やコードレビューをAIに任せ、自分は機能改善やリリースに集中するという開発スタイルも、以前とはかなり変わりました。
一方で、公式チュートリアルやAPI、サンプルを改めて眺めたことで、Chrome拡張でできることの面白さも再発見できました。
今回あらためてChrome拡張を触ってみて、まずは公式チュートリアルやAPI、サンプルをざっと見てからWXTを使う流れはかなりおすすめだと感じました。
Chrome拡張そのものの仕組みや、できることのイメージを持った上でWXTを使うと、AIに開発を任せる場合でも進めやすいと思います。
これからChrome拡張を作ってみたい方や、昔作った拡張機能を久しぶりに触る方は、ぜひ一度公式ドキュメントを眺めてからWXTを試してみてください。
TAB INFO CLIPも引き続きアップデートしていく予定なので、よければ使ってみてください。
特に、「毎朝、仕事を始めるときに決まったURLを複数開いている」 という方におすすめです。
