[Chrome拡張機能]manifest.json(ver3)と対応する要素まとめ #初心者

はじめに

Chrome拡張機能を作成する上でmanifest.jsonの記述は必須です。
manifest.json書き方やどの記述がどのファイル・コードと対応しているのかわかりづらかったので、備忘録としてまとめます。２０２２年３月にこの記事を書いているので、その点ご留意ください。

manifest.json全体

今回自分が作成したmanifest.jsonはこんな感じです。
上から順に解説していきます。
全コードはGitHubで公開しているので、よかったら覗いてください。
Chrome拡張機能「EggHunt:エッグハントで遊ぼう」

{
	"manifest_version": 3,
	"name": "EggHunt:エッグハントで遊ぼう",
    "description": "Find and play with the Easter eggs scattered around the site!",
	"version": "1.0",
	"permissions": ["activeTab","scripting"],
    "icons": {
        "16" : "images/icon16.png",
        "48" : "images/icon48.png",
        "128" : "images/icon128.png"
    },
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
          "matches": ["http://*/*","https://*/*"],
          "css": ["style.css"]
        }
    ],
    "web_accessible_resources": [{
        "resources": ["images/*"],
        "matches": ["http://*/*","https://*/*"]
    }],
	"action": {
        "browser_action" : {
            "default_icon" : {
              "19" : "images/icon19.png",
              "38" : "images/icon38.png"
            }
        }
    }
}

基本設定

	"manifest_version": 3,
	"name": "EggHunt:エッグハントで遊ぼう",
    "description": "Find and play with the Easter eggs scattered around the site!",
	"version": "1.0",

manifest_version
v3が最新バージョンなので、v2の記事もありますがv3にしてください。

nameとdescription
拡張機能の名前と説明です。

version
0から65535まで指定可能です。更新する際にバージョンの差分をチェックし、新しい方が適用されるそうです。version_nameを使えばバージョンに文字列を使うこともできるようです。
例）
"version_name": "1.0 beta"
Manifest - Version

アイコンの設定

    "icons": {
        "16" : "images/icon16.png",
        "48" : "images/icon48.png",
        "128" : "images/icon128.png"
    },
	"action": {
        "browser_action" : {
            "default_icon" : {
              "19" : "images/icon19.png",
              "38" : "images/icon38.png"
            }
        }
    }

icons

アイコンはPNG形式が推奨されているので、特に理由がなければPNGにしましょう。試してはないですが、他の拡張子でも動くそうです。
16x16
拡張機能のページのファビコンとして使用されます。

48x48
拡張機能の管理ページ（chrome://extensions）で使用されます。

128x128
インストール中およびChromeウェブストアで使用されます。

default_icon

Chromeのタブで表示されるアイコンの設定です。16DIPsという謎の形式らしいですが、サイトに合うサイズに自動で変換してくれるらしいです。よくわからなかったのでとりあえず２つ追加してます。

Manifest - Icons

ブラウザ操作とパーミッション

    "permissions": ["activeTab","scripting"],
    "background": {
        "service_worker": "background.js"
    },

permissions

拡張機能でユーザーに対してアクセスする機能を宣言します。ここに記載がないと、拡張機能が動かないので注意してください。
また、余分な機能を記載しないようにしてください。セキュリティ向上のために必要だそうです。

activeTab
ユーザーが拡張機能を呼び出したとき(たとえば拡張機能のクリック)に、現在アクティブなタブへの一時的なアクセス権が拡張機能に付与されます。

executeScript
スクリプトとスタイルの挿入機能です。
今回ではbackgrond.jsでshowAlert（）を呼び出す(スクリプトを追加する)ために必要なパーミッションです。

background

Chromeタブに対してイベントの追加・変更ができます。

新しいページへの移動
ブックマークの削除
タブのクローズ
など

service_worker
タブを動かすためのJavaScriptファイルのパスを記載します。
ファイルは、拡張機能のルート・ディレクトリに配置する必要があります。

拡張機能タブがクリックされたとき、background.js内のshowAlert()を実行するコードはこちら。

// background.js
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: showAlert,
  });
});

Manage events with service workers

ユーザーがアクセスしているWEBサイトにCSSとJSを追加

    "content_scripts": [
        {
          "matches": ["http://*/*","https://*/*"],
          "css": ["style.css"]
        }
    ],

content_scriptsはユーザーが今現在、アクセスしているサイトに対して変更を加えることができます。
今みなさんはQiitaの記事を見ていると思いますが、この今見ているページにJSやCSSを追加できるということです。

matches
必須。このコンテンツスクリプトがどのページに注入されるかを指定します。
Qiita内のみアクセス可能にする場合
"matches": [https://qiita.com/*"],

どのサイトでもアクセス可能にする場合
"matches": ["http://*/*","https://*/*"],

css
ページに追加するCSSファイルです。他にもJSが追加できます。

ファイルの挿入

    "web_accessible_resources": [{
        "resources": ["images/*"],
        "matches": ["http://*/*","https://*/*"]
    }],

content_scripts同様に、ユーザーがアクセスしているサイトに対してファイルを追加できます。

resources
拡張機能内にある画像のパスを記載します。"*.png"と書けば、PNG形式の画像のパスが全て通ります。
画像を呼び出すにはgetURL()を使用します。

// backgrond.js
const image_path1 = chrome.runtime.getURL("images/egg1.png");

matches
画像を追加できるサイトを指定します。オリジンのみがチェックされ、パスは無視されます。

申請するとき

Googleデベロッパーから作った拡張機能を申請できます。
https://chrome.google.com/webstore/developer/dashboard

manifest.jsonの内容によって、「プライバシーへの取り組み」で記入することが増えますので、
申請する前に不必要な設定がないかチェックした方がいいかなと思います。

登録料が5ドル必要なので、クレジットカードかデビットカードでお支払いしてください。
また、Googleアカウントの2段階認証が必要なのでこちらも設定するようにしてください。

最後に

今回はじめてQiitaの記事を投稿しましたが、調べているうちにわからなかったことが理解できたり、こう書けばもっとよかったのかな、と新しい気づきを得ることができました。
微力ながら、みなさんの拡張機能ライフの手助けになれば幸いです！
あとは申請が通るのを祈るだけ！！（爆）

参考サイト

https://developer.chrome.com/docs/extensions/mv3/manifest/
https://qiita.com/shiro1212/items/12f0a767494a7b2ab0b3
https://original-game.com/how-to-make-chrome-extensions/