Chrome开发工具 扩展 DevTools

evToolsListener); });}在检查窗口测试 JavaScript 代码你可以使用 inspectedWindow.eval 方法在检查页面的上下文中执行 JavaScript 代码。然后你可以在DevTools页，面板或侧边栏窗格中调用 eval 方法。默认情况下，表达式在页面的主框架文档中被计算。现在，你可能熟悉 DevTools 命令行API（commandline API) 功能像元素检查（inspect(elem)）， 函数中断（debug(fn)），复制内容到剪贴板（copy()） ，或许更多。inspectedWindow.eval() 使用相同的脚本执行上下文,在 DevTools 控制台的选项输入代码，它允许使在测试范围内访问这些 API。例如，SOAK 使用它来检测一个元素： chrome.devtools.inspectedWindow.eval( "inspect($$('head script[data-soak=main]')[0])", function(result, isException) { } );或者，使用 inspectedWindow.eval() 的 useContentScriptContext：true 选项，以计算在和内容脚本相同的上下文内容中的表达式。在 useContentScriptContext:true 域调用 eval 不会创建内容脚本的环境，所以你必须在调用 evel 之前，载入内容脚本,或者通过在 manifest.json 文件中指定内容脚本来调用执行脚本（executeScript）。一旦上下文文脚本内容环境存在，你可以使用此选项来注入额外的内容脚本。eval方法是强大的当它在正确的应用情景中使用的时候，但，如果没有被正确使用，它同样也是危险的。如果你不需要获取检查页的 JavaScript 的内容，使用 tabs.executeScript 方法。有关详细的注意事项和两种方法的比较，请参阅 inspectedWindow。传递选定元素到内容脚本内容脚本不能直接访问当前选中的元素。但是，任何使用 inspectedWindow.eval 来执行的代码都可以在 DevTools 控制台和命令行的 API 中使用。例如，在测试代码时，你可以使用 $0 访问当前被选定的元素。要传递选中的元素到内容脚本，可以如下完成：在内容脚本中，创建一个函数，将选定参数作为这个函数的参数。在 DevTools 页面中使用在useContentScriptContext:true的选项中的inspectedWindow.eval来该函数方法。在内容脚本中你的函数代码可能是这个样子：function setSelectedElement(el) { // do something with the selected element}在 DevTools 页面调用这个方法，像这样：chrome.devtools.inspectedWindow.eval("setSelectedElement($0)", { useContentScriptContext: true });useContentScriptContext：true 选项限定的是表达必须在相同的上下文中的内容脚本中进行计算，所以它可以使用setSelectedElement方法。获得一个参考板的窗口从 devtools 面板 postMessage ，你需要它的 window对象的一个参考。获取面板的 iframe 窗口从该 panel.onShown 事件处理程序;onShown.addListener(function callback)extensionPanel.onShown.addListener(function (extPanelWindow) { extPanelWindow instanceof Window; // true extPanelWindow.postMessage( // …});从内容脚本传递信息到 DevTools 页面在 DevTools 页面和内容脚本之间传递消息并不是直接的，而是通过后台页面。当将消息发送到内容脚本，后台页面可以使用 tabs.sendMessage 方法，该方法在指定的选项卡中发送消息到内容脚本，就如同注入一个内容脚本。当从内容脚本发送消息出来，也没有现成的方法来传递消息到与当前选项卡相关联的确切的 DevTools 页面的实例。作为一种变通方法，你可以让 DevTools 页面与后台页面建立长生命周期的连接，并让后台页持有 ID 选项卡到连接的映射，这样它可以路由的每条消息到正确连接处。// background.jsvar connections = {};chrome.runtime.onConnect.addListener(function (port) { var extensionListener = function (message, sender, sendResponse) { // The original connection event doesn't include the tab ID of the // DevTools page, so we need to send it explicitly. if (message.name == "init") { connections[message.tabId] = port; return; } // other message handling } // Listen to messages sent from the DevTools page port.onMessage.addListener(extensionListener); port.onDisconnect.addListener(function(port) { port.onMessage.removeListener(extensionListener); var tabs = Object.keys(connections); for (var i=0, len=tabs.length; i < len; i++) { if (connections[tabs[i]] == port) { delete connections[tabs[i]] break; } } });});// Receive message from content script and relay to the devTools page for the// current tabchrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { // Messages from content scripts should have sender.tab set if (sender.tab) { var tabId = sender.tab.id; if (tabId in connections) { connections[tabId].postMessage(request); } else { console.log("Tab not found in connection list."); } } else { console.log("sender.tab not defined."); } return true;});DevTools 页面(面板或侧边栏窗格)像这样建立连接：// Create a connection to the background pagevar backgroundPageConnection = chrome.runtime.connect({ name: "panel"});backgroundPageConnection.postMessage({ name: 'init', tabId: chrome.devtools.inspectedWindow.tabId});从注入脚本到 DevTools 页通信虽然上述的解决方案适用于内容脚本，即直接注入页面代码（例如通过附加一个 script 标签或通过 inspectedWindow.eval）需要一个不同的策略。在这方面，runtime.sendMessage 不会如预期一样向后台脚本传递消息。作为一种变通方法，你可以将内容脚本和注入脚本结合起来。将消息传递给内容脚本，你可以使用 API window.postMessage。这里有一个例子，假设后台脚本是上一节中的：// injected-script.jswindow.postMessage({ greeting: 'hello there!', source: 'my-devtools-extension