firefoxで crxjsを動かす

crxjsとは Chrome Extensionを作るためのツールです。

しかし公式のドキュメントには、まだfirefoxのpluginを作る方法は記載されていません。

ただ以下のようにすでにPRはマージされており、使えるようになっています。

ということで、firefoxでcrxjsを動かす方法を見ていきたいと思います。

Create Project

基本は公式のドキュメント通りですが、いくつか足りないものがあるので順を追って書いていきます。また今回は Vite2のバージョンで記載していきます。

npm init vite@latest
npm install
npm i @crxjs/vite-plugin@2.0.0-beta.23 -D // latestだと1系が入ってしまう
npm i @types/firefox-webext-browser -D // browser objectを使うため

まずは上記コマンドでpluginたちをinstallします。

Chrome Extensionとは一定互換性があるのですが、Chromeは chrome namespaceを WebExtension APIでは browser namespaceを使います。 Firefoxは chrome namespaceでも動くのですが、非同期のAPIのコールバックの渡し方が違います。

developer.mozilla.org

設定ファイル

各種設定ファイルを修正していきます。

config書き換え

拡張機能を作るには、manifest.json を設定しなければいけません。 crxjsの公式ドキュメントには jsonファイルを設定するやり方が書いてありますが、型の恩恵を受けるために ts上に直接記載していきます。

以下は vite.config.ts を書き換えたものです。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { crx, defineManifest } from "@crxjs/vite-plugin";

const manifest = defineManifest({
  manifest_version: 3,
  name: "My Extension",
  version: "1.0.0",
  action: {
    default_popup: "index.html",
  },
});

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    crx({ manifest, browser: "firefox" }),
  ]
})

これで最小限のmanifestは完了です。

package.json修正

tsで作成している場合は、以下のように type module を指定する必要があります。指定しない場合、ts buildでTypeErrorになってしまいます。

{
  "name": "my-extension",
  "type": "module",
  "scripts": {},
  ...
}

こちらはいずれ解決するかもしれません。

github.com

実際に動かしてみる

まずビルドします。

npm run build

ビルドしたら about:debugging#/runtime/this-firefox にアクセスして上記でビルドした dist/manifest.json を指定して開きます。

読み込むとこんな感じになります。

読み込ませると以下のようにアドオンを開けるようになります。

Screaming Loud

日々是精進