Instantly share code, notes, and snippets.

Embed
What would you like to do?
Messaging bridge in a webextension content script
import { CHANNEL_NAME } from "../lib/constants";
// Relay backend port messages to content
let port;
function connect() {
port = browser.runtime.connect({ name: CHANNEL_NAME });
port.onDisconnect.addListener(() => {
port = null;
reconnect();
});
port.onMessage.addListener(message => {
window.postMessage({ ...message, channel: `${CHANNEL_NAME}-web` }, "*");
});
}
// Relay content messages to backend port if the channel name matches
// (Not a security feature so much as a noise filter)
window.addEventListener("message", event => {
if (
port &&
event.source === window &&
event.data &&
event.data.channel === `${CHANNEL_NAME}-extension`
) {
port.postMessage({ ...event.data, location: window.location.href });
}
});
connect();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment