title: Firefox webextension Error: Could not establish connection. Receiving end does not exist
body: <p>I am trying to send a variable from a background script to a content script that is associated with an HTML page. The content script updates the HTML content with the variable received from the background script. </p>
  
  <p>The problem is that I am getting this error message:</p>
  
  <pre><code>Error: Could not establish connection. Receiving end does not exist.
  </code></pre>
  
  <p>The background script <code>main.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>var target = "&lt;all_urls&gt;";
  function logError(responseDetails) {
    errorTab = responseDetails.tabId;
    console.log("Error tab: "+errorTab);
  
    errorURL = responseDetails.url;
    console.log("Error URL: "+errorURL);
  
    //send errorURL variable to content script
    var sending = browser.tabs.sendMessage(errorTab, {url: errorURL})
      .then(response =&gt; {
        console.log("Message from the content script:");
        console.log(response.response);
      }).catch(onError);
  
    //direct to HTML page
    browser.tabs.update(errorTab,{url: "data/error.html"});
  }//end function
  
  browser.webRequest.onErrorOccurred.addListener(
    logError,
    {urls: [target],
    types: ["main_frame"]}
  );
  </code></pre>
  
  <p>The <code>error.html</code> is:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    The error received is &lt;span id="error-id"&gt;&lt;/span&gt;
    &lt;script src="content-script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The <code>content-script.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>//listen to errorURL from the background script.
  browser.runtime.onMessage.addListener(request =&gt; {
    console.log("Message from the background script:");
    console.log(request.url);
    return Promise.resolve({response: "url received"});
  }); //end onMessage.addListener
  
  //update the HTML &lt;span&gt; tag with the error
  document.getElementById("error-id").innerHTML = request.url;
  </code></pre>
  
  <p>The <code>manifest.json</code>:</p>
  
  <pre class="lang-json prettyprint-override"><code>{
    "manifest_version": 2,
    "name": "test",
    "version": "1.0",
    "background": {
      "scripts": ["main.js"]
    },
  
    "content_scripts": [
      {
        "matches": ["&lt;all_urls&gt;"],
        "js": ["webextension/data/content-script.js"]
      }
    ],
  
    "permissions": [
      "&lt;all_urls&gt;",
      "activeTab",
      "tabs",
      "storage",
      "webRequest"
    ]
  }
  </code></pre>