• Register
0 votes
1.2k 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

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
2 answers 705 views
705 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 1.2K views
1.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
1 answer 11 views
11 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 Raphael Pacheco 4.9k points
1 vote
1 answer 63 views
63 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 stewart 4k points
0 votes
1 answer 1.6K views
1.6K views
Problem : I got stuck on below error I am trying to configure my SMTP mail on laravel &ldquo;Expected response code 250 but got code "530", with message "530 5.7.1 authentication required "&rdquo; Below is the configuration on .env MAIL_DRIVER=smtp MAIL_HOST=smtp.mailtrap.io ... I have tried to authenticate my SMTP on the env but I keep facing the above error so for now I am stuck on that error.
asked Feb 4 jwilliam 3.9k points