title: Mutation Observer does not work when a Chrome Extension inserts an element
body: <p>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.</p>
  
  <pre><code>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 &gt;= 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 &lt; 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();
  </code></pre>
  
  <p>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?</p>