• Register
0 votes
2.5k views

Problem :

Currently I am using VueJS and Laravel for the project. Following issue started to show lately and it also comes up even in the old git branches.

Unchecked runtime.lasterror: the message port closed before a response was received.   

This error only comes up in Chrome browser.

6 5 3
7,540 points

Please log in or register to answer this question.

2 Answers

0 votes

Solution :

The issue  you are facing is most likely a mishandled asynchronous response to  the runtime.sendMessage.

To send the asynchronous response, there are two options as follows:

·   To return true from the event listener. This keeps your sendResponse function valid after the listener returns, so you can call it later also.

·   To return a Promise from the event listener, and resolve when you have your response or it can also reject it in case of the error.

When you try to send an async response however fail to use either of these mechanisms, the supplied sendResponse argument to sendMessage goes out of the scope and the result comes up exactly as the error message shown to you: your message port the message-passing apparatus is closed before the response was received.

So the bottom line is, if you ever see your extensions causing these errors just inspect closely all of your onMessage listeners. Some of them must need to start returning promises so marking them as asynchronous will be enough.

9 7 4
38,600 points
0 votes

Solution: The solution is to return true in background message listener.

Now we are showing simple example of background.js. It responses to any message from popup.js.

Code:

chrome.runtime.onMessage.addListener(function(rq, sender, sendResponse) {
    // setTimeout to simulate any callback (even from storage.sync)
    setTimeout(function() {
        sendResponse({status: true});
    }, 1);
    // return true;  // uncomment this line to fix error
});

 

This time popup.js, which sends message on popup. You'll get exceptions until you un-comment "return true" line in background.js file.

Code:

document.addEventListener("DOMContentLoaded", () => {
    chrome.extension.sendMessage({action: "ping"}, function(resp) {
        console.log(JSON.stringify(resp));
    });
});

 

In addition, showing the example manifest.json

{
  "name": "TestMessages",
  "version": "0.1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "src/popup.html"
  },
  "background": {
    "scripts": ["src/background.js"],
    "persistent": false
  },
  "permissions": [
    "alarms"
  ]
}

 

10 6 4
31,120 points

Related questions

0 votes
1 answer 9 views
9 views
Problem: Please solve it … Because I am unable to find out the solution... failed to mount component: template or render function not defined
asked Mar 25 Ifra 24.4k points
0 votes
1 answer 103 views
103 views
Problem: Facing this error message: Unchecked runtime.lasterror: could not establish connection. receiving end does not exist.
asked Mar 14 Wafa Abu Yousef 6.1k points
0 votes
1 answer 2K views
2K views
Problem : I had recently uninstalled the Postgres10 and after that reinstalled the Postgres10. After that I went to run a Node, Express, React application that relies on connecting to a Postgres10 database and also communicates with it using Sequelize. Initially I was unable to ... app at in the browser. Does anyone have any idea what is going wrong? Please suggest me the solution for my error.
asked Nov 22, 2019 peterlaw 6.9k points
0 votes
2 answers 1.6K views
1.6K views
Problem : I am very new to chrome extension development. The issue which I am facing is not related to accessing the chrome:// url but I do not want to edit anything there, now the issue is regarding the execution of the chrome.tabs.executeScript() which I am using ... fine when used alone in a html file. The main aim of my extension is to provide auto complete while writing in a text field.
asked Nov 21, 2019 peterlaw 6.9k points
0 votes
1 answer 15 views
15 views
I am learning about vue js. So if anyone can help in finding interview questions, it will be great. THanks you!!!
asked Dec 14, 2020 Lucky Guy 1.5k points
0 votes
1 answer 46 views
46 views
Problem: Currently I am using Vue.js 2.5 or Visual Studio Code editor. But I am facing the below listed es-lint warning and I am trying to get rid of it. <template :slot="slotName" slot-scope="props" v-for="slotName in $scopedSlots?Object.keys($scopedSlots):null"> <slot ... :row-field="props.rowField"></slot> </template> I am looking for expert help who can help me in fixing my above vue.js issue.
asked Aug 27, 2020 Raphael Pacheco 4.9k points
1 vote
1 answer 236 views
236 views
Problem : I have recently started learning about Vue. Please find below my main javascript file: import Vue from 'vue' new Vue({   myel: '#app' }); Please find below my HTML file: <body>     <div id="app"></div>     <script src="{{ mix('/js/app.js') } ... do not have any thing inside a #app div where I am trying to mount Vue and still facing the template or render error? How can I fix above error?
asked Apr 17, 2020 stewart 4k points
0 votes
1 answer 417 views
417 views
Problem : Currently I am using the nginx and node server to serve the update requests. I often face the gateway timeout whenever I request an update on large data. I saw below error from the nginx error logs as below : 2019/04/07 00:46:04 [error] 28599#0: *1 upstream ... time around 3-4 minutes. Please note I do not get the error for smaller updates. Please let me know how can I resolve the issue.
asked Dec 18, 2019 alecxe 7.5k points
0 votes
1 answer 20 views
20 views
Problem: why is this still happinig with me ? Expected response code 250 but got code "530", with message "530 5.7.1 authentication required ".
asked Mar 6 Wafa Abu Yousef 6.1k points
0 votes
1 answer 28 views
28 views
Problem: expected response code 220 but got code "", with message ""
asked Feb 17 Dan phillip 4.8k points