Chrome拡張機能開発の始め方 2022 manifest v3

概要

chrome拡張機能(chrome extension)の開発から公開までの手順について説明します。

作り方

chrome拡張機能を作成するには次の二つの手順が必要です。

1. manifest.jsonでの設定

これは拡張機能の全体的な設定を行うファイルです。
ポップアップの作成やタブの管理やコンテキストの追加などさまざまなことができます。

manifest.jsonのドキュメントはこちらからManifest file format

詳しくは後ほど説明します。

2. リソースの作成

manifest.json 内で設定した項目にはそれぞれに、
必要な処理を行う　HTML や javascript などのリソースを作成する必要があります。
このリソース内では、chromeに用意されたさまざまな専用のAPIを利用しながら
chrome独自の操作を作成することができます。

詳しくは公式のAPIリファレンスをご確認ください
https://developer.chrome.com/docs/extensions/reference/

拡張機能の試し方

1. 自身で作成した拡張機能はブラウザ内で試すことができます。

2. chrome://extensions/ ブラウザの拡張機能のページを開きます。

3. 次にデベロッパーモードを選択し、
   パッケージ化されていない拡張機能を読み込むを選択します。

4. 最後にmanifest.jsonが定義したディレクトリを選択すれば、自身の環境で拡張機能を試すことができるようになります。

ここで一度定義すれば、ファイルの中身を自動的に反映してくれるため、修正を加えるたびに操作をしなおす必要はありません。

公開手順

1. chromeウェブストアを開き右上の設定アイコンをクリックし、
   デベロッパーダッシュボードを選択する。

2. 次にChromeウェブストアのデベロッパー登録でデベロッパーアカウントを作成する。
   （作成には５ドルが必要です。）

3. デベロッパーアカウントを作成するとアカウントの認証を求められるので認証を行います。

トレーダーの申告では拡張機能で収益を上げるのであればトレーダーを選択し、それ以外の個人利用や無料拡張機能を作成するのであればトレーダーでないアカウントを選択すれば良いと思われます。

4. アカウント設定を行うとダッシュボードを開くことができます。開いたダッシュボードの右上の新しいアイテムを選択します。

5. すると、アイテムを追加するためのポップアップが表示されるので、作成した拡張機能を圧縮したzipファイルを選択します。

macであればこちらのコマンドで圧縮が行えます。

zip -r extension.zip extension/
zip -r <圧縮後のファイル名> <圧縮するディレクトリ>

6. ファイル有効であればアプリの詳細画面が開くので、詳細情報を入力します。情報はフォームに従って記入すれば問題ありません。入力が終わった後には下書きの保存を忘れないようにしてください。

7. 次にプライバシーへの取り組みの設定を行います。ここでは拡張機能の用途の説明と、外部のコード（CDNなど）の利用について記入する必要があります。
   基本的にはパッケージを利用し、リモートコードは使わないようにします。（セキュリティやパフォーマンスに影響する可能性があります）
   また、下にはデータの使用に関してのチェックボックスがありますのでフォームに沿って記入をしてください。

8. 最後に決済と配布地域を選択します。ここでもフォームに従えば問題ありません。記入が終わったら下書きを保存し、右上の申請ボタンから申請を行いましょう。（もし行えなかったら記入漏れやエラー項目があると思われるので見直してみてください。）

以上で公開に関しては終了です。

manifest.jsonについて

Manifest file format
こちらのページに公式のフォーマットが掲載されているので気になりましたらご確認ください。

manifest.json 設定項目の概要は以下のようになります。

