解决现有MutationObserver以使用Tampermonkey插入DOM元素

Question

我写了一个Tampermonkey脚本，将一些DOM元素注入我用于工作的网站，使导航更容易。它不再有效，因为供应商推出了MutationObserver，可能是为了阻止像我这样的人这样做。为什么，我不知道。我没有做任何邪恶的事情。

我知道这就是正在发生的事情，因为我可以看到我的DOM元素短暂出现然后消失。它们不再位于DOM树中，并且站点的JS包含MutationObserver的代码：

// this is a property of a large object
value: function() {
  var e = this
  if (this._options.shouldContainFocus) {
    this._observer = new MutationObserver(this.handleDOMMutation)
    for (var t = this._contextElement; t && 1 === t.nodeType && "BODY" !== t.tagName;) {
      var n = t.parentElement
      if (n) {
        this._parents.push(n)
        this.muteNode(n)
        Array.prototype.slice.call(n.childNodes).forEach(function(t) {
          e.hideNode(t)
        })
      }
      t = t.parentNode
    }
  }
}

// this is what is called by the MutationObserver
this.handleDOMMutation = function(e) {
  e.forEach(function(e) {
    Array.from(e.addedNodes).forEach(function(e) {
      n.hideNode(e)
    })
    e.removedNodes.forEach(function(e) {
      var t = n._nodes.indexOf(e)
      t >= 0 && n._nodes.splice(t, 1)
    })
  })
}

所以我的问题是......如果可以的话，我怎么能解决这个问题呢？我能想到的只是访问MutationObservers的一些全局列表，但这似乎不是我能读到的（我直到今天才听说过这个API）。观察者变量不是我可以通过unsafeWindow访问的变量，所以我不能调用disconnect方法。我已经阅读了关于MutationObservers的文档，但找不到任何可以帮助我的东西。有什么建议？

Answer 1

正如评论中所提到的，这是在文档加载之前覆盖window.MutationObserver的可能方法。因为MutationObserver被称为构造函数，为了使站点的脚本不会抛出错误，请确保让monkeypatched MutationObserver可以作为构造函数调用。然后，由于实例化对象可以有调用它的方法（如observe和disconnect），您可能会返回一个Proxy，当访问属性（如observer）时，返回一个可调用但不执行任何操作的函数。例如：

const div = document.querySelector('div');
window.MutationObserver = function() {
  return new Proxy({}, { get: () => () => null })
};

new MutationObserver(() => {
  console.log('saw a mutation');
}).observe(div, { childList: true });
div.appendChild(document.createElement('span')).textContent = 'bar';

<div>foo</div>

如果在网站脚本运行之前发生了window.MutationObserver的初始重新分配，那么对new MutationObserver的调用将返回不执行任何操作的观察者。 （正如您在上面的代码中看到的，如果删除window.MutationObserver的重新分配，您将看到记录的'saw a mutation'，而在monkeypatching之后，没有记录任何内容。）

因此，将其转换为用户脚本，粘贴window.MutationObserver重新分配，并确保用户脚本在document-start上运行，以便脚本在站点的内置脚本运行之前运行。如果您还希望在自己的代码中使用MutationObserver，请在重新分配之前保存对window.MutationObserver的引用：

// ==UserScript==
// @name         New Userscript
// @match        https://somewhere
// @run-at       document-start
// ==/UserScript==

const oldMutationObserver = window.MutationObserver;
window.MutationObserver = function() {
  return new Proxy({}, { get: () => () => null })
};

如果您所在的站点依赖于MutationObserver属性和函数来返回合理的值（如takeRecords()），那么您可能会返回一个代理，该代理可以访问Proxy的实际实例，当时在它上面调用MutationObserver，观察一个不同的元素（一个从未变异的元素）：

observe

// Userscript code:

const oldMutationObserver = window.MutationObserver;
const elementThatIsNeverMutated = document.createElement('div');
window.MutationObserver = function(callback) { // callback should never be called
  const observer = new oldMutationObserver(callback);
  return new Proxy(observer, { get: (obj, prop) => {
    if (prop === 'observe') return (targetNode, config) => {
      obj.observe.call(obj, elementThatIsNeverMutated, config);
    };
    const val = obj[prop];
    return typeof val === 'function' ? val.bind(obj) : val;
  }})
};

// Example of site's built-in code:

const div = document.querySelector('div');
const observer = new MutationObserver(() => {
  console.log('saw a mutation');
});
observer.observe(div, { childList: true });
div.appendChild(document.createElement('span')).textContent = 'bar';
const arr = observer.takeRecords();
arr.forEach(() => console.log('some item in array'));