Chrome开发工具 扩展 DevTools

'}, '*');// content-script.jswindow.addEventListener('message', function(event) { // Only accept messages from the same frame if (event.source !== window) { return; } var message = event.data; // Only accept messages that we know are ours if (typeof message !== 'object' || message === null || !message.source === 'my-devtools-extension') { return; } chrome.runtime.sendMessage(message);});你的信息现在将从注入脚本，传递到内容脚本，再传递到后台脚本，最后传到 DevTools 页。你也可以在这里参考两种备选消息传递技术。检测 DevTools 打开和关闭状态如果你的插件需要跟踪 DevTools 窗口是否打开，你可以添加一个 onConnect 的监听器到后台页面中，并在 DevTools 页调用 connect 方法。由于每个标签可以让它自己的 DevTools 窗口打开，你可能会收到多个连接的事件。要跟踪 DevTools 窗口何时打开，你需要计算连接事件和断开事件，如下所示：// background.jsvar openCount = 0;chrome.runtime.onConnect.addListener(function (port) { if (port.name == "devtools-page") { if (openCount == 0) { alert("DevTools window opening."); } openCount++; port.onDisconnect.addListener(function(port) { openCount--; if (openCount == 0) { alert("Last DevTools window closing."); } }); }});在 DevTools 页面建立连接，如下：// devtools.js// Create a connection to the background pagevar backgroundPageConnection = chrome.runtime.connect({ name: "devtools-page"});DevTools 插件的例子浏览这些 DevTools 示例源代码：Polymer Devtools Extension- 使用在主机页运行的许多助手，来查询并获取 DOM/ JS 状态，发送回自定义面板。React DevTools Extension - 使用 Bink 的一个子模块来重用 DevTools UI 组件。Ember Inspector - 与 Chrome 和 Firefox 上的适配器，共享插件核心。Coquette-inspect - 一个干净的基于 rect 的插件，调试器被注入到 host 页面。我们的 DevTools Extension Gallery和Sample Extensions是值得安装，试用，并从学习更多的应用程序。