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

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

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

```json
{
	"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"
            }
        }
    }
}
```

### 基本設定
```json
	"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](https://developer.chrome.com/docs/extensions/mv3/manifest/version/)

## アイコンの設定
```json
    "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）で使用されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1650886/f0fc5893-6169-ac7b-639d-17d09331ec30.png" width="400" />

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

### default_icon
Chromeのタブで表示されるアイコンの設定です。16DIPsという謎の形式らしいですが、サイトに合うサイズに自動で変換してくれるらしいです。よくわからなかったのでとりあえず２つ追加してます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1650886/309d0666-f72a-ff7f-3ca4-d20621ae0e3a.png" width="400"/>
[Manifest - Icons](https://developer.chrome.com/docs/extensions/mv3/manifest/icons/)

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

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

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

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

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

### background
Chromeタブに対してイベントの追加・変更ができます。
- 新しいページへの移動
- ブックマークの削除
- タブのクローズ
など

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

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

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

```

[Manage events with service workers](https://developer.chrome.com/docs/extensions/mv3/service_workers/)

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

```json
    "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が追加できます。

## ファイルの挿入
```json
    "web_accessible_resources": [{
        "resources": ["images/*"],
        "matches": ["http://*/*","https://*/*"]
    }],
```
`content_scripts`同様に、ユーザーがアクセスしているサイトに対してファイルを追加できます。

__resources__
拡張機能内にある画像のパスを記載します。`"*.png"`と書けば、PNG形式の画像のパスが全て通ります。
画像を呼び出すにはgetURL()を使用します。
```js
// 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/