Extension Guide

Webfuse Extensions represent a means of augmenting the web with custom functionality, including both logic and UI changes. Extensions can be utilised to achieve a plethora of things, such as the following:

Add new functionality through a content script:
- Automate actions within a page.
- Change the look and feel of a page’s UI.
- Add new features to a page.
- …
Add persistent logic through a background script:
- Fire XHR when a certain action is performed in a page.
- Keep track of cross-page events.
- Communicate with AI models in the background.
- …
Add a toggleable overlay to the Tab Bar through a popup:
- Display a button that opens a certain page.
- Implement participant-wide votings.
- Create custom ‘Reaction’ buttons.
- …
Change what is displayed in a new tab:
- Provide a custom start page.
- Define the start of a user’s browsing journey.
- Integrate with a corporate CI.\
- …
Listen to Session Events to trigger individual reactions.

🚀 Webfuse Extensions virtually render endless possibilities!

1. Develop Extension

An Extension is a directory that follows the following structure:

DirectoryExtensionDirectory
- manifest.json Main file describing the extension.
- content.js Injected into each web page
- background.js Service worker
- popup.html Create a popup window.
- newtab.html New tab page.

Here is an example of a simple Extension that loads 4 different components of the Extension: an Extension service worker script, a content script, a popup window and a custom new tab page.

This Extension listens for the relocated Session Event in the service worker, propagates the event to the popup window, content script and new tab page. Also, it implements the relocate command which allows you to change the session location from the custom new tab page.

{
    "manifest_version": 3,
    "name": "Surfly Extension",
    "version": "0.1",
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],
    "chrome_url_overrides": {
        "newtab": "newtab.html"
    },
    "action": {
        "default_popup": "popup.html"
    }
}

<form id="url-form" onsubmit="goTo(); return false">
    <input type="url" name="url" id="url" placeholder="Enter URL" />
</form>

<script>
    function goTo() {
        const url = document.getElementById('url').value;
        browser.webfuseSession.apiRequest({
            cmd: 'relocate',
            url,
            newTab: false,
        });
    }

    browser.runtime.onMessage.addListener((message, sender) => {
        if (message?.event_type === 'relocated_propagated') {
            console.log('newtab received relocated propagated message', message);
        }
    });
</script>

<html>
    <head>
        <title>Popup</title>
    </head>
    <body>
        <script>
            browser.runtime.onMessage.addListener((message, sender) => {
                if (message?.event_type === 'relocated_propagated') {
                    console.log('popup received relocated propagated message', message);
                }
            });
        </script>
    </body>
</html>

browser.webfuseSession.onMessage.addListener((message, sender) => {
    if (message?.event_type === 'relocated') {
        console.log('background received relocated message', message);

        browser.runtime.sendMessage({
            event_type: 'relocated_propagated',
            from: 'background',
        });

        browser.tabs.sendMessage(null, {
            event_type: 'relocated_propagated',
            from: 'background',
        });
    }
});

browser.runtime.onMessage.addListener((message, sender) => {
    if (message?.event_type === 'relocated_propagated') {
        console.log('content received relocated propagated message', message);
    }
});

2. Install Extension

Extensions are only available for space Sessions. So, in order to load an Extension in a Space Session, you need to follow these steps:

Open the Session Editor.
Click on the Extensions -> Add New button.
Select the folder containing the Extension you want to load.
Click on the Load Extension button.

3. Update Extension

To update an Extension, follow the same steps as for loading an Extension, only select the Extension which you want to update in the list of installed Extensions and click on the “Refresh Extension” button.

4. Uninstall Extension

To uninstall an Extension, follow the same steps as for loading an Extension, only select the Extension which you want to uninstall in the list of installed Extensions and click on the “Delete” button.