runtime.onConnect
Fired when a connection is made with either an extension process or a content script.
Syntax
js
browser.runtime.onConnect.addListener(listener)
browser.runtime.onConnect.removeListener(listener)
browser.runtime.onConnect.hasListener(listener)
Events have three functions:
addListener(listener)
-
Adds a listener to this event.
removeListener(listener)
-
Stop listening to this event. The
listener
argument is the listener to remove. hasListener(listener)
-
Checks whether a
listener
is registered for this event. Returnstrue
if it is listening,false
otherwise.
addListener syntax
Parameters
function
-
The function called when this event occurs. The function is passed this argument:
port
-
A
runtime.Port
object connecting the current script to the other context it is connecting to.
Browser compatibility
BCD tables only load in the browser
Examples
This content script:
- connects to the background script, and stores the
Port
in a variablemyPort
- listens for messages on
myPort
, and logs them - sends messages to the background script, using
myPort
, when the user clicks the document
js
// content-script.js
let myPort = browser.runtime.connect({name:"port-from-cs"});
myPort.postMessage({greeting: "hello from content script"});
myPort.onMessage.addListener((m) => {
console.log("In content script, received message from background script: ");
console.log(m.greeting);
});
document.body.addEventListener("click", () => {
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
- stores the port in a variable named
- sends messages to the content script, using
portFromCS
, when the user clicks the extension's browser action
js
// background-script.js
let portFromCS;
function connected(p) {
portFromCS = p;
portFromCS.postMessage({greeting: "hi there content script!"});
portFromCS.onMessage.addListener((m) => {
console.log("In background script, received message from content script")
console.log(m.greeting);
});
}
browser.runtime.onConnect.addListener(connected);
browser.browserAction.onClicked.addListener(() => {
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.