path: root/files/zh-cn/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html

---
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>{{Compat("webextensions.manifest.content_scripts")}}</p>