Chrome拡張機能をChromeウェブストアで公開するまでの手順のまとめ
はじめに
こんにちは。
株式会社ココナラ Web開発グループ フロントエンド開発チームの加藤です。
今まで社内用のChrome拡張機能を作ったりしていました（過去記事）が、Chromeウェブストアでの公開はしたことがありませんでした。
しかし先日プライベートでココナラAI出品チェッカーという拡張機能を作り、はじめてChromeウェブストアで公開をしました。（個人的に開発した非公式のツールです）
準備が必要なものがあったり、審査でリジェクトされてしまったりして時間がかかったので、スムーズに進められるように手順をまとめます。
デベロッパー登録
Chrome拡張機能を公開するには、まずデベロッパー登録が必要です。
Chromeウェブストアデベロッパーダッシュボード
規約に同意し、5ドルの登録料を支払う必要があります。
年会費ではなく、アカウントに対して最初の1回限りです。
1つのアカウントで複数の拡張機能を公開できます。
ZIP作成とアップロード
ディレクトリ直下にmanifest.jsonがある状態で、動作に必要な最低限のファイルだけを含めてZIP化します。
.git や node_modules 、 .DS_Store などのファイルは含めないように注意しましょう。
ファイル構成の例
my-extension/
├─ manifest.json
├─ popup.html
├─ background.js
└─ icons/
├─ icon16.png
├─ icon32.png
├─ icon48.png
└─ icon128.png
manifest.jsonの例（Manifest V3）
{
"manifest_version": 3,
"name": "拡張機能の名前",
"version": "1.0.0",
"description": "拡張機能の概要",
"icons": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"scripting"
],
"host_permissions": [
"https://example.com/*"
],
"background": {
"service_worker": "background.js"
}
}
権限は最小限にしましょう。permissions や host_permissions に余計なものがあると審査でリジェクトされます。
host_permissionsは https://*/* 等にせず、必要最低限のドメインに絞りましょう。
完成したらデベロッパーダッシュボードで「新しいアイテム」ボタンを押し、ZIPファイルをドラッグ&ドロップでアップロードします。
ストアの掲載情報を入力
次にストアの掲載情報を入力します。
商品の詳細
パッケージのタイトルとパッケージの概要には、manifest.jsonのnameとdescriptionの内容が自動的に設定されます。
加えて拡張機能の詳細な説明の入力も必要です。
ここで書いた内容が実際の機能と一致していないと審査でリジェクトされてしまうので、間違いがないように丁寧に書きましょう。
カテゴリと対象の言語も正しく選択します。
画像アセット
画像は以下の4種類があるので、用意しておきましょう。
| 種類 | サイズ | 必須/任意 |
|---|---|---|
| ショップ アイコン | 128x128px | 必須 |
| スクリーンショット | 1280x800px または 640x400px |
最低1枚必須 |
| プロモーション タイル（小） | 440x280px | 任意 |
| マーキー プロモーション タイル | 1400x560px | 任意 |
画像に関するガイドラインに、より詳細なルールが書かれています。
YouTubeにアップロードした動画を設定することもできます。
追加フィールド
デベロッパーの公式URL、拡張機能のホームページURL、サポートURLを設定できます。
いずれも任意の設定です。
プライバシー情報を入力
次にプライバシーに関する情報を入力します。
単一用途
拡張機能の用途は、単一で範囲の限られたわかりやすいものである必要があります。（Chromeウェブストアのデベロッパープログラムポリシー）
この拡張機能がポリシーに則っていることの説明を書きます。
権限が必要な理由
manifest.jsonの内容に応じて、各権限が必要な理由を書く欄が出てきます。
審査で必要な権限でないと判断されるとリジェクトされてしまうので、何のために必要な権限なのか丁寧に説明しましょう。
ホスト権限はホストごとにそれぞれ理由を書きます。
データ使用
ユーザーデータを収集する場合、収集する内容にチェックをします。
チェックをしたものはウェブストアのページで公開されます。
ユーザーデータを収集する場合、プライバシーポリシーも用意する必要があります。
販売地域
販売地域を制限したり、リンクを知っているユーザーのみに公開する設定もできます。
アプリ内購入が含まれる場合は「アプリ内購入が含まれています」を選択します。
選択するとウェブストアのページに表示されます。
テスト手順
拡張機能を使用するためにログインや特別な手順が必要な場合は、審査のためにテスト用のログイン情報や手順を記載します。
公開
入力がすべて完了したら、「審査のため送信」ボタンを押して送信します。
審査はアプリストアと同じように人の手で行われるため、公開されるまで数日かかります。
拡張機能に問題がある場合のほか、説明が正しくなかったり不足している場合にもリジェクトされるので、説明は丁寧に書きましょう。
バージョンアップ
バージョンアップする場合、manifest.json の version を上げてZIPファイルを作成し、「新しいパッケージをアップロード」からアップロードします。
入力されている説明や画像に修正が必要な場合には修正し、「審査のため送信」から送信します。
更新時にも公開時と同様に人の手による審査があります。
審査が通りストアに公開されると、すでにインストールしているユーザーは自動的にアップデートされます。
審査について
審査で使われているPCは英語環境なので、日本語環境を想定している場合は注意が必要です。
今回開発した拡張機能は審査で動作していないとだけ言われてリジェクトされ、細かい説明がないため原因の特定が難しかったのですが、最終的にPCが英語環境で、ココナラの言語設定も英語になっていることが原因だと分かりました。
拡張機能の説明に日本語にのみ対応していることを明記したところ、審査が通りました。
対象言語に日本語を選択して説明を日本語で記載している場合も、審査ではそれを英語に自動翻訳したものを見ているようです。
リジェクト時のメールは日本語で届きますが、その中の説明の内容の引用の部分だけ、日本語で書いたはずの内容が英訳されたものになっていました。
リジェクトされた場合は再審査請求ができてそのフォームも日本語ですが、その後にサポートから届くメールは英語で、フォームに書いた内容も英訳したものを見ているようだったので、再審査請求は最初から英語で書いたほうがスムーズかもしれません。
更新時に審査の担当者が変わることで、更新内容とは関係のない公開時には指摘されなかった内容でリジェクトされてしまうこともありました。
参考リンク
- Chrome拡張機能の公式ドキュメント: https://developer.chrome.com/docs/extensions?hl=ja
- Chromeウェブストアで公開する: https://developer.chrome.com/docs/webstore/publish?hl=ja
- Chromeウェブストアのアイテムを更新する: https://developer.chrome.com/docs/webstore/update?hl=ja
ココナラではエンジニアを募集しています。
よろしければぜひ以下のページもご覧ください。
フロントエンドの求人はこちらです。
Discussion