javascript - 同时使用背景，内容和devtools进行扩展

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

我想创建一个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页面可以登录到哪里？

最佳答案

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

@Konrad Dzwinel的评论对调试devtools很有帮助，并指出该方法实际上应该并且确实有效。谢谢！