title: Chrome Extension "Receiving end does not exist." Error
body: <p>I'm working on a Chrome Extension but lately I've noticed I've been getting the following error (pointing to the first line of <code>popup.html</code>):</p>
  
  <blockquote>
    <p>Unchecked runtime.lastError: Could not establish connection. Receiving
    end does not exist.</p>
  </blockquote>
  
  <p>I've found a similar question <a href="https://stackoverflow.com/questions/9106519/port-error-could-not-establish-connection-receiving-end-does-not-exist-in-chr">here</a>. But the error there is caused by the <code>background</code> property which I haven't declared on my manifest. </p>
  
  <p>I'm using <code>chrome.extension.onMessage.addListener</code> on the <code>contents.js</code> script to listen for events and <code>chrome.tabs.sendMessage</code> on the <code>popup.js</code> script to send the events. Most of the time everything works fine, but sometimes I get the above error and none of the requests do anything.</p>
  
  <p>The <code>manifest.json</code> is of the following format:</p>
  
  <pre><code>{
      "manifest_version": 2,
      "name": "APP_NAME",
      "description": "APP_DESCRIPTION",
      "version": "APP_VERSION",
      "browser_action": {
          "default_icon": "icon.png",
          "default_popup": "popup.html"
      },
      "permissions": [
          "activeTab",
          "storage",
          "clipboardRead",
          "clipboardWrite"
      ],
      "content_scripts": [
          {
              "matches": [
                  "&lt;all_urls&gt;"
              ],
              "js": [
                  "content.js"
              ],
              "css": [
                  "content.css"
              ]
          }
      ]
  }
  </code></pre>
  
  <h2>Message Listener Example:</h2>
  
  <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>chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.action === "this") console.log({
      dom: doThis()
    });
    if (request.action === "that") sendResponse({
      dom: doThat()
    });
    else if (request.action === "other") doOther();
    else sendResponse({});
  });</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Message Sender Example:</h2>
  
  <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>function getSelectedTab() {
    return new Promise(function(resolve) {
      chrome.tabs.getSelected(null, resolve);
    });
  }
  
  function sendRequest(data) {
    data = data || {
      action: undefined
    };
    return new Promise(function(resolve) {
      getSelectedTab().then(function(tab) {
        chrome.tabs.sendMessage(tab.id, data, resolve);
      });
    });
  }</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Send Request Invocation Example:</h2>
  
  <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>document.querySelector("#this").addEventListener("click", function() {
    sendRequest({
      action: "this"
    }).then(function(res) {
      console.log(res);
    });
  });
  
  document.querySelector("#that").addEventListener("hover", function() {
    sendRequest({
      action: "that"
    });
  });
  
  addEventListener("blur", function() {
    sendRequest({
      action: "other"
    });
  });</code></pre>
  </div>
  </div>
  </p>