title: Chrome Extension And Dom Capture
body: <p>I created a chrome extension for one of my pages. I'm getting the data in a dom element on the page and querying the api and calling it back. On the site where I get data, the page does not reload when switching between pages. So I can't catch Dom loading or locationchange in foreground.js because the page is not refreshed and i solve my problem by timeout.The dom in foreground.js is only triggered when the page is refreshed. The codes I wrote in settimeout are triggered when switching between pages. How can i solve this problem without timeout?</p>
  <p>background.js CODES</p>
  <pre><code>chrome.tabs.onUpdated.addListener((tabId, changeInfo,tab) =&gt; {
                  if(changeInfo.status == &quot;complete&quot; &amp;&amp; tab.status == &quot;complete&quot;) {
                  chrome.scripting.executeScript({
                      target: {tabId: tabId},
                      files: [&quot;./foreground.js&quot;]
                  })
              }
  });
  </code></pre>
  <p>foreground.js CODES</p>
  <pre><code>document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; { alert('Dom'); }); //not working
  
  window.addEventListener('locationchange', function(){
    console.log('location changed!');
  }) //not working
  
  setTimeout(() =&gt; {
  let find = document.querySelector(&quot;.contentsdetailscontainer&quot;).textContent;
  },1000); //this is working
  </code></pre>