Using WebRTC in Chrome Extensions

// service-worker.ts — Initiate tab capture
chrome.action.onClicked.addListener(async (tab) => {
  // First, ensure the offscreen document exists
  await ensureOffscreenDocument();
 
  // Get a media stream ID for the current tab
  const streamId = await chrome.tabCapture.getMediaStreamId({
    targetTabId: tab.id,
  });
 
  // Send the stream ID to the offscreen document
  chrome.runtime.sendMessage({
    type: 'START_CAPTURE',
    target: 'offscreen',
    streamId,
    tabId: tab.id,
  });
});
 
async function ensureOffscreenDocument() {
  const existingContexts = await chrome.runtime.getContexts({
    contextTypes: [chrome.runtime.ContextType.OFFSCREEN_DOCUMENT],
  });
 
  if (existingContexts.length > 0) return;
 
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: [chrome.offscreen.Reason.USER_MEDIA],
    justification: 'WebRTC media capture for screen recording',
  });
}

// offscreen.ts — Handle the media stream
chrome.runtime.onMessage.addListener(async (message) => {
  if (message.type !== 'START_CAPTURE' || message.target !== 'offscreen') return;
 
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: {
        mandatory: {
          chromeMediaSource: 'tab',
          chromeMediaSourceId: message.streamId,
        },
      } as any,
      video: {
        mandatory: {
          chromeMediaSource: 'tab',
          chromeMediaSourceId: message.streamId,
          maxWidth: 1920,
          maxHeight: 1080,
          maxFrameRate: 30,
        },
      } as any,
    });
 
    // Stream is now available — record it, send it via WebRTC, etc.
    startRecording(stream);
  } catch (error) {
    console.error('Tab capture failed:', error);
  }
});
 
function startRecording(stream: MediaStream) {
  const recorder = new MediaRecorder(stream, {
    mimeType: 'video/webm;codecs=vp9,opus',
    videoBitsPerSecond: 2500000,
  });
 
  const chunks: Blob[] = [];
  recorder.ondataavailable = (e) => chunks.push(e.data);
  recorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'video/webm' });
    // Save or upload the recording
    const url = URL.createObjectURL(blob);
    chrome.runtime.sendMessage({ type: 'RECORDING_COMPLETE', url });
  };
 
  recorder.start(1000); // Capture in 1-second chunks
}

// offscreen.ts — Full screen capture
async function captureScreen() {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: {
      width: { ideal: 1920 },
      height: { ideal: 1080 },
      frameRate: { ideal: 30, max: 60 },
    },
    audio: true, // System audio (if the user selects a tab)
  });
 
  return stream;
}

// webrtc-manager.ts — Reusable WebRTC connection manager
interface SignalingChannel {
  send(data: any): void;
  onMessage(callback: (data: any) => void): void;
}
 
class ExtensionWebRTC {
  private pc: RTCPeerConnection;
  private signaling: SignalingChannel;
 
  constructor(signaling: SignalingChannel) {
    this.signaling = signaling;
    this.pc = new RTCPeerConnection({
      iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' },
        // Add TURN server for production use
        // {
        //   urls: 'turn:your-turn-server.com:3478',
        //   username: 'user',
        //   credential: 'pass',
        // },
      ],
    });
 
    // Forward ICE candidates to the remote peer
    this.pc.onicecandidate = (event) => {
      if (event.candidate) {
        this.signaling.send({
          type: 'ice-candidate',
          candidate: event.candidate.toJSON(),
        });
      }
    };
 
    // Handle incoming signaling messages
    this.signaling.onMessage(async (data) => {
      switch (data.type) {
        case 'offer':
          await this.handleOffer(data.sdp);
          break;
        case 'answer':
          await this.pc.setRemoteDescription(new RTCSessionDescription(data.sdp));
          break;
        case 'ice-candidate':
          await this.pc.addIceCandidate(new RTCIceCandidate(data.candidate));
          break;
      }
    });
  }
 
  async startCall(stream: MediaStream) {
    // Add local tracks
    for (const track of stream.getTracks()) {
      this.pc.addTrack(track, stream);
    }
 
    // Create and send offer
    const offer = await this.pc.createOffer();
    await this.pc.setLocalDescription(offer);
    this.signaling.send({ type: 'offer', sdp: offer });
  }
 
  private async handleOffer(sdp: RTCSessionDescriptionInit) {
    await this.pc.setRemoteDescription(new RTCSessionDescription(sdp));
    const answer = await this.pc.createAnswer();
    await this.pc.setLocalDescription(answer);
    this.signaling.send({ type: 'answer', sdp: answer });
  }
 
  onRemoteStream(callback: (stream: MediaStream) => void) {
    this.pc.ontrack = (event) => {
      callback(event.streams[0]);
    };
  }
}

// signaling-adapter.ts — Extension messaging as a signaling channel
class ExtensionSignaling implements SignalingChannel {
  private peerId: string;
  private messageCallback: ((data: any) => void) | null = null;
 
  constructor(peerId: string) {
    this.peerId = peerId;
 
    // Listen for signaling messages routed through the background
    chrome.runtime.onMessage.addListener((message) => {
      if (message.type === 'webrtc-signal' && message.from === this.peerId) {
        this.messageCallback?.(message.payload);
      }
    });
  }
 
  send(data: any) {
    // Send to background worker, which routes to the target peer
    chrome.runtime.sendMessage({
      type: 'webrtc-signal',
      to: this.peerId,
      payload: data,
    });
  }
 
  onMessage(callback: (data: any) => void) {
    this.messageCallback = callback;
  }
}

// data-channel.ts — P2P sync for extension data
function setupDataChannel(pc: RTCPeerConnection) {
  const channel = pc.createDataChannel('extension-sync', {
    ordered: true,
    maxRetransmits: 3,
  });
 
  channel.onopen = () => {
    console.log('Data channel open — syncing extension state');
    // Send current state to the peer
    const state = await chrome.storage.local.get(null);
    channel.send(JSON.stringify({ type: 'full-sync', data: state }));
  };
 
  channel.onmessage = (event) => {
    const message = JSON.parse(event.data);
    switch (message.type) {
      case 'full-sync':
        // Merge remote state with local state
        mergeState(message.data);
        break;
      case 'incremental':
        // Apply a single change
        chrome.storage.local.set({ [message.key]: message.value });
        break;
    }
  };
 
  // Watch for local storage changes and push them to the peer
  chrome.storage.onChanged.addListener((changes) => {
    for (const [key, { newValue }] of Object.entries(changes)) {
      if (channel.readyState === 'open') {
        channel.send(JSON.stringify({
          type: 'incremental',
          key,
          value: newValue,
        }));
      }
    }
  });
 
  return channel;
}

{
  "permissions": [
    "tabCapture",
    "offscreen"
  ],
  "optional_permissions": [
    "desktopCapture"
  ]
}