Firefox拡張機能を開発者センターに限定公開する手順

# 概要

これは[初心者のブラウザ拡張機能 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/browser-extension)の2日目の記事です。

作成した拡張機能をFirefoxの開発者センターに公開する手順を記載します。
なお、ここでは自分だけしか使わない拡張機能を想定して限定公開する手順とします。

# 開発者センターへ公開する流れ

1. [開発者センター](https://addons.mozilla.org/ja/developers/addons)へアクセスする
1. 新しいアドオンを登録する
1. 審査を待つ
1. 自分のFirefoxへ追加する

# 開発者センターへアクセスする

[開発者センター](https://addons.mozilla.org/ja/developers/addons)へ接続します。アカウントがない場合は作成してください。

`新しいアドオンを登録`を押します。

![新しいアドオンを登録](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/418fec28-f4b1-881e-cd4e-9a0602c7263b.png)

自分だけの公開なので`On your own`を選択します。

![配布手段を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/1be3720c-7e7c-c00f-67c2-f6fa7a51606f.png)

`ファイルを選択`でZipファイルにしたアドオンをアップロードします。
`検証が完了しました`と出ればOKです。

:::note info
`manifest.json`やJavascriptファイル、アイコンファイルなど使っているファイルをすべてZipにしてアップロードします。
:::

![アドオンをアップロード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/4b015d86-d080-cbde-a68c-972a361d6a75.png)

:::note warn
`manifest.json`のバージョンが3の場合、各アドオンにIDを設定します。このIDは自分がアップロードしている他のIDと被ってはいないものにします。

正しくIDが設定されていない場合はエラーになります。

![ID未設定エラー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/da412131-95ed-2926-a74a-e7c474cbc915.png)


`id`はUUIDまたはメールアドレス形式が使えます。詳しくは[拡張機能 ID フォーマット](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings#%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD_id_%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88)を参照ください。

```json:manifest.json
{
    "browser_specific_settings": {
        "gecko": {
          "id": "the-town-sample-qiita@example.com"
        }
    },
    "manifest_version": 3,
    ...
```
:::

互換性のあるアプリケーション、PC版FirefoxかAndroid版Firefoxかを選び、続けるを選択します。

![アドオンアップロード画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/c763d514-8e2b-8d6a-3d0b-a87df1407aa8.png)

拡張機能で使っている処理によってはソースコードの提出が必要となります。ほとんどの拡張機能では`いいえ`で問題ないですが、該当する処理を使っている場合は指示に従ってください。

![ソースコードの提出について](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/0057c587-2005-da99-ab18-c6208e17b7f4.png)

![ソースコードの提出についていいえをクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/e419a3f6-0867-efe5-aa7e-1e3f4d21a11a.png)

これであとは署名待ちになります。

![署名中画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/ee14f5b5-0e91-bd1a-778c-12066ab2d03c.png)

# 審査を待つ

審査状況は以下のように画面をたどって確認します。

自分のアドオン画面に表示されている対象のアドオンをクリックする。

![自分のアドオン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/75af22e6-d7bd-e415-b397-17cd73f69ac5.png)

左にある`すべて表示`をクリックする。

![すべて表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/ed1194e9-f8f9-3dda-d8cc-39683b9424a0.png)

ステータスが`承認済み`となればOKです。

![ステータス](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/6e4acb1e-35cf-5308-3cb4-21206fa070f4.png)

# 自分のFirefoxへ追加する

さきほどの画面からインストールしたいバージョンをクリックします。

![バージョン0.1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/3ce4499b-a25b-f575-8d54-53a113877add.png)

ファイルのリンクをクリックします。

![ファイルリンク](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/832352fb-ff4a-d452-e4d1-179a2102f05c.png)

追加確認画面がポップアップで出てきますので`追加`を選択します。

![追加確認画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/3c6ae0a0-23c5-c40d-9d3c-a9ea4870c9fb.png)

`追加されました`と表示されれば完了です。

![追加完了画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/5a54e4cd-a11a-6423-633b-ac1b78d2c51e.png)

Firefoxの拡張機能画面にいけば詳細を確認できます。

![拡張機能画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/31e66889-da38-5333-6857-47f65fa1b348.png)