title: Communication between popup.js and content-script.js throws 'The message port closed before a response was received' in chrome extension
body: <p><code>popup.html</code></p>
  <pre><code>&lt;button id=&quot;go&quot;&gt;Go&lt;/button&gt;
  &lt;script src=&quot;assets/js/popup.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p><code>popup.js</code></p>
  <pre><code>document.getElementById('go').addEventListener('click', async () =&gt; {
    let [tab] = await chrome.tabs.query({active: true, currentWindow: true});
  
    chrome.tabs.sendMessage(tab.id, {go: true}, (response) =&gt; {
      if (!chrome.runtime.lastError) {
        console.log('fine');
      } else {
        // This will print the mentioned error in the console
        console.log(chrome.runtime.lastError);
      }
    });
  });
  </code></pre>
  <p><code>content-script.js</code></p>
  <pre><code>chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) =&gt; {
    // It returns the object correctly // {go: true}
    console.log(request);
    if(request.go) {
      // This causes the error.
      // When I remove this line, `fine` will be printed in the console from the `if` in the `popup.js` file above.
      const go = await chrome.storage.local.get('something');
      console.log(go);
    }
  });
  </code></pre>
  <p>And I have nothing in my <code>background.js</code>.</p>
  <p>The issue is that it returns the error: <code>The message port closed before a response was received</code> when clicking on the start button.</p>
  <p>I have added <code>return true</code> and <code>sendResponse({status: true})</code> either, but didn't work!</p>
  <p>Why do these happen and how to fix them?</p>