title: Chrome Extension API Calls order and DOM Information
body: <p>I'm working on an extension that is supposed to extract information from the DOM based specific classes/tags,etc, then allow the user to save the information as a CSV file.</p>
  <p>I'm getting stuck on a couple of places and haven't been able to find answers to questions similar enough.</p>
  <p><br><br>
  Where I am tripped up at is:<br>
  <strong>1) Making sure that the page has completely loaded so the chrome.tabs.query doesn't return null a couple of times before the promise actually succeeds and allows the blocksF to successfully inject.</strong> I have tried placing it within a settimeout function but the chrome api doesn't seem to work within such the function.<br><br></p>
  <p><strong>2) Saving the extracted information so when the user moves onto a new page, the information is still there.</strong> I'm not sure if I should use the chrome.storage api call or simply save the information as an array and keep passing it through. It's just text, so I don't believe that it should take up too much space.
  <br><br>
  Then main function of the background.js is below. <br></p>
  <pre><code>let mainfunc = chrome.tabs.onUpdated.addListener(
  async(id, tab) =&gt; {
  
      if (buttonOn == true) {
  
          let actTab = await chrome.tabs.query({
              active: true,
              currentWindow: true,
              status: &quot;complete&quot;
          }).catch(console.log(console.error()));
          if (!actTab) {
              console.log(&quot;Could not get URL. Turn extension off and on again.&quot;);
          } else {
              console.log(&quot;Tab information recieved.&quot;)
          };
  
          console.log(actTab);
  
          let blocksF = chrome.scripting.executeScript({
                  target: { tabId: actTab[0]['id'] },
                  func: createBlocks
              })
              .catch(console.error)
          if (!blocksF) {
              console.log(&quot;Something went wrong.&quot;)
          } else {
              console.log(&quot;Buttons have been created.&quot;)
          };
  
          /*
          Adds listeners and should return value of the works array if the user chose to get the information
          */
          let listenersF = chrome.scripting.executeScript({
                  target: { tabId: actTab[0]['id'] },
                  func: loadListeners
              })
              .catch(console.error)
          if (!listenersF) {
              console.log(&quot;Listeners failed to load.&quot;)
          } else {
              console.log(&quot;Listeners loaded successfully.&quot;)
          };
          console.log(listenersF)
      };
  
  });
  </code></pre>
  <p>Information from the DOM is extracted through an event listener on a div/button that is added. The event listener is added within the loadListeners function.</p>
  <pre><code>let workArr = document.getElementById(&quot;getInfo&quot;).addEventListener(&quot;click&quot;, () =&gt; {
  
      let domAr = Array.from(
          document.querySelectorAll(&lt;class 1&gt;, &lt;class 2&gt;),
          el =&gt; {
              return el.textContent
  
          }
      );
  
      let newAr = []
      for (let i = 0; i &lt; domAr.length; i++) {
          if (i % 2 == 0) {
              newAr.push([domAr[i], domAr[i + 1]])
          }
      }
  
  
      newAr.forEach((work, i) =&gt; {
          let table = document.getElementById('extTable');
          let row = document.createElement(&quot;tr&quot;);
          row.appendChild(document.createElement(&quot;td&quot;)).textContent = work[0];
          row.appendChild(document.createElement(&quot;td&quot;)).textContent = work[1];
          table.appendChild(row);
      });
  
      return newAr
  </code></pre>
  <p>I've been stuck on this for a couple of weeks now. Any help would be appreciated. Thank you!</p>