Custom Screensharing

In this Extension we insert a button in the web page. This button when clicked calls the Session API’s startScreensharing() method. This extension only has a Content script and Manifest. The extension will work only if the Screen sharing app is installed in the Space.

• Directorycustom_screensharing_button_extension

  • manifest.json
  • content.js

manifest.json

{
    "manifest_version": 3,
    "name": "Custom Screensharing Button",
    "version": "1.0",
    "content_scripts": [
        {
            "js": ["content.js"]
        }
    ]
}

content.js

document.addEventListener('DOMContentLoaded', function() {
    const button = document.createElement('button');
    button.innerHTML = '📺';
    button.style = {
        ...button.style,
        position: 'fixed',
        bottom: '0',
        left: '0',
        fontSize: '24px',
        padding: '10px',
        borderRadius: '50%',
        border: 'none',
        backgroundColor: '#f8f8f8',
        cursor: 'pointer',
    };
    document.body.appendChild(button);
    button.addEventListener('click', function() {
        browser.webfuseSession.startScreensharing();
    });
});

Key Points

• Dynamically Inserting HTML: JavaScript is used within the content script to dynamically add a screensharing button to the webpage.

const button = document.createElement('button');
button.innerHTML = '📺';
document.body.appendChild(button);

• Triggering Surfly API Calls: The extension leverages the browser.webfuseSession.startScreensharing() method to invoke Surfly’s screensharing functionality when the button is clicked.

button.addEventListener('click', function() {
    browser.webfuseSession.startScreensharing();
});