【CRXJS】chrome拡張機能実装

備忘に。

基本は
https://crxjs.dev/vite-plugin/getting-started/vue/create-project
を参考に

npm init vite@latest

今回はVueを選択

npm i @crxjs/vite-plugin@beta -D

公式ではmanifest.jsonを別ファイルに切り分けだが、今回はvite.config.tsに直接

const manifest = defineManifest({
  manifest_version: 3,
  name: "sample project",
  description: "",
  version: "1.0.0",
  action: { "default_popup": "index.html" },
  author: "shuriken"
});

開発中は

npm run dev

+
chrome://extensions/
からパッケージ化されていない拡張機能を読み込むからdist下を読み込み

実装を終えたタイミングで

npm run build