2

我一直试图从文档和示例中弄清楚这一点，但还不够（或者我可能遗漏了一些东西？）。

我想创建一个 devtools 面板，但我仍然想访问被检查窗口的 dom，就像我在内容脚本中一样。现在我的选择是在检查窗口的上下文中评估某些东西，但如果我可以避免它，我真的宁愿不这样做。如果我可以将内容脚本与我的 devtools 页面/脚本一起使用，那将是个好主意，但它似乎并没有像我期望的那样工作 - 我似乎无法使用背景页面在之间发送消息我的 devtools 页面和我的内容脚本。

此外，有没有办法让那些很酷的 dom 子树像在元素面板或控制台中一样显示，以及令人敬畏的悬停/突出显示功能？

更新

因此，我可以通过转发已检查窗口的选项卡 ID 并将其从我的背景页面中拉出，从面板页面连接到内容脚本。所以我必须这样做

// devtools.js
chrome.extension.sendMessage({ 
    'to': chrome.devtools.inspectedWindow.tabId, 
    'message': 'whatever'
});

和

//background.js
chrome.extension.onMessage.addListener(function(message,sender,callback) {
    message.from = sender.tab.id;
    chrome.tabs.sendMessage(message.to, message, callback);
});

我的 content.js 脚本可以很好地接收到消息……我认为发件人的标签 ID 可以用来从内容脚本发回内容，但事实并非如此。后台脚本会收到消息，但 devtools 页面永远不会收到消息。

我在弄清楚如何正确调试 devtools 扩展方面也遇到了一些麻烦。内容脚本可以登录到页面的控制台，后台脚本可以登录到您可以从扩展页面检查的后台页面，但是 devtools 页面在哪里登录？

4

2 回答 2

0

我最初测试的代码现在可以在 Chrome 26+ 上正常工作......我认为我正在做一些应该有效但当时没有导致我看到的行为的事情。

@Konrad Dzwinel 的评论对调试开发工具非常有帮助，并指出这种方法实际上应该并且确实有效。谢谢！

于 2013-04-28T18:31:19.563 回答
0

只是从 2016 年（和 Chrome 54+）开始的快速更新，适用于任何可能也在努力调试 DevTools 扩展的人：

成功添加自定义 DevTools 窗格并在其中显示 Angular2 应用程序后，我发现该扩展程序未连接到页面 DevTools 控制台和源。按照上面的建议点击页面 DevTools 窗口 F12 不起作用（不知道它是否是 Chrome 本身在我的系统中的一些问题），页面 DevTools 窗口已关闭。但是在 DevTools 窗口页面上按 Ctl+Alt+I 会打开另一个 DevTools 窗口，其中附加了自定义窗格应用程序源和控制台。

于 2016-11-28T17:44:28.940 回答