Mutation Observer does not work when a Chrome Extension inserts an element

Question

I'm trying to listen to when Google Translate's Chrome Extension inserts the bubble when you double click on a word so that I can always change the selection to Latin.

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();

Issue is, the code works for the usual document.body.appendChild(el), but not for Google Translate's insert of the translation div! Anyone know what I'm doing wrong?

Thank you for posting this. Helped me a lot. – Yuriy N. Sep 23 '16 at 11:21 — Yuriy N., Sep 23 '16 at 11:21

Yuriy N. · Answer 1 · 2016-09-23T13:59:12.643

wOxxOm's answer is generally informative, but incorrect.

Div #gtx-host IS added as separated mutation. Why not?

I don't know why TS thinks that his code is not work. Below is my code (partly taken from wOxxOm answer, partly from question) and it is work (at least it changes selected option to be latin).

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);

score 0 · Answer 2 · edited May 23 '17 at 12:19

That's because the node #gtx-host you're looking for isn't added as a separate mutation, so the MutationRecord contains only the outer container div. You can easily see it by setting a breakpoint in the debugger or logging e.g. console.log(mutations), which should always be the first thing to do in such cases.

Simply look for the outer div:

var observer = new MutationObserver(function(mutations) {
    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.className === "jfk-bubble gtx-bubble") {
                .......................
                .......................
            }
        }
    }
});

observer.observe(document.body, {childList:true});

Notes:

Since MutationObserver is executed as a microtask it should be extremely fast in order not to block other javascript on the page, so generally you should not use Array functions with callbacks as those are much slower than simple loops on complex pages that generate thousands of mutations.
The bubble is always added to document.body thus there's no need to observe the page recursively, which is naturally slower than observing child list of only one node.

Mutation Observer does not work when a Chrome Extension inserts an element

2 Answers2