【wxt + Vue3】Chromeの拡張機能を作ろう

この記事は Chrome の拡張機能の概要を知っている人向けです

すごく良い記事があったので拝借

その中でも wxt が nuxt ライクで使いやすいとのことで即決

インストールと起動

$ npx wxt@latest init <project-name>

wxt@0.19.11
Ok to proceed? (y) y

ℹ Initalizing new project                                             18:16:12
✔ Choose a template › vue
✔ Package Manager › npm

$ cd <project-name>
$ npm install

$ npm run dev
=> なんか開く

npm run dev を実行すると、自動的にブラウザが開く
何もせずに、この拡張機能がインストールされた状態の Chronium ブラウザが使える！！

Chrome へ登録

とは言っても、通常使用の Chrome で動作確認を取りたいと思う
そしたら .output/dist を Chrome の拡張に追加する

chrome://extensions/

「デベロッパーモード」をONに、「パッケージ化されていない拡張機能を読み込む」

こちらに .output/chrome-mv3 のフォルダを設定する

mac の場合、
Command + Shift + . で .output を表示することができる

すると登録される　とても簡単

このライブラリ、なんと HMR に対応してるので、リロードとかせずに更新される

もし調子が悪かったら、以下の「くるくる矢印」か「更新」を押すと良い
権限など manifest.json を書き換える必要がある場合、押さないと変わらないことが多い

フォルダ概念

Chrome の拡張は大きく三種類の概念、ファイルに分かれる

entrypoints/popup/main.ts

ポップアップで使用されるコード
先ほど右上のアイコンから表示させた画面が該当する

entrypoints/popup/background.ts

Chromeの裏側で動くコード
時間経過の処理だったり、ブラウザのAPIを使う時に利用する

entrypoints/popup/content.ts

特定のページを開い際に実行するコード
ページ自体の改造もできるし、ポップアップに情報を渡したり、データを保存したりできる

それぞれは相互に接続可能なので、機能を分割して組み合わせて作成する

manifest.json どこ...？

manifest は wxt.config.ts に書くらしい
ただ、ほとんどのマニュフェスト情報は、コードから自動的に回収してくれるみたい
面白いライブラリだぁ

storage 権限の例を下に載せる

wxt.config.ts

export default defineConfig({
  modules: ['@wxt-dev/module-vue'],

  manifest: {
    permissions: [
      'storage',
      'unlimitedStorage',
    ],
  },
})

おわりに

簡単になったね...