Extension Messaging

When implementing a Webfuse Extension you probably want the different components of your Extensions to be able to communicate with each other. We offer two different ways to enable this:

In-Extension Messaging – Allows you to send messages between the different components of your Extension on a single participant’s side.
Webfuse Broadcast Messaging – Allows you to broadcast messages to all participants which can then be received by the different components of your Extension.

Extension Component Communication

Extension messages are a way to send messages between the different components of your Extension on a single participant’s side.

Sending Extension Messages

Sending a message from any component to Popup, Background, and Newtab page can be done by using runtime.sendMessage():

browser.runtime.sendMessage(message);

Sending message from Popup, Background, and Newtab to the tab Content script can be done by using tabs.sendMessage().

browser.tabs.sendMessage(tabId, message);

Example

browser.runtime.onMessage.addListener((message) => {
    if (message.command === 'sendMessageToTabs') {
      browser.webfuseSession.getTabs().then((tabs) => {
        sendMessageToTabs(tabs);
      });
    }
});

function sendMessageToTabs(tabs) {
    tabs.forEach((tab) => {
        browser.tabs.sendMessage(tab.id, {greeting: 'Hi from background'}).then((response) => {
            console.log('response from tab', tab.id, response);
        });
    });
}

Here’s the corresponding content component script:

browser.runtime.onMessage.addListener((message, sender) => {
    if (message.greeting === 'Hi from background') {
        return ({ response: 'Hi from content script' });
    }
});

Receiving Extension Messages

Receiving a message from popup, service worker, and new tab to the tab content script can be done by using runtime.onMessage.addListener():

browser.runtime.onMessage.addListener((message, sender) => {});

Broadcast Messages to All Participants

In addition to messaging between components within an Extension, the Session API also allows you to broadcast a message to all participants within a Session. This is useful if you want to communicate with Extensions loaded on other participants’ side, want to communicate to pages that embed your space, interface with your Extension using the REST API.

Broadcasting from an Extension

browser.webfuseSession.broadcastMessage(message);

The Widget API also allows you to broadcast a message to all participants within a Session.

// Initialize Webfuse space and create a Session with event listeners
webfuse.initSpace('your_widget_key', 'your_space_id').then(async space => {
    const session = space.session();

    session.on('relocate_start', (session, event) => {
        session.broadcastMessage(`Navigating to a new page: ${event.url}`);
    });

    // Start the Session
    await session.start();
});

Sending a Broadcast Using the REST API

Messages to the broadcast channel can also be sent using the REST API, allowing your backend to send messages to all participants in a Session.

import requests

API_Key = "<API_KEY>"
Session_ID = "<SESSION_ID>"

url = f"https://app.webfuse.io/v2/spaces/sessions/{Session_ID}/message/"

headers = {
    "Authorization": f"Token {API_Key}",
    "Content-Type": "application/json"
}

data = {
    "message": {
        "content": "Hello from REST API!"
    }
}

response = requests.post(url, json=data, headers=headers)

print(response.json())

Receiving a Broadcast Within an Extension

You can listen for broadcast messages by using the session.on('message') method to listen specifically for message events.

For example, if you want to listen for messages from the service worker, you can do the following:

browser.webfuseSession.on.addListener(function (message, sender) {
    console.log('Broadcasted Message:', message, sender);
});

If you want to listen for messages using the Widget API, you can do the following:

webfuse.initSpace('your_widget_key', 'your_space_id').then(async space => {
    const session = space.session();

    session.on('message', (session, event) => {
        console.log("Received message:", event.data.message, "from", event.origin);
    });

    // Start the Session
    await session.start();
});