title: Getting "Could not establish connection. Receiving end does not exist." when content script sendResponse to background
body: <p>I wrote a chrome extension, popup js will send a message to background and background will redirect the message to content script, after some network request, the result should be returned to the background and then popup js.</p>
  
  <p>Below are some simplified pieces of my code.</p>
  
  <p>popup js</p>
  
  <pre><code>$('.porintButton').click(function() {
      switch (this.id) {
          case 'learningPointButton':
              chrome.runtime.sendMessage({ action: 'learning' }, callback);
              processResult();
              break;
      }
      return true;
  });
  </code></pre>
  
  <p>backgound js</p>
  
  <pre><code>chrome.runtime.onMessage.addListener((request, sender, sendResponse) =&gt; {
      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
          chrome.tabs.sendMessage(tabs[0].id, request, response =&gt; {
              if (chrome.runtime.lastError) {
                  // If I click learningPointButton, the line will excute, and log 'ERROR:  {message: "Could not establish connection. Receiving end does not exist."}' 
                  console.log('ERROR: ', chrome.runtime.lastError);
              } else {
                  console.log('The Content Script got the following Message: ' + JSON.stringify(response));
                  sendResponse(response);
              }
          });
      });
      return true;
  });
  </code></pre>
  
  <p>content script</p>
  
  <pre><code>chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) =&gt; {
      console.info('contentscript', request, sender);
      switch (request.action) {
          case 'learning':
              // this simulate network async request, will not work, 
              setTimeout(() =&gt; {
                  sendResponse({ action: request.action, result: 'ok' });
              }, 0);
              // this works
              // sendResponse({ action: request.action, result: 'ok' });
              break;
      }
      // I have read https://developer.chrome.com/extensions/messaging#simple and return true here
      return true;
  });
  </code></pre>
  
  <p>If I change the message tunnel to <a href="https://developer.chrome.com/extensions/messaging#connect" rel="noreferrer">the Long-lived connections</a>, it will work, why?</p>