wxt で作ったウェブブラウザ拡張を公開する

WXT で作ったウェブブラウザ拡張を公開する。
せっかく Chrome と Firefox で動くものを書いたので、Chrome Web Store と addons.mozilla.org(AMO) に公開してみたい。

WXT は各種ストアへの投稿を CLI でできるようにしてくれている。
https://wxt.dev/guide/essentials/publishing.html

まずは拡張機能を手動で投稿する必要がある。
一番最初だけは手動でやらなければならないらしい。仕方ないので、それぞれのストアで投稿する。

2回目以降の投稿をやってみる。
まずは設定ファイルを生成する。

pnpm wxt submit init

投稿したいストアの選択画面が出るので、スペースキーを押してストアを複数選択する。
（最初、私は間違って何も選択せずにエンターキーを押して空の設定ファイルを作っていました）

• chrome extension id
  • これは手動で拡張を投稿した際に自動で生成されている
• chrome client id
  • ガイドに従って Google Cloud で認証情報を作成する
  • https://developer.chrome.com/docs/webstore/using-api#setup
• client secret
  • client id と共に生成されるものを使用
• refresh token を作成する
  • （これがなんのために使用するのかいまいちよくわからない）
  • ここでは作成しないことにする
  • 結局投稿時に必要だったので作成する
• chrome publish target
  • 身内でだけ使用する拡張のため、Trusted Testers を選択する
  • 実は chrome publish target は3種類存在する、一般公開、信頼されたユーザーのみに許可する、そして非公開である
  • wxt で指定できるのは一般公開と信頼されたユーザーのみの2種類
  • 「非公開」にしたい場合は、手動で投稿する際に「非公開」を選択した上で、wxt では「default」を選択する
• アップロード時にレビューを直ちに受ける

続いて AMO への投稿の設定を行う。

• firefox extension id
  • おそらく AMO で拡張の編集画面を開いた際の URL 上の ID
  • 拡張機能の管理画面の「Technical Detail」内の UUID
    • https://github.com/aklinker1/publish-browser-extension/issues/23#issuecomment-2193086472
    • 先頭と末尾の波括弧 {} を除いた文字列
• firefox jwt issuer
  • https://addons.mozilla.org/developers/addon/api/key/ で作成する
• firefox jwt secret
• firefox channel
  • unlisted を選択

# build
pnpm wxt zip
pnpm wxt zip -b firefox

# submit
pnpm wxt submit \
  --chrome-zip .output/my-extension-0.1.0-chrome.zip
  --firefox-zip .output/my-extension-0.1.0-firefox.zip

chrome refresh token

ここで submit の際に次のエラーが発生した。

Missing required config: CHROME_REFRESH_TOKEN

先の設定で chrome refresh token を生成しなかったせいなので、改めて init してトークンを生成する。
...chrome refresh token を生成するため、OAuth 経由で Google アカウントにログインしようとすると、今度は次のエラーが発生した。

The redirect URI in the request, urn:ietf:wg:oauth:2.0:oob, can only be used by a Client ID for native application. It is not allowed for the WEB client type. You can create a Client ID for native application at https://console.developers.google.com/apis/credentials/oauthclient
リクエストの詳細: flowName=GeneralOAuthFlow

ということで、OAuth のアプリケーションは「ウェブアプリケーション」ではなく、「ネイティブアプリ」を選択する必要があるらしい。作り直す。
「ネイティブアプリ」という項目は無かったので、「デスクトップアプリ」を選択して作り直した。

すると、上手く CLI からログインできるようになった。

Firefox 用に非公開で配布する

AMO では配布せず、自分でホストしたウェブサイトなどで配布したい。
その場合も、AMO に申請だけは必要となる。AMO が投稿したファイルを確認し、問題なければ署名してくれるので、その署名を配布時に使用することになる。

https://extensionworkshop.com/documentation/publish/self-distribution/