Google Chrome 拡張機能 / Firefox アドオン作成ボイラープレート 2024

この記事ははてなエンジニア Advent Calendar 2023 の 12 月 37 日......もとい 2024 年 1 月 6 日の記事です。

みなさんは Google Chrome 拡張機能や Firefox のアドオンは書いたことありますか？わたしは 2 年に 1 回くらい、なぜか書くタイミングがあります。
そのたびに良い感じのボイラープレートを探しているのですが、過去に使ったものは気がついたらメンテナンスが行われていなかったり、もはやリポジトリがアーカイブされていたりすることがあります。
そこで、今回は昨日 Google Chrome 拡張機能 / Firefox のアドオンを作って体験が良かったボイラープレートと、実際にストアへ出すまでを紹介します。

ボイラープレートの紹介

今回使ったのは、 guocaoyi/create-chrome-ext です。
昔よくあった yeoman だったり GitHub からリポジトリクローンしてそのまま使ってね、とかではなく、 npm create chrome-ext から作成できます。モダンですね。
早速作っていきましょう。

#
$ pnpm create chrome-ext test-project --template vanilla-ts

これだけで、 Vanilla JS を使った Google Chrome 拡張機能のボイラープレートが完成です。
あとは、

$ pnpm install
$ pnpm run dev

として、生成された build/ ディレクトリを Google Chrome に読み込ませれば、必要最低限の状態で動きます。

このボイラープレートの良いところは、必要最低限とはいえ、拡張機能開発で欲しいものが一通りそろっているところです。
何もせずに、以下の状態で手に入ります。

HMR での開発
TypeScript
Prettier
拡張で扱える機能が一通りある状態
- Background Script
- Content Script
- Popup Script
- Options
- SidePanel
- DevTools
- NewTab
manifest.json の自動生成

そのため、生成したらすぐ、やりたいことが実現できます。えらい。
ESLint はまぁ、好みや主義が人によって異なるので、無くても良い気はします。後で自分で入れましょう。

Chrome Web Store 提出

開発したらストアに提出しましょう。最近は .crx 形式は弾かれるようなので、 .zip にして提出します。
ビルドも簡単で、 pnpm run build コマンドを実行して、 build を圧縮したものをそのまま提出できます。

あとは権限周りやアイコン、スクリーンショットを用意して、 Chrome Web Store Developer Portal から提出しましょう。

AMO (addons.mozilla.org) 提出

Chromium に依存していない API のみを使っている場合は、 Firefox のアドオンとしても登録が可能です。
ただし、Firefox のアドオンとして動作させるには、 browser_specific_settings キーを追加する必要があります。
MDN のドキュメントでは「通常は不要です」とありますが、Manifest V3 を使う場合は必須です。
そのため、以下のような修正を行います。

import { defineManifest } from '@crxjs/vite-plugin'

export default defineManifest({
  // ...
  // @ts-expect-error
  browser_specific_settings: {
    gecko: {
      id: '{daf44bf7-a45e-4450-979c-91cf07434c3d}',
      strict_min_version: '48.0', // Manifest を読み込ませるので最低 48.0、 Manifest V3 が有効になるのは 109 なので、その辺でも
    },
  },
})

id には、 GUID を入れます。 UUID とも言われます。
一意であればメールアドレスでも良いですが、実在する、疎通しているアドレスを指定するとスパムがくるのでやめた方が良い、と MDN にありました。

ここまで完成したら、 pnpm run build して、生成されたディレクトリを build.zip とかにすれば提出できます。
ただし、 AMO ではソースコードの提出も必要なので、 build/ と node_modules/ (と build.zip) を除いたファイル一式も提出する必要があります。
このとき、ビルドツールを使用している場合はビルド方法の説明が必要なのですが、ボイラープレートから作ると README.md に最初から書いてあるので、特に追加で書く必要はありません。

これで、提出が出来るようになったので、提出しましょう。
ちなみに AMO は人による監査が行われていますが、わたしの場合は寝て起きたらすでに Approved になっていました (Chrome はまだなっていない)。

ということで、ボイラープレートの紹介でした。