ブラウザ拡張機能のフレームワークやライブラリを探す

※まとめるのめんどくさくなったので、とりあえず新しい、かっこいいという理由でwxtを使ってます...

目的

ブラウザ拡張機能をもっと楽に開発したい
フレームワークをリストアップして比較する

※Chromeをベースに作る。

今の課題

Manifest.json書きにくい問題

Chromeのmanifest.jsonについてのサイト
https://developer.chrome.com/docs/extensions/reference/manifest?hl=ja
MDN版

拡張機能の型定義が欲しい

@types/chrome
https://developer.chrome.com/docs/extensions/reference?hl=ja
chromeはこれでできそう

列挙してみる

• TypeScript
  • 型は必須！
• React でも vanillaでも
• Manifest.jsonの型定義?
  • そういうのあったらいいな
• 拡張機能のAPIの型定義

参考文献

https://zenn.dev/cybozu_frontend/articles/introduction-browser-extensions-tools
https://zenn.dev/hamakou108/articles/6fec7a13d0f857
https://zenn.dev/tockri/articles/crxjs-to-wxt

Vite Plugin Web Extension

https://vite-plugin-web-extension.aklinker1.io/

なんか雰囲気良い
Manifest.jsonは型付けしてくれない？

CRXJS

https://crxjs.dev/vite-plugin
Manifest.jsonは型付けしてくれる

plasmo

wxt

https://wxt.dev/
manifest.jsonは型付けしてくれる
wxt.config.tsにmanifest.jsonの内容を記入するみたい
これが一番新しいフレームワークなのかな?