扩展使用背景，内容和devtools在一起 [英] extension using background, content and devtools together

问题描述

我一直试图从文档和样本中弄清楚这一点，但那里还没有足够的（或者我错过了什么？）。

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

另外，有没有办法让这些酷dom子树显示，就像它们在元素面板或控制台中一样显示真棒悬停/高亮功能？
$ b

更新

所以我可以连接到通过转发检查窗口的选项卡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非常有帮助，并指出这种方法实际上应该并且确实有效。谢谢！

I've been trying to figure this out from the docs and samples but there just isn't enough there yet (or maybe I'm missing something?).

I want to create a devtools panel but I still want access to the inspected window's dom like I get in content scripts. Right now my option is eval something in the context of the inspected window, but i would really rather not do that if I can avoid it. If I can just use a content script along with my devtools page/scripts that would be idea, but it doesn't seem to be working like I expect that it should - i can't seem to use the background page to send messages between my devtools page and my content script.

Also, is there a way to get those cool dom subtrees to display like they do in the elements panel or in the console along with the awesome hover/highlight feature?

UPDATE

So I can connect to the content script from the panel page by forwarding the tab id of the inspected window and pulling that out in my background page. So I have to do this

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

and

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

And my content.js script gets the message just fine ... and i thought that the sender's tab id would work to send things back from the content script, but it doesn't. The background script gets the message but the devtools page never gets it back.

I'm having a bit of trouble figuring out how to properly debug devtools extensions as well. The content script can log to the page's console and the background script logs to the background page that you can inspect from the extensions page, but where does the devtools page log to?

解决方案

The code I was originally testing works fine now with Chrome 26+ ... I think I was doing something that should have worked but didn't at the time that caused the behavior I was seeing.

@Konrad Dzwinel's comment was very helping on debugging devtools and noting that fact that this method actually should and does work. Thanks!

这篇关于扩展使用背景，内容和devtools在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！