This content script:
- connects to the background script and stores the
Port
in a variable called myPort
.
- listens for messages on
myPort
and logs them.
- sends messages to the background script, using
myPort
, when the user clicks the document.
let myPort = browser.runtime.connect({name:"port-from-cs"});
myPort.postMessage({greeting: "hello from content script"});
myPort.onMessage.addListener(function(m) {
console.log("In content script, received message from background script: ");
console.log(m.greeting);
});
document.body.addEventListener("click", function() {
myPort.postMessage({greeting: "they clicked the page!"});
});
The corresponding background script:
- listens for connection attempts from the content script.
- when it receives a connection attempt:
- stores the port in a variable named
portFromCS
.
- sends the content script a message using the port.
- starts listening to messages received on the port, and logs them.
- sends messages to the content script, using
portFromCS
, when the user clicks the extension's browser action.
let portFromCS;
function connected(p) {
portFromCS = p;
portFromCS.postMessage({greeting: "hi there content script!"});
portFromCS.onMessage.addListener(function(m) {
console.log("In background script, received message from content script")
console.log(m.greeting);
});
}
browser.runtime.onConnect.addListener(connected);
browser.browserAction.onClicked.addListener(function() {
portFromCS.postMessage({greeting: "they clicked the button!"});
});
Note: This API is based on Chromium's chrome.runtime
API. This documentation is derived from runtime.json
in the Chromium code.
Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.