javascript - 一起使用背景、内容和开发工具进行扩展

Question

我一直在尝试从文档和示例中弄清楚这一点，但目前还不够(或者我可能遗漏了什么？)。

我想创建一个 devtools 面板，但我仍然想像访问内容脚本一样访问被检查窗口的 dom。现在我的选择是在检查窗口的上下文中评估一些东西，但如果我能避免的话，我真的宁愿不这样做。如果我可以将内容脚本与我的 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 页面登录到哪里？

Answer 1

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

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