Zenn
🦚

Chrome拡張をつくるための設定ファイルに関するお話

2023/08/31に公開
Chrome
Chrome拡張
JSON
tech

Chrome拡張を作るときの設定ファイルにmanifest.jsonがあります
Mozilla web docsより引用すると、以下のようなもの

manifest.json ファイルは、WebExtension API を使う拡張機能に必ず含めなければならない唯一のファイルです。

拡張機能の名前、バージョンの他、基本的なメタデータ、スクリプトやアクションを指定するわけです

この設定ファイルでよく使う要素の中身を、一旦整理してみようと思った。そんな記事

manifest.jsonの中身

ページが読み込まれた時点で実行するChrome拡張で使うmanifest.jsonはこんな感じ

{
	“manifest_version”: 3,
	“name”: <拡張の名前>,
	“description”: <拡張の説明>,
	“content_scripts”: [
		{
			“matches”: [<この配列で指定したURLのどれかに一致した時に拡張が実行される>],
			“run_at”: <拡張の実行タイミング>,
			“all_frames”: <全部のフレームを対象とするかのbool値>,
			“js”: [<実行するスクリプトのパス>]
		},
		conontent_scriptsが続く……
	]
}

nameやdescriptionで拡張機能に関する情報を記述して、content_scriptsで実際に実行されるための情報を記述しています
content_scriptsをどんどん伸ばしていけば別のページにmatchさせた別の拡張を同じmanifest.json内に書いていけるという寸法

content_scriptsの要素を詳しくみていこう

contents_script内の要素

content_scripts内で実際に拡張として実行される内容を設定していきます
ここではmatches、run_at、all_frames、jsの4つの要素を設定します

  1. matches
    • この配列にマッチするURLのページに対して拡張を適用する
    • ワイルドカードとして*が使えるので、domain_hoge内の全てのページに適用させたかったらhttps://domein_hoge/*のようにしてしまう事もできる
    • https://domein_hoge?*ってしてやれば、フォーム入力の有無で拡張を切り替えるなんて芸当もできたりできなかったり（POST通信でも、送信フォームの方のURL末尾にハッシュつけるなどして実現できたりする。テクニカルだね）
  2. run_at
    • content_scripts内、run_atには以下表に示す3つのうちどれかが入ります
run_at スクリプト実行タイミング
document_start DOM構築後、ページにもともとあるスクリプト実行前
document_end ページにもともとあるスクリプト実行後、画像などの重いリソースの読み込み前
document_idle 規定値。document_end後で、重いリソースを読み込み完了するまでの間のどこか
  • 基本的にパフォーマンスを考慮した自動のタイミングで実行してくれるdocument_idleが良いらしい
  • （わたしは重いやつ読み込み待ち時間待たずに描画してくれるdocument_endがお気に入り）
  1. all_frames
    • <iframe>タグなどでページ内にさらにページを作った時、その中のページで再び拡張を実行するかどうかを設定する
  2. jsやcss
    • 実行するJavascriptや適用するCSSをしまっておく相対パスを記入する配列
    • 同一ページに複数のスクリプトを適用したい場合、ここの配列長を伸ばしていくことになる

拡張の機能を増やすときは基本的に、contents_scriptの中身の要素をコピーして増やして、URLとスクリプトを変えるってことをしています
なのであまりrun_atとかall_framesは気にしていなかったけど、run_atのタイミングは普通に重要なので整理し直すことって重要。だと思う

Discussion