Chrome拡張の開発フレームワークをCRXJSからWXTに乗り換えた話Zennとっくり💯Chrome拡張の開発フレームワークをCRXJSからWXTに乗り換えた話2024/10/24に公開Chrome拡張wxtcrxjstechはじめにChrome拡張の開発を便利にするフレームワークをCRXJSからWXTに乗り換えたのですが、Chrome拡張を初めて開発する人にも読めそうな内容になりました。お役に立てば幸いです。Chrome拡張の原始的なつくりかたChrome拡張は、下記の手順だけで作れます。全部をzipで固めるChrome開発者サイトにアップロードして、説明文を書いて、審査が通れば公開https://developer.chrome.com/docs/extensions/reference/manifest?hl=jahttps://developer.chrome.com/docs/extensions?hl=jaとても簡単なので、特にフレームワークとか使わなくてもできます。CRXJSで開発、それなりに便利だったブラウザ拡張を作るのに便利なフレームワークは有名なのが3つほどあって、どれも以下のようなお世話をしてくれます。TypeScriptのトランスパイルコードを書き換えるたびにChromeの「拡張機能の管理」で「再読み込み」しなくても瞬時に反映されるmanifestをTypeScriptファイルに書くのでコード補完が効く僕は、「小説家になろう」と「カクヨム」の本文を縦書きにして、UIをちょっといじったりキーボードショートカットを使えるようにする、ちょっとした拡張を公開しています。便利に使っていました。https://crxjs.dev/vite-plugin脆弱性アラート...ある日Githubさんが「CRXJSの依存ライブラリに脆弱性があるぞ」と言ってきました。CRXJSは2年近く開発が止まっており、対応を待ってもダメそうでした。frequency公開している拡張に影響するような脆弱性じゃないので放っておいてもよかったのですが、メールが何度も来るので、面倒ですが他に乗り換えることにしました。気軽にWXTに乗り換えCRXJSの代替は主に2つです。https://docs.plasmo.com/frameworkhttps://wxt.dev/Plasmoのほうが先発で最近人気があるっぽいです。PlasmoとWXTのダウンロード数比較。Plasmoが5月に爆伸びしてるの何があったんだろう。小さい拡張だし、とにかく手間をかけたくないので、ドキュメントがなんとなく簡単そうに見えたWXTを試してみることにしました。公式ドキュメントの頭から追っていってある程度作ってから、元のコードをコピーして持ってくる方針です。最小コードで動くところまで。initあとは指示に従うと初期状態ができあがります。2つ作ることになります。Entrypoints)エントリポイントの名前はファイル名、ディレクトリ名でコントロールするようになっています。僕は複数ファイルをまとめやすいようにディレクトリを作りました。defineContentScript()index.tsに、どこのサイトでどのタイミングで読み込むか定義します。これが後でmanifest.jsonに合成されるんですね。この定義をスクリプト本体のすぐ隣に書けるのはイイですね。アイコンアイコンがないとChromeストアにアップロードしたときに怒られるので、用意します。乗り換えの場合はもともと使ってたアイコンのファイル名を変えて所定のディレクトリに置くだけです。128.pngmanifest.jsonの"icons"要素を一切自分で書く必要がないの、イケてますね。Chromeが起動しました。他の拡張がインストールされてない状態は大事ですね。toolを表示させて「小説家になろう」にアクセスしたら、ログがでました。拡張名とかバージョンとかmanifest.jsonに書くべきその他の内容は、wxt.config.tsに書きます。TypeScriptで型が定義されてるのでエディタで補完が効いて書きやすいです。Configuration/manifest)コメントとか書けるのもいいですよね。"「小説家になろう」と「カクヨム」を縦書きで読みやすくします。ほとんど困らなかったのですが、ひとつだけハマりました。index.tsファイル内のmain()以外の場所に書いた関数をmain()から呼んだらブラウザ上で「そんな関数はない」エラーになりました。}})別ファイルにしてimportしたら解決しました。}})乗り換えて良かったことCSS!SCSS!僕の拡張では、小説を縦書きにするためにスクリプトと一緒にcssも読み込みます。"./index.css"と書くだけです。Scripts/CSS)しかも。"./index.scss"と書けば、scssがすんなり使えました。CRXJSではscssが使えなかったので、めっちゃ嬉しいです!ビルドするとcssファイルができてて、manifest.jsonもちゃんとこうなってました。}]ZIP!CRXJSはディレクトリへのファイル配置まではしてくれましたが、zipに固める機能はありませんでした。*"とか書いてたのですが、最近Windowsを使うことが多くて、zipコマンドが無くてエラーになるのが面倒でした。WSLでもいいんですが、やっぱりネイティブのほうがなにかと便利なんですよね。WXTに乗り換えたら、npmスクリプトがすでに用意されてました。firefox",ああ自分で工夫しなくても勝手にzipファイルができてくれる。Firefox用のコマンドもある。(使ってないけど)これで、Windowsネイティブでも快適に開発できるようになりました。(そしてautoCrlfの罠にハマってアワアワする)開発用ブラウザ開発中の拡張だけがインストールされたChromeが立ち上がる機能は、一瞬「普段自分が使ってるChromeでやらせてくれよ」と思いましたが、やっぱ便利です。僕の拡張はページのHTMLやCSSに手を加える系なのですが、広告ブロッカーが入った普段使いのChromeで試したときには気づかなかった不具合に気づくことができました。さいごにWXTを使ったChrome拡張の作り方を紹介しました。WXTはシンプルで、やってほしいことはやってくれるけど、余計なことはしない、変なブラックボックスがないという印象です。乗り換えられて良かったです。あと、manifest.jsonは拡張機能のすべてを規定するファイルです。フレームワークを利用する場合でも理解しておくほうが困りごとが減るのでおすすめです。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。