Javascript 当Chrome扩展插入元素时，突变观察者不起作用

我想听听Google Translate的Chrome扩展在你双击一个单词时插入了气泡，这样我就可以随时将选择更改为拉丁语

window.latinAlways = function() {
  // Google Translate Select Element
  //var gtse = document.querySelector('#gtx-host').shadowRoot.querySelector('.gtx-lang-selector');

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log(mutation.type);
      if (mutation.type == 'childList') {
        if (mutation.addedNodes.length >= 1) {
          mutation.addedNodes.forEach(function(node) {
            if (node.id == 'gtx-host') {
              // Google Translate Select Element
              var gtse = document.querySelector('#gtx-host').shadowRoot.querySelector('.gtx-lang-selector');
              for (var i = 0; i < gtse.length; i++) {
                if (gtse.children[i].textContent == "Latin") {
                  gtse.options.selectedIndex = i;
                  break;
                }
              }
            }
          });
        }
      }
    });
  });

  // Notify me of everything!
  var observerConfig = {
    childList: true,
    subtree: true
  };

  // Node, config
  // In this case we'll listen to all changes to body and child nodes
  var targetNode = document.body;
  observer.observe(targetNode, observerConfig);
};
window.latinAlways();

问题是，该代码适用于通常的document.body.appendChildel，但不适用于Google Translate插入的translation div！有人知道我做错了什么吗？

这是因为您要查找的节点gtx主机没有作为单独的变体添加，因此MutationRecord只包含外部容器div。您可以通过在调试器中设置断点或记录（例如console.logmutations）来轻松查看它，在这种情况下，这应该是第一件要做的事情

只需查找外部div：

var observer=新突变ObserverFunction突变{ 对于var i=突变。长度-1；i>=0；i-{ var m=突变[i]； var节点=m.addedNodes； 对于var j=nodes.length-1；j>=0；j-{ var n=节点[j]； 如果n.className==jfk气泡gtx气泡{ ....................... ....................... } } } }; observer.observedocument.body，{childList:true}； 注:

由于MutationObserver是作为一个函数执行的，为了不阻塞页面上的其他javascript，它应该非常快，因此通常不应该使用带有回调的数组函数，因为这些函数比生成数千个突变的复杂页面上的简单循环慢得多。 气泡始终添加到document.body，因此不需要递归地观察页面，这自然比只观察一个节点的子列表慢。

---

wOxxOm的回答通常是信息性的，但不正确

添加Div-gtx宿主作为分离突变。为什么不呢

我不知道为什么TS认为他的代码不起作用。下面是我的代码，部分来自wOxxOm答案，部分来自问题，这是工作，至少它将所选选项更改为拉丁语

var observer = new MutationObserver(function(mutations) {
label:
for (var i = mutations.length - 1; i >= 0; i--) {
    var m = mutations[i];
    var nodes = m.addedNodes;
    for (var j = nodes.length - 1; j >= 0; j--) {
        var n = nodes[j];
        if (n.id === "gtx-host") {
            var gtse = document.querySelector('#gtx-host').shadowRoot.querySelector('.gtx-lang-selector');
            for (var i = 0; i < gtse.length; i++) {
            if (gtse.children[i].textContent == "Latin") {
              gtse.options.selectedIndex = i;
              break;
            }
          }
        }
     }
   }
 });

  var config = {
     childList : true,
     subtree : true
  };

observer.observe(target, config);

---

谢谢你发布这个。帮了我很多忙。