当现代 web 应用程序更新其内容时，是否会触发 chrome API 事件监听器？

Question

我一直在研究一个 chrome 扩展，它在页面加载时修改页面的 DOM，但是当扩展用于运行 React 或 NextJS（或其他支持这种无缝、非-重新加载导航）。

本质上，我发现的问题是，当我在像 nextjs.org 这样的网站上使用扩展时，它是使用 React 和 NextJS 构建的，我的扩展所做的 DOM 操作会崩溃。 它适用于初始页面加载，但如果我导航到该站点上的另一个页面，页面本身实际上不会重新加载，所以我的扩展程序会崩溃并且不会执行 DOM 操作，即使新内容已加载也是如此。

我的问题是 chrome 的 API 中是否有任何已知的事件监听器，我可以在服务工作者中使用它们来监听这些类型的内容更新（特别是当页面本身没有重新加载时），以便我可以告诉我的扩展程序重置和像重新加载页面一样操作 DOM。

感谢任何帮助，如果需要更多上下文，请告诉我。

Answer 1

没有扩展平台 API 可以满足您的需求，但您可以使用其他几种策略来实现您的目标。

变异观察者

MutationObserver API 让您可以监视 DOM 节点或分支的更改。 使用此界面，您可以观察页面中应用程序主要元素的变化。

资源

• 砸杂志：认识MutationObserver API
• MDN：MutationObserver
• Mozilla Hacks：DOM MutationObserver——在不降低浏览器性能的情况下对 DOM 变化做出反应

历史拦截 API

许多（但不是全部）单页应用程序 (SPA) 使用历史记录API 来使用户的导航历史记录在“导航”单个文档内的链接时保持最新。 浏览器扩展可以利用这一点，通过在document_start将内容脚本注入主世界并填充它感兴趣的方法来对应用内导航做出反应。

// history-shim.js

// IIFE used to help avoid side effects
(function() {
  let originalPushState = window.history.pushState;

  // Use of `rest` is not required here, but helps protect against
  // possible future changes to this method's signature.
  function pushState(state, _unused, url, ...rest) {
    
    // Add your buisness logic to react to a "navigation" here

    // Call the original method on `window.history` and pass through
    originalPushState.call(window.history, state, _unused, url, ...rest);
  }

  window.history.pushState = pushState;
})();

注意：我没有测试上面的代码片段。