在 chrome 扩展中检测来自现代 JS 框架的页面加载答案

【问题标题】：Detecting page load from modern JS frameworks in chrome extension在 chrome 扩展中检测来自现代 JS 框架的页面加载
【发布时间】：2017-01-19 17:10:01
【问题描述】：

我正在尝试在使用 Ember.js 编写的网站上更新我的 chrome 扩展（使用 react 编写）

页面重新加载时是否触发了事件？我还没有找到一个... 我正在考虑从 chrome utils 监听 tabUpdate 事件以检查 URL 是否更改。但是如果 url 没有改变呢？

我无法监听 dom 更改事件，页面不断变化，我不希望我的扩展重新加载太多。

【问题讨论】：

使用页面全局上下文中公开的Ember 对象订阅您想要的事件？你需要一个DOM-injected script for that
您是在询问您当前的内容脚本上下文是否被破坏，并且需要重新加载（即使用tabs.executeScript() 时），还是您是否在询问您的内容脚本上下文继续存在的 DOM 变化存在？你说的是后台页面看到的事件，还是已经注入的内容脚本看到的事件？
我说的是页面重新加载时的回调。也许解决方案是使用网站的 Ember 对象，但它不适用于其他框架。我的问题是：如何知道我的扩展程序何时必须重新加载（页面更改或 url 更改等）

标签： javascript angularjs reactjs ember.js google-chrome-extension

【解决方案1】：

我现在发现的最好的方法是用 chrome 监听标签的变化。

我将 React 与 Redux 一起使用。

listener.js（在后台脚本中）

export function listenTabReload() {
  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
      if (changeInfo.url)
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
          chrome.tabs.sendMessage(tabs[0].id, { reload: true });
        });
    }
  );
}

App.jsx（在内容脚本中）

componentWillMount() {
  chrome.runtime.onMessage.addListener(this.reloadApp);
}

reloadApp = (request) => {
  if (request.reload)
    this.setState({ version: new Date() }); // Stub state to re render components
};

【讨论】：