---
title: 扩展开发人员工具
slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
tags:
  - Add-ons
  - DevTools
  - Guide
  - WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
---
<div>{{AddonSidebar}}</div>

<div class="note">
<p>本页介绍了火狐 Firefox 55中存在的开发工具接口（dectools APIs)。 虽然该接口Api基于 Chrome 开发工具Api，仍有许多功能尚未实现在火狐中实现，因此未记录在本页内容中。产看当前缺失的功能，请参阅链接<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">开发工具Api的限制.</a></p>
</div>

<p>您可以使用WebExtensions API扩展浏览器的内置开发人员工具。要创建devtools扩展，请在manifest.json中包含“ devtools_page”键：</p>

<pre class="brush: json notranslate">"devtools_page": "devtools/devtools-page.html"</pre>

<p>此项的值是指向与您的扩展程序捆绑在一起的HTML文件的URL。该URL应相对于manifest.json文件本身。</p>

<p>HTML文件在扩展中定义了一个特殊页面，称为devtools页面。</p>

<h2 id="devtools页面">devtools页面</h2>

<p>当打开浏览器devtools时，将加载devtools页面，并在关闭浏览器时将其卸载。请注意，由于devtools窗口与单个选项卡相关联，因此很可能同时存在多个devtools窗口-因此有多个devtools页面。</p>

<p>devtools页面没有任何可见的DOM，但可以包含使用&lt;script&gt;标记的JavaScript源。源必须与扩展本身捆绑在一起。来源可以访问：:</p>

<ul>
 <li>可通过全局窗口对象访问的普通DOM API</li>
 <li>与内容脚本中相同的WebExtension API</li>
 <li>The devtools APIs:
  <ul>
   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code></li>
   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.network">devtools.network</a></code></li>
   <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code></li>
  </ul>
 </li>
</ul>

<p>请注意，devtools页面无法访问任何其他WebExtension API，并且后台页面无法访问devtools API。相反，devtools页面和后台页面必须使用运行时消息传递API进行通信。这是一个例子:</p>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script src="devtools.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>devtools.js文件将保存创建您的dev工具扩展的实际代码。</p>

<h2 id="创建面板">创建面板</h2>

<p>devtools窗口中包含许多单独的工具-JavaScript调试器，网络监视器等。顶部的一排标签可让用户在不同的工具之间切换。承载每个工具的用户界面的窗口称为“面板”</p>

<p>使用devtools.panels.create（）API，可以在devtools窗口中创建自己的面板：</p>

<pre class="brush: js notranslate">browser.devtools.panels.create(
  "My Panel",                      // title
  "icons/star.png",                // icon
  "devtools/panel/panel.html"      // content
).then((newPanel) =&gt; {
  newPanel.onShown.addListener(initialisePanel);
  newPanel.onHidden.addListener(unInitialisePanel);
});</pre>

<p>这需要三个必选参数：面板的标题，图标和内容。它返回一个Promise，该Promise解析为代表新面板的devtools.panels.ExtensionPanel对象。</p>

<h2 id="与目标窗口互动">与目标窗口互动</h2>

<p>开发人员工具始终附加到特定的浏览器选项卡。这称为开发人员工具的“目标”或“检查的窗口”。您可以使用devtools.inspectedWindow API与检查的窗口进行交互。</p>

<h3 id="Running_code_in_the_target_window">Running code in the target window</h3>

<p>devtools.inspectedWindow.eval（）提供了一种在检查的窗口中运行代码的方法。</p>

<p>这有点像使用{{WebExtAPIRef("tabs.executeScript()")}}注入内容脚本，但有一个重要区别：</p>

<ul>
 <li>与内容脚本不同，使用devtools.inspectedWindow.eval（）加载的脚本不会获得“ DOM的清晰视图”：也就是说，它们可以看到页面脚本对页面所做的更改。</li>
</ul>

<div class="note">
<p>请注意，DOM的清晰视图是一项安全功能，旨在通过重新定义本机DOM功能的行为来帮助防止恶意页面欺骗扩展。这意味着您需要非常小心地使用eval（），并应尽可能使用普通的内容脚本。</p>
</div>

<p>devtools.inspectedWindow.eval（）加载的脚本也看不到内容脚本定义的任何JavaScript变量。</p>

<h3 id="Working_with_content_scripts">Working with content scripts</h3>

<p>devtools文档无法直接访问{{WebExtAPIRef("tabs.executeScript()")}}，因此，如果需要注入内容脚本，devtools文档必须向后台脚本发送一条消息，要求其注入剧本。 devtools.inspectedWindow.tabId提供目标选项卡的ID：devtools文档可以将其传递给后台脚本，而后台脚本又可以将其传递给{{WebExtAPIRef("tabs.executeScript()")}}：</p>

<pre class="brush: js notranslate">// devtools-panel.js

const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";

window.addEventListener("click", () =&gt; {
  browser.runtime.sendMessage({
    tabId: browser.devtools.inspectedWindow.tabId,
    script: scriptToAttach
  });
});</pre>

<pre class="brush: js notranslate">// background.js

function handleMessage(request, sender, sendResponse) {
  browser.tabs.executeScript(request.tabId, {
    code: request.script
  });
}

browser.runtime.onMessage.addListener(handleMessage);</pre>

<p>如果您需要在目标窗口中运行的内容脚本和devtools文档之间交换消息，则最好使用{{WebExtAPIRef("runtime.connect()")}}和{{WebExtAPIRef("runtime.onConnect()")}}，以在后台页面和devtools文档之间建立连接。然后，后台页面可以维护选项卡ID和{{WebExtAPIRef("runtime.Port")}}对象之间的映射，并使用此映射在两个作用域之间路由消息。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14923/devtools-content-scripts.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 600px;"></p>

<h2 id="devtools_API的局限性">devtools API的局限性</h2>

<p>这些API基于Chrome devtools API，但与Chrome相比，许多功能仍缺失。本节列出了从Firefox 54开始尚未实现的功能。请注意，devtools API正在积极开发中，我们希望在将来的版本中增加对其中大多数功能的支持。</p>

<h3 id="devtools.inspectedWindow">devtools.inspectedWindow</h3>

<p>The following are not supported:</p>

<ul>
 <li><code>inspectedWindow.getResources()</code></li>
 <li><code>inspectedWindow.onResourceAdded</code></li>
 <li><code>inspectedWindow.onResourceContentCommitted</code></li>
</ul>

<p>None of the options to <code>inspectedWindow.eval()</code> are supported.</p>

<p>使用inspectedWindow.eval（）注入的脚本不能使用控制台的所有命令行帮助器功能，但是都支持$ 0和inspect（...）（从Firefox 55开始）。</p>

<h3 id="devtools.panels">devtools.panels</h3>

<p>The following are not supported:</p>

<ul>
 <li><code>panels.elements</code></li>
 <li><code>panels.sources</code></li>
 <li><code>panels.setOpenResourceHandler()</code></li>
 <li><code>panels.openResource()</code></li>
 <li><code>panels.ExtensionPanel.createStatusBarButton()</code></li>
 <li><code>panels.Button</code></li>
 <li><code>panels.ElementsPanel</code></li>
 <li><code>panels.SourcesPanel</code></li>
</ul>

<h2 id="Examples">Examples</h2>

<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repo on GitHub, contains several examples of extensions that use devtools panels:</p>

<ul>
 <li>
  <p><a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/">devtools-panels</a> use devtools panels:</p>
 </li>
</ul>