Session Sharing Indicator

TL;DR

This guide shows you how to create a simple browser extension that visually indicates if your current browsing session is being shared (e.g., via screen sharing, remote access software). It’s designed for Chrome but can be adapted for other browsers.

Step 1: Project Setup

1. Create a new folder for your extension (e.g., ‘session-sharing-indicator’).
2. Inside the folder, create three files:
   • manifest.json: Describes the extension to the browser.
   • background.js: Runs in the background and monitors session sharing.
   • popup.html: The user interface for the extension (optional).

Step 2: manifest.json

Add the following content to manifest.json:

{
  "manifest_version": 3,
  "name": "Session Sharing Indicator",
  "version": "1.0",
  "description": "Indicates if your session is being shared.",
  "permissions": [
    "desktopCapture"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Important: Replace images/icon*.png with actual icon files (create these images and place them in an ‘images’ folder). The desktopCapture permission is crucial for detecting screen sharing.

Step 3: background.js

Add the following code to background.js:

chrome.desktopCapture.onStreamChanged.addListener(async (streamId) => {
  if (streamId === undefined) {
    // Session sharing stopped.
    console.log('Session sharing stopped');
    await chrome.action.setBadgeText({ text: '' }); // Clear badge
  } else {
    // Session is being shared.
    console.log('Session sharing started');
    await chrome.action.setBadgeText({ text: 'LIVE' }); // Set badge to indicate live sharing
  }
});

This code listens for changes in desktop capture streams. When a stream starts (sharing begins), it sets the extension’s badge text to ‘LIVE’. When the stream stops, it clears the badge.

Step 4: popup.html (Optional)

If you want a simple UI, add this to popup.html:

  


  Session Sharing Status
  
Checking...
  

Step 5: popup.js (Optional)

Add this to popup.js to update the status in the popup:

document.addEventListener('DOMContentLoaded', function() {
  const statusElement = document.getElementById('status');

  chrome.action.setBadgeText({ text: '' }); // Ensure badge is clear on load.
});

Step 6: Load the Extension in Chrome

1. Open Chrome and go to chrome://extensions/.
2. Enable ‘Developer mode’ (top right corner).
3. Click ‘Load unpacked’.
4. Select the folder you created for your extension (‘session-sharing-indicator’).

Step 7: Testing

Start a screen sharing session (e.g., using Google Meet, Zoom). The extension’s icon should display a ‘LIVE’ badge. Stop the screen share; the badge should disappear.

Troubleshooting

• Permission Issues: Make sure you grant the desktopCapture permission when prompted during installation.
• Console Errors: Check the extension’s console (right-click on the icon, select ‘Inspect popup’) for any errors.