diff options
Diffstat (limited to 'files/zh-cn/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html')
| -rw-r--r-- | files/zh-cn/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/zh-cn/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html new file mode 100644 index 0000000000..cf44f0de27 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html @@ -0,0 +1,164 @@ +--- +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，但可以包含使用<script>标记的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"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + </head> + <body> + <script src="devtools.js"></script> + </body> +</html></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) => { + 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", () => { + 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> |