title: Detect page changes that'd don't refresh in Chrome Extension Javascript + Clay.js
body: <p><strong>Background</strong></p>
  
  <p>I am trying to write a Google Chrome extension to detect whenever a user scrolls down on Facebook, and if they successfully load a new set of posts, change the icon for one of the reaction options for all posts.  I am using <a href="http://zzarcon.github.io/clay/" rel="nofollow noreferrer">clay.js</a> to detect if the div that contains the Facebook feed has resized, which means more posts have loaded / comments have been posted. <strong>This works fine.</strong></p>
  
  <p><strong>Problem</strong></p>
  
  <p>The problem arises when you <strong>swap between pages on Facebook without refreshing.</strong> For example, if you start on your <strong>Home</strong> page, this will work fine.  However, when you swap to your profile, the script no longer runs, <strong>until you refresh the page.</strong>  Once refreshed, the script works perfectly again.  I know I'm missing something about how my file is being loaded, so my question is: <strong>how do I run my script on every Facebook page, without having to refresh between each type of page?</strong></p>
  
  <p><strong>Relevant Code</strong> (reaction-changer.js)</p>
  
  <pre><code>const fbContentId = "#content"
  
  // on DOM load, watch for future feed scrolling
  document.addEventListener('DOMContentLoaded', checkFeedUpdate(), false);
  
  function checkFeedUpdate(){
      let currFeed = new Clay(fbContentId)
      // resize occurs whenever the user scrolls down or a comment loads
      // on a prexisting post
      currFeed.on('resize', function() {
          switchAllIcons()
      });
  }
  </code></pre>
  
  <p><strong>Manifest</strong> (some elements omitted for simplicity, notated by ...).  change-icons.js is the script that actually changes icons, which will run fine, if the reaction-changer.js script actually runs.</p>
  
  <pre><code>{
      ...
      "version": "1.0",
      "manifest_version": 2,
      "content_scripts": [
          {
              "matches": ["https://www.facebook.com/*"],
              "js": ["extension/clay.js", "change-icons.js", "reaction-changer.js"],
              "all_frames": true
          }
      ],
      "web_accessible_resources": [
          "img/*.png"
      ]
  ...
  
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated!  I've read the Chrome Extension documentation, as well as a bunch of other stack overflow posts, but must have missed a solution somewhere.  </p>