时间戳

首页 > 解决方案 > 用于同步通知的 MutationObserver 的替代方案

javascript - 用于同步通知的 MutationObserver 的替代方案

问题描述

我需要 DOM 更改的同步通知 la MutationEvents 以获得扩展功能。但是，不推荐使用 MutationEvents。MutationObserver 的用处有限，因为它聚合更改并在更改完成后交付它们的方式。

所以，简单的问题。当前（2019）浏览器扩展中是否可以同步通知元素样式更改？

标签： javascriptgoogle-chrome-extensionfirefox-addon

解决方案

除了您提到的那些之外，没有其他 API。唯一的附加方法是钩子，以及在页面上下文Node.prototype.appendChild中更改 DOM 的其他方法。当然，您还必须挂钩诸如 innerHTML/outerHTML 设置器之类的东西。

重新定义原型方法可能会破坏一些做类似低级事情的网站。
至少从理论上讲，请注意。

这是一个简化的内容脚本，它拦截了一些常用方法：

const eventId = chrome.runtime.id + Math.random().toString(36);
const script = document.createElement('script');
script.textContent = `(${eventId => {
  let reportingEnabled = true;
  // only simple data can be transferred, not DOM elements, not functions, etc.
  const sendReport = detail => dispatchEvent(new CustomEvent(eventId, {detail}));
  const makeHook = (name, fn) =>
    function () {
      if (reportingEnabled) sendReport({name, phase: 'pre'});        
      const res = fn.apply(this, arguments);
      if (reportingEnabled) sendReport({name, phase: 'post'});        
      return res;
    };

  const {appendChild} = Node.prototype;
  Node.prototype.appendChild = 
    Element.prototype.appendChild = makeHook('appendChild', appendChild);

  const {append} = Element.prototype;
  Element.prototype.append = makeHook('append', append);

  const innerHTML = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
  innerHTML.set = makeHook('innerHTML', innerHTML.set);
  Object.defineProperties(Element.prototype, {innerHTML});
}})('${eventId}')`;

document.documentElement.appendChild(script);
script.remove();

window.addEventListener(eventId, e => {
  console.log(e.detail);
});

显然，您需要挂钩所有其他方法，例如 removeChild、insertBefore 等。

DOM 元素不能通过消息从页面上下文传输到内容脚本。只有包含此类类型的字符串、数字、布尔值、null 和数组/对象等琐碎类型是可转移的。但是对于现有的 DOM 元素有一个技巧：您可以传输它的索引[...document.getElementsByTagName('*')].indexOf(element)，然后立即将其用作document.getElementsByTagName('*')[index]. 对于 ShadowDOM，您必须创建一个递归索引器。

推荐阅读