aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html')
-rw-r--r--files/zh-cn/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html216
1 files changed, 216 insertions, 0 deletions
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html
new file mode 100644
index 0000000000..9fab86d4b9
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html
@@ -0,0 +1,216 @@
+---
+title: content_scripts
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
+tags:
+ - WebExtensions
+ - 扩展
+ - 附加组件
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
+---
+<p>{{AddonSidebar}}</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+ <tr>
+ <th scope="row" style="width: 30%;">类型</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">
+"content_scripts": [
+ {
+ "matches": ["*://*.mozilla.org/*"],
+ "js": ["borderify.js"]
+ }
+]</pre>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>让浏览器将<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a>加载到匹配网址的网站上</p>
+
+<p>此键（content_scripts）是一个数组，每个项目都是一个满足下列条件的对象：</p>
+
+<ul>
+ <li>
+ <p><strong>必须</strong>包含一个名为<strong><code>matches</code></strong>的键，指定要加载脚本的URL的格式</p>
+ </li>
+ <li>
+ <p><strong>可以</strong>包含一个名为<strong><code>js</code></strong>或<strong><code>css</code></strong>的键，<span>列出要加载到匹配页面的脚本</span></p>
+ </li>
+ <li>
+ <p><strong>可以</strong>包含控制如何加载、何时加载等方面更精细的属性</p>
+ </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" name="all_frames"><code>all_frames</code></a></td>
+ <td><code>Boolean</code></td>
+ <td>
+ <p><code>true</code>: 将<code><a href="#js">js</a></code>和<code><a href="#css">css</a></code>注入该页面所有的框架（frame）中</p>
+
+ <p><code>false</code>: 仅注入到顶层</p>
+
+ <p>默认为false</p>
+ </td>
+ </tr>
+ <tr>
+ <td><a id="css" name="css"><code>css</code></a></td>
+ <td><code>Array</code></td>
+ <td>
+ <p>一个数组，包含将会被注入到匹配页面的CSS文件的路径（路径相对于manifest.json）。</p>
+
+ <p>在加载DOM之前，文件将会按指定的顺序注入。</p>
+ </td>
+ </tr>
+ <tr>
+ <td><a id="exclude_globs" name="exclude_globs"><code>exclude_globs</code></a></td>
+ <td><code>Array</code></td>
+ <td>
+ <div class="geckoVersionNote">Firefox 自48版本开始支持globs</div>
+
+ <p><span class="short_text" id="result_box" lang="zh-CN"><span>包含通配符的字符串数组。</span> <span>请参阅下面的<a href="#Matching_URL_patterns">匹配URL格式</a>。</span></span></p>
+ </td>
+ </tr>
+ <tr>
+ <td><a id="exclude_matches" name="exclude_matches"><code>exclude_matches</code></a></td>
+ <td><code>Array</code></td>
+ <td>一个<a href="/en-US/Add-ons/WebExtensions/match_patterns">match patterns</a>的数组，<span class="short_text" id="result_box" lang="zh-CN"><span>请参阅下面的<a href="#Matching_URL_patterns">匹配URL格式</a>。</span></span></td>
+ </tr>
+ <tr>
+ <td><a id="include_globs" name="include_globs"><code>include_globs</code></a></td>
+ <td><code>Array</code></td>
+ <td>
+ <div class="geckoVersionNote">Firefox 自48版本开始支持globs</div>
+ <span class="short_text" id="result_box" lang="zh-CN"><span>包含通配符的字符串数组。</span> <span>请参阅下面的<a href="#Matching_URL_patterns">匹配URL格式</a>。</span></span></td>
+ </tr>
+ <tr>
+ <td><a id="js" name="js"><code>js</code></a></td>
+ <td><code>Array</code></td>
+ <td>
+ <p>一个数组，包含将会被注入到匹配页面的JS文件的路径（路径相对于manifest.json）。</p>
+
+ <p>文件将会按指定的顺序注入。这意味着如果你想在另一个脚本中包含jQuery，可以这样做：</p>
+
+ <pre class="brush: json">
+<code>"js": ["jquery.js", "my-content-script.js"]</code></pre>
+
+ <p>接下来，<code>"my-content-script.js"</code>可以使用jQuery.</p>
+
+ <p><span class="short_text" id="result_box" lang="zh-CN"><span>文件将在<a href="#run_at">run_at</a>指定的时间注入。</span></span></p>
+ </td>
+ </tr>
+ <tr>
+ <td><a id="matches" name="matches"><code>matches</code></a></td>
+ <td><code>Array</code></td>
+ <td>
+ <p>一个<a href="/en-US/Add-ons/WebExtensions/match_patterns">match patterns</a>的数组，<span class="short_text" id="result_box" lang="zh-CN"><span>请参阅下面的<a href="#Matching_URL_patterns">匹配URL格式</a>。</span></span></p>
+
+ <p><span class="short_text" id="result_box" lang="zh-CN"><span>这是唯一的必须键。</span></span></p>
+ </td>
+ </tr>
+ <tr>
+ <td><a id="run_at" name="run_at"><code>run_at</code></a></td>
+ <td><code>String</code></td>
+ <td>
+ <p>此选项指定在<a href="#js">“js”键</a>中的脚本何时被注入。您可以使用下列的三个字符串之一，每个字符串都代表加载文档过程中的不同状态。状态直接对应于{{domxref("Document/readyState", "Document.readyState")}}：</p>
+
+ <ul>
+ <li>“<code>document_start</code>”：对应于正在加载。 <span>DOM仍在加载中。</span></li>
+ <li>“<code>document_end</code>”：对应于可交互。 <span>DOM已完成加载，但脚本和图像等资源可能仍在加载。</span></li>
+ <li>“<code>document_idle</code>”：对应完成。 <span>文档及其所有资源已完成加载。</span></li>
+ </ul>
+
+ <p>默认值为“document_idle”。</p>
+
+ <p>在所有情况下，<a href="#js">js键</a>中的文件都会在<a href="#css">css键</a>中的文件之后注入。</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="匹配URL格式">匹配URL格式</h2>
+
+<p>“content_scripts”键基于URL匹配将content scripts注入到网页上：如果网页的URL与键中的规则匹配，则将注入脚本。“content_scripts”中有四个属性，可以用于此规则：</p>
+
+<ul>
+ <li><code>matches</code>: 一个关于<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>的数组</li>
+ <li><code>exclude_matches:</code> 一个关于<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>的数组</li>
+ <li><code>include_globs</code>: 一个关于<a href="#globs">globs</a>的数组</li>
+ <li><code>exclude_globs:</code> 一个关于<a href="#globs">globs</a>的数组</li>
+</ul>
+
+<p>要匹配这些属性之一，网址必须与其数组中的至少一个项匹配。例如，指定一个属性：</p>
+
+<pre class="brush: json">"matches": ["*://*.example.org/*", "*://*.example.com/*"]</pre>
+
+<p>"http://example.org/"和"http://example.com/"都将会匹配</p>
+
+<p>由于matches是唯一的强制性键，其他三个键用于进一步限制匹配的URL。要匹配作为一个整体的键，网址必须：</p>
+
+<ol>
+ <li>匹配matches属性</li>
+ <li>并且，匹配include_globs属性（如果有）</li>
+ <li>并且，不匹配<code>exclude_matches</code>属性（如果有）</li>
+ <li>并且，不匹配<code>exclude_globs</code>属性（如果有）</li>
+</ol>
+
+<h3 id="globs">globs</h3>
+
+<div class="geckoVersionNote">Firefox 自48版本开始支持globs</div>
+
+<p>glob只是一个可以包含通配符的字符串。 有两种类型的通配符，您可以在一个glob中组合使用它们：</p>
+
+<ul>
+ <li>"*" 匹配零个或多个字符</li>
+ <li>"?" 匹配一个字符</li>
+</ul>
+
+<p><code>例如，"*na?i"</code>会匹配<code>"illuminati"和</code><code>"annunaki"</code>，但不会匹配<code>"sagnarelli"</code>.</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: json">"content_scripts": [
+ {
+ "matches": ["*://*.mozilla.org/*"],
+ "js": ["borderify.js"]
+ }
+]</pre>
+
+<p>这会将content脚本“borderify.js”插入到“mozilla.org”或其任何子域下的所有页面，无论是HTTP还是HTTPS。</p>
+
+<pre class="brush: json"> "content_scripts": [
+ {
+ "exclude_matches": ["*://developer.mozilla.org/*"],
+ "matches": ["*://*.mozilla.org/*"],
+ "js": ["jquery.js", "borderify.js"]
+ }
+ ]</pre>
+
+<p>这会将两个content脚本插入到“mozilla.org”及其任何子域（除“developer.mozilla.org”外）的所有页面中，无论是通过HTTP还是HTTPS。</p>
+
+<p>content脚本有相同的DOM视图，并按照它们在数组中出现的顺序注入，因此“borderify.js”可以访问由“jquery.js”添加的全局变量。</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</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>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2026-01-28 13:55:53 +0000