{
  // 必須
  "manifest_version": 3, // manifest.jsonのバージョン情報 現在は3を利用しないと拡張機能を公開・更新が行えません。
  "name": "My Extension", // 拡張機能の名前 ここで設定した内容がストアの掲載情報のパッケージのタイトルとなる。
  "version": "1.0.1", // 拡張機能のバージョン情報 拡張機能を更新する際に一緒に更新します。

  // 推奨
  "action": {...}, // ツールバーに表示される拡張機能のアイコンを選択した際の操作を設定することができる。
  "default_locale": "en", // デフォルトの言語を選択
  "description": "A plain text description", // 拡張機能の説明 設定した内容がストアの掲載情報のパッケージの概要となる。
  "icons": {...}, // 拡張機能の表示に使用するアイコン chromeが必要に応じて最適なサイズを使用する。

  // 任意
  "author": "[e-mail]", // 拡張機能の製作者
  "automation": {...}, // 自動化タスクの実行を可能にする設定 フォームの自動入力などができる
  "background": {...}, // service workerを登録する 拡張機能の初期化やイベントの設定などを行う
  "chrome_settings_overrides": {...}, // Chromeの設定を拡張機能から上書きすることができる 新規タブで任意のページを開くなど
  "chrome_url_overrides": {...}, // [URL chrome://<page名>]の形でアクセスできるページのhtmlを置き換えることができる 新規タブのhtmlを置き換えるなど
  "commands": {...}, // ショートカットキーを作成し、それをトリガーにしてイベントを呼び出すことができる
  "content_scripts": [{...}], // コンテンツスクリプトを使用して特定のwebページのDOMの操作などが行うことができる
  "content_security_policy": {...}, // 拡張機能が使用できるリソースやスクリプトを制限し、セキュリティを高めることができる
  "cross_origin_embedder_policy": {...}, // Cross-Origin-Embedder-Policy を指定できる
  "cross_origin_opener_policy": {...}, // Cross-Origin-Opener-Policy を指定できる
  "declarative_net_request": {...}, // Web ページの読み込みや通信を制御することができ、特定のサイトからのリクエストをブロックしたりできる
  "devtools_page": "devtools.html", // 開発者ツール内にカスタムのhtmlページを表示することができ、javascriptを使ってデータの収集などができる
  "event_rules": [{...}], // Declarative Event Rules API を使用して、webページのイベントを検出して、特定の処理を実行することができる
  "export": {...}, // 共通モジュールとしてエクスポートするリソースを定義できる
  "externally_connectable": {...}, // 外部アプリや拡張機能からの通信を受け付けるようになる
  "file_browser_handlers": [...], // 特定の種類のファイルを開くためのハンドラーを設定することができる
  "file_system_provider_capabilities": {...}, // File System Provider API の使用設定 拡張機能からChrome OS のファイルシステムを操作できる
  "homepage_url": "https://path/to/homepage", // 拡張機能のホームページの URL を指定することができる
  "host_permissions": [...], // 拡張機能がアクセスできるホストのパターンを指定することができる
  "import": [{...}], // 共通モジュールからインポートするリソースを定義できる
  "incognito": "spanning, split, or not_allowed", // プライベートウィンドウで拡張機能を使用するかどうかを指定することができる
  "input_components": [{...}], // 拡張機能に含まれる入力メソッドを定義することができる。
  "key": "publicKey", // 拡張機能を一意に識別するためのキーを指定することができる
  "minimum_chrome_version": "107", // 拡張機能を使用するために必要な最低のバージョンを指定できる
  "nacl_modules": [...], // Native Client モジュールを定義するために使用される
  "oauth2": {...}, // 拡張機能が使用する OAuth 2.0 クライアントを定義することができる
  "offline_enabled": true, // 拡張機能がオフラインでも使用可能であるかどうかを示す
  "omnibox": {...}, // 拡張機能が Chrome のアドレスバー（Omnibox）に表示されるかどうかを指定することができる
  "optional_host_permissions": ["..."], // 拡張機能が使用する可能性のあるホスト権限を指定することができる
  "optional_permissions": ["..."], // 拡張機能が使用する可能性のある権限を指定することができる
  "options_page": "options.html", // 拡張機能のオプションページの URL を指定することができる
  "options_ui": {...}, // 拡張機能のオプションページの UI 要素を設定することができる
  "permissions": ["..."], // 拡張機能が使用する権限を指定することができる
  "replacement_web_app": "https://example.com", // Web アプリを拡張機能で置き換えることができる
  "requirements": {...}, // 拡張機能が使用するために必要なシステム要件を指定することができる
  "sandbox": {...}, // 拡張機能が使用するサンドボックスを指定することができる
  "short_name": "Short Name", // 拡張機能にショートネームを指定することができる
  "storage": {...}, // 拡張機能のデータを保存することができる
  "tts_engine": {...}, // テキストを読み上げるための TTS (Text-to-Speech) エンジンを指定することができる
  "update_url": "https://path/to/updateInfo.xml", // 拡張機能のアップデートを管理するために使用する
  "version_name": "1.0 beta", // 拡張機能のバージョン名を指定することができる
  "web_accessible_resources": [...] // 拡張機能ないのリソースを外部からアクセスできるようにすることができる
}

まとめ

拡張機能を作成するには上で説明した通り、作成し、自身の環境で試し、審査するという３つのステップを通せば簡単に公開でき、あまりコストもかからずに自身の好きな機能をブラウザに搭載することができます。
自分の環境を手軽に構築して書き換えることができるのはとても楽しく、面白いものなのでぜひいろいろ試していただきたいです。自分も今回調べた内容を含めて拡張機能開発を試していきたいと思います！