Question

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

我想创建一个devtools面板，但我仍然希望像访问内容脚本那样访问被检查窗口的dom。现在我的选项是在被检查窗口的上下文中的eval，但如果我可以避免它，我真的不想这样做。如果我可以使用内容脚本以及我的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脚本得到的信息很好......我认为发件人的标签名称可以用来从内容脚本发送回来，但事实并非如此。后台脚本获取消息，但devtools页面永远不会将其恢复。

我在确定如何正确调试devtools扩展时遇到了一些麻烦。内容脚本可以登录到页面的控制台，后台脚本会记录到可以从扩展页面检查的后台页面，但devtools页面会在哪里登录？

Answer 1

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

@Konrad Dzwinel的评论非常有助于调试devtools并注意到这个方法实际应该并且确实有效的事实。谢谢！

Answer 2

从2016年（以及Chrome 54+）快速更新任何可能也在努力调试DevTools扩展程序的人：

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

扩展使用背景，内容和开发工具

2 个答案: