title: Chaining two XHR calls using chrome.runtime.sendMessage
body: <p>I have a Chrome Extension and I'm refactoring my XHR calls in to the background script to be accessed via messaging as per the <a href="https://www.chromium.org/Home/chromium-security/extension-content-script-fetches" rel="nofollow noreferrer">new requirements with Chrome 73</a> and up for providing XHR data to content scripts. I have two XHR calls - the first grabs the data, and the second XHR call uses a value returned from the first as part of it's query.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// background.js
  // First Call
  chrome.runtime.onMessage.addListener(
    (request, sender, sendResponse) =&gt; {
      if (request.contentScriptQuery === 'getProductData') {
        let dataUrl = C.API(request.term);
        $.ajax({
          url: dataUrl,
          type: 'get',
          mode: 'no-cors',
          dataType: 'json',
        }).then(response =&gt; response)
          .then(text =&gt; sendResponse(text))
          .catch(err =&gt; console.log(err));
        return true;
      }
    });
  
  // Second Call
  chrome.runtime.onMessage.addListener(
    (request, sender, sendResponse) =&gt; {
      if (request.contentScriptQuery === 'getProductGroupData') {
        const dataUrl = C.PRODUCT_GROUPS_API(request.term);
        $.ajax({
          url: dataUrl,
          type: 'get',
          mode: 'no-cors',
          dataType: 'json',
        })
          .then(response =&gt; response)
          .then(text =&gt; sendResponse(text))
          .catch((err) =&gt; {
            console.log(err);
          });
        return true;
      }
    });</code></pre>
  </div>
  </div>
  </p>
  
  <p>In my React component, I have a method that calls these methods. In the first msg, I assign the returned data to state values. This is working as expected. However, the second msg isn't sent, and even just swapping in a log statement I can't seem to get it to fire.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Content Script
  // React component. fetchData() called from inside componentDidMount()
  fetchData() {
      chrome.runtime.sendMessage(
        { contentScriptQuery: 'getProductData', type, term: searchTerm },
        text =&gt;
          this.setState({
            // assign values from returned data
            superCategoryId: text.content[0].productGroupHierarchy.superCategoryId,          
          }),
      );
    
      chrome.runtime.sendMessage(
        { contentScriptQuery: 'getProductGroupData', term: this.state.superCategoryId },
        text =&gt;
          this.setState({
              // assign values from returned data
          }),
      );
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there some restriction on having multiple msgs sent to a listener in the background script? The first XHR call and msg returns data, the second one does not seem to execute at all (I've swapped out the return msg with a console statement and that doesn't return either.</p>