Skip to content

Instantly share code, notes, and snippets.

@DashBarkHuss
Created July 20, 2021 22:33
Show Gist options
  • Save DashBarkHuss/4da860d395cea57dd502e8978df1c488 to your computer and use it in GitHub Desktop.
Save DashBarkHuss/4da860d395cea57dd502e8978df1c488 to your computer and use it in GitHub Desktop.
Sample Chrome Extension Message Passing Background to Content Script Manifest V3
try {
// This is the background script for the extension
// A listener for when the user clicks on the extension button
// chrome.action.onClicked.addListener(buttonClicked);
chrome.action.onClicked.addListener(buttonClicked);
// Handle that click
function buttonClicked(tab) {
// Send a message to the active tab
console.log("button clicked!");
// Send a message to the tab that is open when button was clicked
console.log("sending message");
chrome.tabs.sendMessage(tab.id, { message: "browser action" });
}
// Listening for messages
chrome.runtime.onMessage.addListener(receiver);
function receiver(request, sender, sendResponse) {
if (request.message === "thank you") {
// Not doing anything for messages received but I could!
}
}
} catch (err) {
console.log(err);
}
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
console.log(
sender.tab
? "from a content script:" + sender.tab.url
: "from the extension"
);
if (request.greeting === "hello") sendResponse({ farewell: "goodbye" });
});
{
"manifest_version": 3,
"version": "1.0",
"name": "Manifest 3 first version",
"content_scripts": [{ "matches": ["<all_urls>"], "js": ["content.js"] }],
"background": {
"service_worker": "background.js"
},
"action": { "default_icon": "icon.png" }
}
@DashBarkHuss
Copy link
Author

DashBarkHuss commented Jul 20, 2021

All go in the root directory.
You can add an icon.png in the root directory. Otherwise it will use a default icon- a blue puzzle piece.

@rypptc
Copy link

rypptc commented Mar 30, 2022

Thank you for sharing your code. I'm trying to understand how to send messages, specially from background to scripts. I tried your code and I got an error:Uncaught (in promise) Error: The message port closed before a response was received.

@FedericoGentile
Copy link

Me too I get the following error:
Uncaught (in promise) Error: The message port closed before a response was received.

@DashBarkHuss
Copy link
Author

@FedericoGentile and @rypptc I got that error too. Not sure why. But the extension still works and seems to send the message even with the error.

@FlareZ123
Copy link

also getting this error message, MV3 seems messy.

@AndreLion
Copy link

AndreLion commented Aug 1, 2023

also getting this error message, MV3 seems messy.

Try to add return true; after Line 7

@imprintnext-raj
Copy link

I get the following error:
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

@csrutil
Copy link

csrutil commented Aug 3, 2023

@imprintnext-raj same issue, lol

@nguyendinhhan98
Copy link

@imprintnext-raj same issue, sos

@FlamedDogo99
Copy link

@imprintnext-raj I am running into this issue as well

@isaurssaurav
Copy link

@FlamedDogo99 , try to inject the listener before you send the message. So, add run_at in the content_scripts prop on the manifest file. This should resolve the issue.

"content_scripts": [
    {
      "matches": ["<all_urls>"], "js": ["content.js"]
      "run_at": "document_start"
    }
  ],

@kae-at-seventh-root
Copy link

Did someone fix them?

background.js:1 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment