1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
|
---
title: content_scripts
slug: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
tags:
- Add-ons
- Extensions
- WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
---
<div>{{AddonSidebar}}</div>
<table class="fullwidth-table standard-table">
<tbody>
<tr>
<th scope="row" style="width: 50%;">
<p>タイプ</p>
</th>
<td><code>Array</code></td>
</tr>
<tr>
<th scope="row">必須か</th>
<td>いいえ</td>
</tr>
<tr>
<th scope="row">例</th>
<td>
<pre class="brush: json no-line-numbers language-json notranslate">
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]</pre>
</td>
</tr>
</tbody>
</table>
<p>与えられたパターンに URL がマッチしているページに<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">コンテンツスクリプト</a>をロードすることをブラウザに教えます。</p>
<p>このキーは配列です。それぞれのアイテムは以下の条件を満たすオブジェクトです:</p>
<ul>
<li><strong>必ず matches という名前のキー</strong>を含まなければならず、これはスクリプトが読み込まれる URL パターンを指定します</li>
<li><strong><code>js</code></strong> と <strong><code>css</code></strong> というキーを入れても<strong>よく</strong>、それはマッチしたページに読み込まれるスクリプトを列挙します</li>
<li>その他のプロパティを入れてもよく、それはコンテンツスクリプトがいつどのように読み込まれるか管理します</li>
</ul>
<p>入れることのできるキーの詳細は下記の表にあります。</p>
<table class="fullwidth-table standard-table">
<thead>
<tr>
<th scope="col">名前</th>
<th scope="col">型</th>
<th scope="col">説明</th>
</tr>
</thead>
<tbody>
<tr>
<td><a id="all_frames"><code>all_frames</code></a></td>
<td><code>Boolean</code></td>
<td>
<p><code>true</code>: <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#js">js</a></code> と <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#css">css</a></code> で指定されたすべてのスクリプトを、指定した URL要求にマッチするすべてのフレームに(タブの最上位フレームでなくても)挿入します。これは親のフレームだけが URL要求にマッチしている子フレームには挿入しません。URL 要求は各フレームごとにチェックされます。</p>
<p><code>false</code>: タブの最上位フレームで URL要求にマッチしたフレームだけに挿入します。</p>
<p>デフォルトは <code>false</code></p>
</td>
</tr>
<tr>
<td><a id="css"><code>css</code></a></td>
<td><code>Array</code></td>
<td>
<p>manifest.json からの相対パスの配列で、マッチしたページに挿入される CSS ファイルを参照する。</p>
<p>ファイルは指定した順で、DOM が読み込まれる前に挿入される。</p>
</td>
</tr>
<tr>
<td><a id="exclude_globs"><code>exclude_globs</code></a></td>
<td><code>Array</code></td>
<td>ワイルドカードを含む文字配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">URL パターンにマッチする</a> を見てください。</td>
</tr>
<tr>
<td><a id="exclude_matches"><code>exclude_matches</code></a></td>
<td><code>Array</code></td>
<td><a href="/ja/Add-ons/WebExtensions/match_patterns">マッチパターン</a>の配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">URL パターンにマッチする</a>を見てください。</td>
</tr>
<tr>
<td><a id="include_globs"><code>include_globs</code></a></td>
<td><code>Array</code></td>
<td>ワイルドカードを含む文字配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">URL パターンにマッチする</a> を見てください。</td>
</tr>
<tr>
<td><a id="js"><code>js</code></a></td>
<td><code>Array</code></td>
<td>
<p>manifest.json からの相対パスの配列で、マッチしたページに挿入される JavaScript ファイルを参照する。</p>
<p>ファイルは指定した順でに挿入される。つまり、例えば、ここで jQuery をインクルードしてから他のコンテンツスクリプトを読み込むには、このようにします:</p>
<pre class="brush: json no-line-numbers notranslate">
<code>"js": ["jquery.js", "my-content-script.js"]</code></pre>
<p><code>こうすると <code>"my-content-script.js"</code> から jQuery を使えます。</code></p>
<p><code>ファイルは <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#run_at">run_at</a></code> で指定した時に挿入されます。</code></p>
</td>
</tr>
<tr>
<td><code><a id="match_about_blank">match_about_blank</a></code></td>
<td><code>Boolean</code></td>
<td>
<p>コンテンツスクリプトを <code>"about:blank"</code> もしくは<code>"about:srcdoc"</code>のURLを持つページに挿入します。 if the URL of the page that opened or created this page <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">matches the patterns</a> specified in the rest of the <code>content_scripts</code> key.</p>
<p>This is especially useful to run scripts in empty iframes , whose URL is <code>"about:blank"</code>. To do this you should also set the <code>all_frames</code> key.</p>
<p>例えば、 以下のような <code>content_scripts</code> キーがあるとします:</p>
<pre class="brush: json no-line-numbers language-json notranslate">
"content_scripts": [
{
"js": ["my-script.js"],
"matches": ["https://example.org/"],
"match_about_blank": true,
"all_frames": true
}
]</pre>
<p>ユーザーが<code>https://example.org/</code>をロードすると、ページに空のiframeが埋め込まれ、 <code>"my-script.js"</code> がそのiframe内に読み込まれます。</p>
<p><code>match_about_blank</code> is supported in Firefox from version 52. Note that in Firefox, content scripts won't be injected into empty iframes at <code>"document_start"</code> even if you specify that value in <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#run_at">run_at</a></code>.</p>
</td>
</tr>
<tr>
<td><a id="matches"><code>matches</code></a></td>
<td><code>Array</code></td>
<td>
<p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">マッチパターン</a>の配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">URLパターンにマッチする</a> を見てください。</p>
<p>これは唯一の必須なキーです。</p>
</td>
</tr>
<tr>
<td><a id="run_at"><code>run_at</code></a></td>
<td><code>String</code></td>
<td>
<p>This option determines when the scripts specified in <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#js">js</a></code> are injected. You can supply one of three strings here, each of which identifies a state in the process of loading a document. The states directly correspond to {{domxref("Document/readyState", "Document.readyState")}}:</p>
<ul>
<li>"<code>document_start</code>": corresponds to <code>loading</code>. The DOM is still loading.</li>
<li>"<code>document_end</code>": corresponds to <code>interactive</code>. The DOM has finished loading, but resources such as scripts and images may still be loading.</li>
<li>"<code>document_idle</code>": corresponds to <code>complete</code>. The document and all its resources have finished loading.</li>
</ul>
<p>The default value is <code>"document_idle"</code>.</p>
<p>In all cases, files in <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#js">js</a></code> are injected after files in <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#css">css</a></code>.</p>
</td>
</tr>
</tbody>
</table>
<h2 id="URL_パターンにマッチする">URL パターンにマッチする</h2>
<p><code>"content_scripts"</code> キーは URL マッチングを元にしてコンテンツスクリプトをドキュメントに添付します: ドキュメントの URL がキーに指定されたものとマッチしたら、スクリプトは添付されます。<code>"content_scripts"</code> 内には指定に使える 4 つのキーワードがあります:</p>
<ul>
<li><code>matches</code>: <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">マッチパターン</a>の配列</li>
<li><code>exclude_matches:</code> <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">マッチパターン</a>の配列</li>
<li><code>include_globs</code>: <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#globs">globs</a> の配列</li>
<li><code>exclude_globs:</code> <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#globs">globs</a> の配列</li>
</ul>
<p>これらのプロパティにマッチするには、URL は配列内で少なくとも 1 つの項目にマッチしなれりばなりません。例えばこのようなプロパティが与えられたら:</p>
<pre class="brush: json no-line-numbers language-json notranslate">"matches": ["*://*.example.org/*", "*://*.example.com/*"]</pre>
<p>"http://example.org/" と "http://example.com/" の両方がマッチします。</p>
<p><code>matches</code> は唯一必須のキーなため、その他の 3 つのキーはそれ以降のマッチ URL の制限に使われます。全体のキーにマッチするために、URL は下記のようでなければなりません:</p>
<ol>
<li> <code>matches</code> プロパティにマッチしている</li>
<li>かつ、<code>include_globs</code> があれば、それにマッチする</li>
<li>かつ、<code>exclude_matches</code> があれば、それにマッチしない</li>
<li>かつ、<code>exclude_globs</code> があれば、それにマッチしない</li>
</ol>
<h3 id="globs">globs</h3>
<p>glob は単にワイルドカードを含むことのある文字列です。ワイルドカードには 2種類あって、glob内に組み合わせることができます:</p>
<ul>
<li>"*" は 0個以上のキャラクターにマッチします</li>
<li>"?" はちょうど 1個のキャラクターにマッチします</li>
</ul>
<p>例えば: <code>"*na?i"</code> は <code>"illuminati"</code> と <code>"annunaki"</code> にマッチし、<code>"sagnarelli"</code> にはマッチしせん</p>
<h2 id="例">例</h2>
<pre class="brush: json no-line-numbers language-json notranslate">"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]</pre>
<p>これは "borderify.js" という 1 つのコンテンツスクリプトを、HTTP か HTTPS のいずれかで配布される、"mozilla.org" かそのサブドメインのページに挿入します。</p>
<pre class="brush: json no-line-numbers language-json notranslate">"content_scripts": [
{
"exclude_matches": ["*://developer.mozilla.org/*"],
"matches": ["*://*.mozilla.org/*"],
"js": ["jquery.js", "borderify.js"]
}
]</pre>
<p>これは 2 つのコンテンツスクリプトを、HTTP か HTTPS のいずれかで配布される、 "mozilla.org" かそのサブドメイン(ただし "developer.mozilla.org" を除く)のページに挿入します。</p>
<p>コンテンツスクリプトは同じ DOM を見て、配列の順番どおりに挿入されます。よって "borderify.js" からは "jquery.js" によって追加されたグローバル変数が見えます。</p>
<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
<p>{{Compat("webextensions.manifest.content_scripts")}}</p>
|
