Chrome开发者工具检查窗口变更事件

Question

Google Chrome扩展API提供了chrome.devtools.inspectedWindow，可以提供有关当前打开窗口的信息，但它并不提供更改时的事件。我可能会刷新或重定向页面，并希望添加到DevTools面板中的内容得到通知。是否有这方面的方法？

考虑元素面板，它始终与当前DOM保持最新。要像它那样实时更新可能很难实现，因为每当发生DOM突变时都需要更新，但我至少希望在加载新页面时收到通知（可能在document.onload事件上）。

对于如何实现此操作，您有什么想法吗？谢谢！

- treznik

Answer 1

监听其中一个chrome.webNavigation事件，并在更新发生时向开发工具发送通知。

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

- Rob W

---

是的，这是可能的。我建议添加一个按钮，以便用户可以手动触发您的代码（检查全局变量）。我提供的API链接足以让您开始。如果遇到困难，请告诉我。 - Rob W

好的，我成功地通过后台脚本将chrome.webNavigation.onCompleted处理程序绑定到独立的devtools面板上。目前为止一切顺利，但是我如何从https://developer.chrome.com/extensions/webNavigation.html#event-onCompleted的基本`details`参数中访问该选项卡的全局变量？谢谢。 - treznik

@treznik 你不能直接访问全局变量。只需向开发工具面板发送一条消息，说明页面已经刷新，应重新查找全局变量即可。 - Rob W

那么它们将在哪里被查找？我可以从开发者工具面板访问它们，还是需要将content_scripts混合在一起？ - treznik

@treznik 可以直接使用 chrome.devtools.inspectedWindow.eval 读取。如果您更喜欢在后台页面获取信息，则可以使用 chrome.tabs.executeScript。 - Rob W

Answer 2

我曾经遇到同样的问题，这是我在谷歌上找到的唯一结果，所以我想用我找到的解决方案来回答。关键不在于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来检查状态更改是否发生在当前标签页上。

- Jo Sprague

---

你不能在开发者工具页面使用chrome.tabs代码，这正是OP所询问的地方。我不会给你投反对票，因为显然有些人发现了你的解决方案很有用，但我怀疑他们并没有试图制作一个Devtools面板。 - WORMSS