Chrome开发工具 扩展 DevTools

由 珍珍阿姨 创建，Loen 最后一次修改 2016-08-12 扩展 DevTools总览一个 DevTools 插件能增加功能到 Chrome DevTools 中来.它能够增加新的 UI 面板和侧边栏，能与被检查的页面进行通信，能获得关于网络请求的信息，以及其他的功能。详见显式的 DevTools 插件。DevTools 插件能够访问一组额外特定 DevTools 扩展 API:devtools.inspectedWindowdevtools.networkdevtools.panels一个 DevTools 插件的结构像其他插件一样 : 它可以有一个后台页面,内容脚本和其他主体。此外,每个 DevTools 插件有一个 DevTools 页面,能访问到它的 DevTools API。DevTools 页面一个插件 DevTools 页面的实例每次随着 DevTools 窗口打开而被创建。DevTools 页面在 DevTools 窗口生命周期内存在。DevTools 页面能访问 DevTools API 和有限的一组扩展 API。具体来说，DevTools 页面可以:通过 devtools.panels 创建面板并与面板交互。获取检查窗口的信息、在检查窗口使用 devtools.inspectedWindow API 测试代码。使用 devtools.network API 获取。DevTools 页面不能直接使用大多数的扩展 API。它可以访问扩展并运行着的 API 子集，因为这些 API 的内容脚本可以被访问到。像一个内容脚本一样,一个 DevTools 页面可以使用 消息传递（Message Passing）与后台页面交互，详见注入内容脚本 Message Passing。创建一个 DevTools 插件为你的插件创建一个 DevTools 页面，在插件的注册清单文件中添加 devtools_page域：{ "name": ... "version": "1.0", "minimum_chrome_version": "10.0", "devtools_page": "devtools.html", ...}每个 DevTools 窗口被打开时，在插件清单中指定的 devtools_page 的实例都会被创建。该页面可以使用 devtools.panels API 添加其它扩展程序的网页，作为面板和侧边栏到 DevTools 窗口。devtools_page 域必须指向一个 HTML 页面。这与 background 域不同， background 域用来具体一个后台页面，能让你直接指定 JavaScript 文件。chrome.develop.* API 模型只能在载入了 DevTools 窗口的页面使用。内容脚本和其他扩展页面并没有这些 API 。因此，这些 API 只有在 DevTools 窗口生命周期内才能使用。也有一些 DevTools 的 API 仍然是在测试状态。请参阅 chrome.experimental.* API，例举了用于测试的 API 和如何使用它们的指南。DevTools 界面元素：面板和侧边栏窗格除了常用扩展 UI 元素，如浏览器的行为，文本菜单和弹出窗口，一个 DevTools 插件可以添加 UI 元素到 DevTools 窗口：面板是一个顶级标签，像元素（Elements），源（Sources）和网络（Network）板。侧边栏窗格 显示补充 UI 相关的面板。固有样式，设定的样式以及元素 (Elements) 面板上的事件监听器窗格的都是侧边栏窗格的实例。目前你的插件只能在元素 (Elements) 面板加侧边栏窗格。 （请注意，侧边栏面板的外观可能与图像不匹配，这取决于你正在使用 Chrome 浏览器的版本和其中 DevTools 窗口停靠的位置。）每个面板都是其自身的 HTML 文件，可以包括其它资源（JavaScript，CSS，图片，等等）。像这样创建一个基本的面板：chrome.devtools.panels.create("My Panel", "MyPanelIcon.png", "Panel.html", function(panel) { // code invoked on panel creation });在面板上或者在侧边栏窗格中执行的 JavaScript 对象能访问 DevTools 页面有权访问的 API。如下，为元素面板创建一个基础的侧边窗格，像这样：chrome.devtools.panels.elements.createSidebarPane("My Sidebar", function(sidebar) { // sidebar initialization code here sidebar.setObject({ some_data: "Some data to show" });});有几种方法来显示一个侧边栏窗格中的内容：利用HTML 文档。调用 setPage 指定一个 HTML 页面在窗格中显示。利用 JSON 数据。传递一个JSON 对象给 setObject方法。利用 JavaScript 表达式。传递一个表达式给 setExpression方法。 DevTools 在被检查页面的文档中的执行表达，并输出该返回值。对于这两种方法 setObject和setExpression，当他们它输入进 DevTools 控制台后，窗格会输出该值，但是，setExpression可以显示 DOM 元素和任意 JavaScript 对象，而 setObject 只支持 JSON 对象。插件组件之间的通信下面的部分描述了 DevTools 插件的不同组件之间通信的一些典型场景。注入脚本内容该 DevTools 页不能直接调用tabs.executeScript。为了从 DevTools 页面注入内容脚本，必须使用inspectedWindow.tabId属性检索的检查窗口选项卡的 ID ，并且发送一个消息到后台页面。在后台页面，调用 tabs.executeScript 注入脚本。如果内容脚本已经被注入，你可以使用 eval方法来添加其他内容脚本。请参见传递选定元素为内容脚本（Passing the Selected Element to a Content Script ） 以获取更多信息。下面的代码片段展示了如何使用 executeScript 注入一个脚本内容：// DevTools page -- devtools.js// Create a connection to the background pagevar backgroundPageConnection = chrome.runtime.connect({ name: "devtools-page"});backgroundPageConnection.onMessage.addListener(function (message) { // Handle responses from the background page, if any});// Relay the tab ID to the background pagechrome.runtime.sendMessage({ tabId: chrome.devtools.inspectedWindow.tabId, scriptToInject: "content_script.js"});后台页面的代码：// Background page -- background.jschrome.runtime.onConnect.addListener(function(devToolsConnection) { // assign the listener function to a variable so we can remove it later var devToolsListener = function(message, sender, sendResponse) { // Inject a content script into the identified tab chrome.tabs.executeScript(message.tabId, { file: message.scriptToInject }); } // add the listener devToolsConnection.onMessage.addListener(devToolsListener); devToolsConnection.onDisconnect(function() { devToolsConnection.onMessage.removeListener(d