Sample Chrome Extension Message Passing Background to Content Script Manifest V3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" }); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" } | |
} |
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.
Me too I get the following error:
Uncaught (in promise) Error: The message port closed before a response was received.
@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.
also getting this error message, MV3 seems messy.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.