I have been building an extension and trying to send a message to content script when a button in the popup is clicked but have been getting this error "Could not establish connection. Receiving end does not exist." and also sometime getting "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')" in popup.js
// manifest.json file
{
"manifest_version": 3,
"name": "Extension",
"version": "1.0",
"action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"js": ["content.js"],
"matches": ["https://discord.com/channels/*"]
}
],
"permissions": ["tabs"],
"background": {
"service_worker": "background.js"
},
"host_permissions": ["https://discord.com/channels/*"]
}
// popup.js file.
const sendMessageBtn = document.querySelector("button");
sendMessageBtn.addEventListener("click", async () => {
console.log("clicked"); // being logged to console
const [tab] = await chrome.tabs.query({
active: true,
lastFocusedWindow: true,
});
const response = await chrome.tabs.sendMessage(tab.id, { greeting: "hello" });
// do something with response here, not outside the function
console.log(response);
});
When clicking on the button getting error: "Could not establish connection. Receiving end does not exist." in extension error logs
// content.js file
console.log("content script running"); // being logged to console
chrome.runtime.onMessage.addListener(
async function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
// console.log(request);
if (request.greeting === "hello")
await sendResponse({farewell: "goodbye"});
}
);
// popup.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Extension</title>
<link rel="stylesheet" href="popup.css" />
</head>
<body>
<h1>extension</h1>
<input id="message-field" type="text" placeholder="enter message" />
<button>Send message</button>
<script src="popup.js"></script>
</body>
</html>
