chrome.devtools.inspectedWindow 更改事件答案

【问题标题】：chrome.devtools.inspectedWindow change eventchrome.devtools.inspectedWindow 更改事件
【发布时间】：2014-12-09 09:01:49
【问题描述】：

Google Chrome 扩展 API 使用 chrome.devtools.inspectedWindow 提供有关当前打开窗口的信息，但它不提供更改时的事件。我可能会刷新或重定向页面，并且我希望我添加的 DevTools 面板能够收到通知。有这个方法吗？

想想元素面板，它总是与当前的 DOM 保持同步。每当发生 DOM 突变时，为了保持最新状态，这可能很难实现，但我希望至少在加载新页面时得到通知（可能在 document.onload 事件中，为什么不)

关于如何实现这一点的任何想法，谢谢？

【问题讨论】：

标签： google-chrome-extension google-chrome-devtools

【解决方案1】：

在发生更新时收听chrome.webNavigation 事件之一和notify devtools。

检测被检查页面正在卸载的另一种方法是使用chrome.devtools.network.onNavigated 事件（仅在您的 devtools 扩展页面中可用）。

【讨论】：

好的，谢谢你给我指导，这里是对我想要构建的内容的更狭隘的解释，也许你可以为我指出更多正确的 API 方法，因为背景、页面和devtools 脚本可能很棘手。我想根据使用某个 JS 框架的页面中的一些全局变量显示一些统计信息。所以我需要访问我的 devtools 页面中当前打开的页面的运行时 JS 变量。这可能吗？谢谢
是的，这是可能的。我建议添加一个按钮，以便用户可以手动触发您的代码（检查全局变量）。我链接的 API 足以让您入门。遇到困难时告诉我。
好的，我设法通过后台脚本将 chrome.webNavigation.onCompleted 处理程序绑定到独立的 devtools 面板。到目前为止一切都很好，但是我如何从developer.chrome.com/extensions/… 的基本details 参数中获取该选项卡的全局变量？谢谢
@treznik 您不能直接访问全局变量。只需向 devtools 面板发送一条消息，说明页面已刷新，并且应该再次查找全局变量。
@treznik 可以使用chrome.devtools.inspectedWindow.eval 直接读取它们。如果您更喜欢在后台获取信息，也可以使用chrome.tabs.executeScript。

【解决方案2】：

我遇到了同样的挑战，这是我在 Google 中找到的唯一结果，所以我想用我找到的解决方案来回答。关键不在于chrome.devtools.inspectedWindow，而在于chrome.tabs.onUpdated。事实上，我发现chrome.tabs.* 通常更有用。这是我用来观察扩展程序状态变化的代码；

chrome.tabs.onUpdated.addListener(function (tabId, changes, tabObject) {
  console.log("Status of", tabId, "is", changes.status);
  if (changes.status == "complete") {
    console.log("Tab Load Complete");
  }
});

您还可以使用chrome.tabs.* API 来检查当前选项卡上是否发生了状态更改。

【讨论】：

您不能在 OP 要求的 devtools 页面中使用 chrome.tabs 代码。我不会对你投反对票，因为似乎有些人显然发现你的解决方案很有用，但我怀疑他们是否试图制作 Devtools 面板。