title: How to run Chrome extension code repeatedly on infinite scroll pages
body: <p>This is my first Chrome extension.  I am building an extension to replace text on a page.</p>
  
  <p>the provided code works great on anything loaded by DOMContent loaded.  However on pages that use some sort of infinite scrolling, when new content is loaded text replacement doesn't happen.</p>
  
  <p>I need it to run text replacement on any content that is added to the page later.</p>
  
  <p>I have tried to use an onscroll event listener, but that is awkward and costly.  I'm sure there is a better way.</p>
  
  <p>I have looked into using the manifest run_at but haven't been able to find a way to use that.</p>
  
  <pre><code>let elements = document.getElementsByTagName('*');
  let replacements = {
      "first to replace": "new text",
      "second to replace": "also new text"
  };
  let keys = Object.keys(replacements);
  
   RegExp.quote = (str) =&gt; {
       return str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
   };
  
  let makeItAwesomer = () =&gt; {
      for (var i = 0; i &lt; elements.length; i++) {
          var element = elements[i];
  
          for (var j = 0; j &lt; element.childNodes.length; j++) {
              let node = element.childNodes[j];
  
              if (node.nodeType === 3) {
                  let text = node.nodeValue;
                  let newText = text;
  
                  if(keys.some(function(key){ 
                      return ~text.toLowerCase().indexOf(key.toLowerCase());
                  })){
  
                      keys.forEach( key =&gt; {
                          let regex = new RegExp(RegExp.quote(key), "gi");
                          newText = newText.replace(regex, replacements[key]);
                      });
  
                      if (newText != text) {
                          element.replaceChild(document.createTextNode(newText), node);
                      }
                  }
              }
          }
      }
  }
  
  makeItAwesomer();
  </code></pre>