OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Firefox webextension Error: Could not establish connection. Receiving end does not exist

  • Thread starter Thread starter user6875880
  • Start date Start date
U

user6875880

Guest
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.

The problem is that I am getting this error message:

Code:
Error: Could not establish connection. Receiving end does not exist.

The background script main.js:

Code:
var target = "<all_urls>";
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 => {
      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"]}
);

The error.html is:

Code:
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  The error received is <span id="error-id"></span>
  <script src="content-script.js"></script>
</body>
</html>

The content-script.js:

Code:
//listen to errorURL from the background script.
browser.runtime.onMessage.addListener(request => {
  console.log("Message from the background script:");
  console.log(request.url);
  return Promise.resolve({response: "url received"});
}); //end onMessage.addListener

//update the HTML <span> tag with the error
document.getElementById("error-id").innerHTML = request.url;

The manifest.json:

Code:
{
  "manifest_version": 2,
  "name": "test",
  "version": "1.0",
  "background": {
    "scripts": ["main.js"]
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["webextension/data/content-script.js"]
    }
  ],

  "permissions": [
    "<all_urls>",
    "activeTab",
    "tabs",
    "storage",
    "webRequest"
  ]
}

<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 = "<all_urls>";
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 => {
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><html>
<head>
<meta charset="UTF-8">
</head>
<body>
The error received is <span id="error-id"></span>
<script src="content-script.js"></script>
</body>
</html>
</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 => {
console.log("Message from the background script:");
console.log(request.url);
return Promise.resolve({response: "url received"});
}); //end onMessage.addListener

//update the HTML <span> 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": ["<all_urls>"],
"js": ["webextension/data/content-script.js"]
}
],

"permissions": [
"<all_urls>",
"activeTab",
"tabs",
"storage",
"webRequest"
]
}
</code></pre>
 
Top