// ==UserScript== // @name Vedantu Top-Right Volume Hub with Cross-Tab Control and Code Legal Page // @namespace tweeks.io // @version 2.1 // @description Adds a top-right volume hub with per-tab audio controls, same-site cross-tab volume control, and a generated Code and Legal page. // @author Tweeks // @match *://session.vedantu.com/* // @grant GM_registerMenuCommand // ==/UserScript== const TM_VOLUME_HUB_METADATA = [ '// ==UserScript==', '// @name Vedantu Top-Right Volume Hub with Cross-Tab Control and Code Legal Page', '// @namespace tweeks.io', '// @version 2.1', '// @description Adds a top-right volume hub with per-tab audio controls, same-site cross-tab volume control, and a generated Code and Legal page.', '// @author Tweeks', '// @match *://session.vedantu.com/*', '// @grant GM_registerMenuCommand', '// ==/UserScript==' ].join('\n'); function main() { 'use strict'; const UI_ID = 'tm-volume-hub'; const STYLE_ID = 'tm-volume-hub-style'; const CHANNEL_NAME = 'tm-volume-hub-v2'; const STORAGE_PREFIX = 'tmVolumeHub:v2'; const TAB_STORAGE_PREFIX = STORAGE_PREFIX + ':tab:'; const CURRENT_TAB_SESSION_KEY = STORAGE_PREFIX + ':sessionTabId'; const LEGACY_TAB_SESSION_KEY = 'tmAudioControlsTab:' + location.origin + ':' + location.pathname; const LEGACY_STATE_PREFIX = 'tmAudioControls:' + location.origin + ':' + location.pathname + ':'; const MEDIA_SELECTOR = 'video, audio'; const HEARTBEAT_MS = 15000; const TAB_TTL_MS = 90000; const defaultState = { enabled: true, panelOpen: false, volume: 100, preamp: 100, bass: 0, treble: 0 }; const tabId = getTabId(); const ownStorageKey = TAB_STORAGE_PREFIX + tabId; const createdAt = Date.now(); let state = loadState(); let ui = null; let controls = {}; let sharedAudioContext = null; let broadcastChannel = null; let refreshRemoteTimer = 0; const mediaGraphs = new WeakMap(); function getTabId() { let id = sessionStorage.getItem(CURRENT_TAB_SESSION_KEY); if (!id) { id = sessionStorage.getItem(LEGACY_TAB_SESSION_KEY); } if (!id) { id = Date.now() + '-' + Math.random().toString(36).slice(2, 10); } sessionStorage.setItem(CURRENT_TAB_SESSION_KEY, id); return id; } function clamp(value, min, max) { return Math.min(max, Math.max(min, value)); } function parseJSON(value, fallback) { try { return JSON.parse(value); } catch { return fallback; } } function sanitizeState(candidate) { const merged = { ...defaultState, ...(candidate || {}) }; return { enabled: Boolean(merged.enabled), panelOpen: Boolean(merged.panelOpen), volume: clamp(Number(merged.volume) || 0, 0, 300), preamp: clamp(Number(merged.preamp) || 0, 0, 300), bass: clamp(Number(merged.bass) || 0, -30, 30), treble: clamp(Number(merged.treble) || 0, -30, 30) }; } function buildPayload(partial = {}) { const merged = sanitizeState({ ...state, ...partial }); return { tabId, title: document.title || 'Untitled tab', url: location.href, origin: location.origin, path: location.pathname, createdAt, updatedAt: Date.now(), updatedBy: tabId, enabled: merged.enabled, panelOpen: merged.panelOpen, volume: merged.volume, preamp: merged.preamp, bass: merged.bass, treble: merged.treble }; } function loadState() { const current = parseJSON(localStorage.getItem(ownStorageKey), null); if (current) { return sanitizeState(current); } const legacy = parseJSON(localStorage.getItem(LEGACY_STATE_PREFIX + tabId), null); if (legacy) { return sanitizeState({ enabled: legacy.enabled, panelOpen: typeof legacy.drawerOpen === 'boolean' ? legacy.drawerOpen : legacy.panelOpen, volume: legacy.volume, preamp: legacy.preamp, bass: legacy.bass, treble: legacy.treble }); } return { ...defaultState }; } function saveState(options = {}) { const payload = buildPayload(); localStorage.setItem(ownStorageKey, JSON.stringify(payload)); if (options.announce !== false) { postTabsChanged(); } } function setupChannel() { if (!('BroadcastChannel' in window)) return; try { broadcastChannel = new BroadcastChannel(CHANNEL_NAME); broadcastChannel.addEventListener('message', (event) => { const message = event.data; if (!message || typeof message !== 'object') return; if (message.type === 'tabs-changed') { scheduleRemoteRefresh(); return; } if (message.type === 'apply-to-tab' && message.targetTabId === tabId && message.payload) { adoptIncomingState(message.payload); } }); } catch { broadcastChannel = null; } } function postTabsChanged() { if (!broadcastChannel) return; try { broadcastChannel.postMessage({ type: 'tabs-changed' }); } catch { // Ignore channel errors. } } function postApplyToTab(targetTabId, payload) { if (!broadcastChannel) return; try { broadcastChannel.postMessage({ type: 'apply-to-tab', targetTabId, payload }); } catch { // Ignore channel errors. } } function adoptIncomingState(payload) { if (!payload || payload.updatedBy === tabId) return; if (payload.origin && payload.origin !== location.origin) return; if (payload.tabId && payload.tabId !== tabId) return; const nextState = sanitizeState({ enabled: payload.enabled, panelOpen: state.panelOpen, volume: payload.volume, preamp: payload.preamp, bass: payload.bass, treble: payload.treble }); const changed = ['enabled', 'volume', 'preamp', 'bass', 'treble'].some((key) => nextState[key] !== state[key]); if (!changed) return; state = { ...state, ...nextState }; syncInputs(); render(); applyStateToAllMedia(); saveState({ announce: false }); } function getKnownTabs() { const now = Date.now(); const tabs = []; for (let index = 0; index < localStorage.length; index += 1) { const key = localStorage.key(index); if (!key || !key.startsWith(TAB_STORAGE_PREFIX)) continue; const payload = parseJSON(localStorage.getItem(key), null); if (!payload || typeof payload !== 'object') continue; if (!payload.updatedAt || now - payload.updatedAt > TAB_TTL_MS) { localStorage.removeItem(key); continue; } if (payload.origin !== location.origin) continue; tabs.push(payload); } tabs.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0)); return tabs; } function sendRemoteUpdate(targetTabId, patch) { const targetKey = TAB_STORAGE_PREFIX + targetTabId; const existing = parseJSON(localStorage.getItem(targetKey), null); if (!existing || typeof existing !== 'object') return; if (existing.origin !== location.origin) return; const safePatch = sanitizeState({ enabled: 'enabled' in patch ? patch.enabled : existing.enabled, panelOpen: existing.panelOpen, volume: 'volume' in patch ? patch.volume : existing.volume, preamp: 'preamp' in patch ? patch.preamp : existing.preamp, bass: 'bass' in patch ? patch.bass : existing.bass, treble: 'treble' in patch ? patch.treble : existing.treble }); const nextPayload = { ...existing, tabId: targetTabId, title: existing.title || 'Untitled tab', url: existing.url || '', origin: existing.origin || location.origin, path: existing.path || location.pathname, createdAt: existing.createdAt || Date.now(), updatedAt: Date.now(), updatedBy: tabId, enabled: safePatch.enabled, panelOpen: Boolean(existing.panelOpen), volume: safePatch.volume, preamp: safePatch.preamp, bass: safePatch.bass, treble: safePatch.treble }; localStorage.setItem(targetKey, JSON.stringify(nextPayload)); postApplyToTab(targetTabId, nextPayload); postTabsChanged(); scheduleRemoteRefresh(); } function injectStyles() { if (document.getElementById(STYLE_ID)) return; const style = document.createElement('style'); style.id = STYLE_ID; style.textContent = ` #${UI_ID} { position: fixed; top: 16px; right: 16px; z-index: 2147483647; font: 13px/1.4 Arial, sans-serif; color: #fff; user-select: none; } #${UI_ID} * { box-sizing: border-box; } #${UI_ID} .tm-hub-button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 0; border-radius: 12px; background: rgba(17, 24, 39, 0.94); color: #fff; cursor: pointer; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); backdrop-filter: blur(10px); } #${UI_ID} .tm-hub-button:hover { background: rgba(31, 41, 55, 0.98); } #${UI_ID} .tm-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; } #${UI_ID}.tm-disabled .tm-dot { background: #ef4444; } #${UI_ID} .tm-hub-panel { width: min(380px, calc(100vw - 32px)); margin-top: 10px; padding: 14px; border-radius: 16px; background: rgba(17, 24, 39, 0.97); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34); backdrop-filter: blur(12px); } #${UI_ID} .tm-hidden { display: none !important; } #${UI_ID} .tm-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; } #${UI_ID} .tm-title { font-size: 15px; font-weight: 700; } #${UI_ID} .tm-subtitle { margin-top: 3px; color: #cbd5e1; font-size: 11px; } #${UI_ID} .tm-btn-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } #${UI_ID} .tm-mini-btn { border: 0; border-radius: 9px; padding: 6px 9px; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; font-size: 12px; text-decoration: none; } #${UI_ID} .tm-mini-btn:hover { background: rgba(255, 255, 255, 0.18); } #${UI_ID} .tm-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); } #${UI_ID} .tm-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } #${UI_ID} .tm-section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #e5e7eb; margin-bottom: 8px; text-transform: uppercase; } #${UI_ID} .tm-row { display: grid; grid-template-columns: 64px 1fr 56px; gap: 8px; align-items: center; margin-bottom: 9px; } #${UI_ID} .tm-row:last-child { margin-bottom: 0; } #${UI_ID} label { font-weight: 600; color: #e5e7eb; } #${UI_ID} input[type="range"] { width: 100%; margin: 0; cursor: pointer; accent-color: #8b5cf6; } #${UI_ID} .tm-value { text-align: right; color: #cbd5e1; font-variant-numeric: tabular-nums; white-space: nowrap; } #${UI_ID} .tm-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } #${UI_ID} .tm-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #e5e7eb; font-size: 11px; } #${UI_ID} .tm-remote-list { display: grid; gap: 10px; } #${UI_ID} .tm-remote-card { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 10px; } #${UI_ID} .tm-remote-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; } #${UI_ID} .tm-remote-name { font-weight: 700; word-break: break-word; } #${UI_ID} .tm-remote-meta { color: #cbd5e1; font-size: 11px; margin-top: 2px; word-break: break-word; } #${UI_ID} .tm-remote-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } #${UI_ID} .tm-empty { color: #cbd5e1; font-size: 12px; } `; document.head.appendChild(style); } function createUI() { if (document.getElementById(UI_ID)) { ui = document.getElementById(UI_ID); cacheControls(); return; } ui = document.createElement('div'); ui.id = UI_ID; ui.innerHTML = `

Volume Hub

Top-right audio controls for this tab and other open Vedantu tabs

This tab

Volume

Master

Bass

Treble

Other tabs

0 media 1 tab Audio active

`; document.documentElement.appendChild(ui); cacheControls(); bindUI(); syncInputs(); render(); renderRemoteTabs(); } function cacheControls() { controls.buttonLabel = ui.querySelector('[data-role="buttonLabel"]'); controls.panel = ui.querySelector('[data-role="panel"]'); controls.toggleEnabled = ui.querySelector('[data-action="toggleEnabled"]'); controls.remoteList = ui.querySelector('[data-role="remoteList"]'); controls.mediaCount = ui.querySelector('[data-role="mediaCount"]'); controls.tabCount = ui.querySelector('[data-role="tabCount"]'); controls.status = ui.querySelector('[data-role="status"]'); controls.inputs = Array.from(ui.querySelectorAll('input[data-key]')); controls.values = { volume: ui.querySelector('[data-value="volume"]'), preamp: ui.querySelector('[data-value="preamp"]'), bass: ui.querySelector('[data-value="bass"]'), treble: ui.querySelector('[data-value="treble"]') }; } function bindUI() { ui.addEventListener('click', (event) => { const button = event.target.closest('[data-action]'); if (!button) return; const action = button.getAttribute('data-action'); if (action === 'togglePanel') { state.panelOpen = !state.panelOpen; render(); saveState(); return; } if (action === 'toggleEnabled') { state.enabled = !state.enabled; render(); applyStateToAllMedia(); saveState(); return; } if (action === 'reset') { const panelOpen = state.panelOpen; state = { ...defaultState, panelOpen }; syncInputs(); render(); applyStateToAllMedia(); saveState(); return; } if (action === 'refreshTabs') { renderRemoteTabs(); return; } if (action === 'openCodeLegal') { openCodeAndLegalPage(); return; } if (action === 'remoteToggle') { const card = button.closest('[data-tab-id]'); if (!card) return; const nextEnabled = button.getAttribute('data-enabled') !== 'true'; sendRemoteUpdate(card.getAttribute('data-tab-id'), { enabled: nextEnabled }); } }); ui.addEventListener('input', (event) => { const localInput = event.target.closest('input[data-key]'); if (localInput) { state[localInput.getAttribute('data-key')] = Number(localInput.value); render(); applyStateToAllMedia(); saveState(); return; } const remoteSlider = event.target.closest('.tm-remote-slider'); if (!remoteSlider) return; const card = remoteSlider.closest('[data-tab-id]'); if (!card) return; const nextVolume = clamp(Number(remoteSlider.value) || 0, 0, 300); const valueNode = card.querySelector('[data-role="remoteVolumeValue"]'); if (valueNode) { valueNode.textContent = nextVolume + '%'; } sendRemoteUpdate(card.getAttribute('data-tab-id'), { volume: nextVolume }); }); } function syncInputs() { if (!controls.inputs) return; for (const input of controls.inputs) { input.value = String(state[input.getAttribute('data-key')]); } } function render() { if (!ui) return; ui.classList.toggle('tm-disabled', !state.enabled); controls.panel.classList.toggle('tm-hidden', !state.panelOpen); controls.buttonLabel.textContent = 'Volume ' + state.volume + '%'; controls.toggleEnabled.textContent = state.enabled ? 'On' : 'Off'; controls.values.volume.textContent = state.volume + '%'; controls.values.preamp.textContent = state.preamp + '%'; controls.values.bass.textContent = state.bass + ' dB'; controls.values.treble.textContent = state.treble + ' dB'; controls.status.textContent = state.enabled ? 'Audio active' : 'Audio bypassed'; updateMediaCount(); updateTabCount(); } function escapeHtml(text) { return String(text).replace(/[&<>"']/g, (char) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[char])); } function getRuntimeSource() { return TM_VOLUME_HUB_METADATA + '\n\n' + main.toString() + '\n\nmain();'; } function buildLegalPageHtml() { const runtimeSource = getRuntimeSource(); const currentPayload = buildPayload(); const snapshot = JSON.stringify({ currentTab: currentPayload, knownTabs: getKnownTabs() }, null, 2); const year = new Date().getFullYear(); return ` Volume Hub Code and Legal

Volume Hub Code and Legal

Generated from the active userscript for ${escapeHtml(location.href)}

Created ${escapeHtml(new Date().toLocaleString())}

Overview

This page documents the active Volume Hub userscript. It adds a volume button in the top-right corner, provides per-tab audio controls, allows one Vedantu tab to adjust another Vedantu tab's saved volume, and generates a reference page with source and legal notices.

Top-right floating volume button
Per-tab volume, master gain, bass, and treble controls
Remote volume and enable or disable control for other open Vedantu tabs
Generated source-code reference page
Privacy, terms, disclaimer, and license notice sections

Code

This is the generated userscript source shown by the running script.

${escapeHtml(runtimeSource)}

Storage Snapshot

The script uses local browser storage to keep tab state and discover other open tabs on the same Vedantu origin.

${escapeHtml(snapshot)}

Privacy Policy

This userscript is intended to operate locally in your browser. It does not intentionally send personal data to a remote server.

Data used

Current page title, URL, origin, and path for tab display and identification
Audio settings such as volume, master gain, bass, treble, and enabled state
Timestamps used to expire stale tab records

Purpose

Restore settings for the current tab
Display other active Vedantu tabs inside the remote control list
Allow one open tab to update another tab's saved volume-related state

Terms of Use

By using this userscript, you accept responsibility for ensuring that your use complies with the rules of the websites you visit, your browser configuration, and applicable law.

The script is provided for personal browser customization.
You are responsible for checking site compatibility and audio behavior.
You should not rely on the script for safety-critical or business-critical use.

Disclaimer

This userscript is provided on an "as is" and "as available" basis without warranties of any kind. Audio behavior may vary by browser, website implementation, media player structure, autoplay restrictions, or Web Audio support.

No guarantee that every page exposes media elements identically
No guarantee that remote tab updates work outside the same browser storage scope
No guarantee that browser autoplay rules will always allow immediate audio processing

License Notice

Unless you replace this notice with your own preferred license, this script may be used, modified, and redistributed for personal or internal use, provided attribution to the script title is preserved.

Copyright (c) ${escapeHtml(String(year))}
Permission is hereby granted, free of charge, to use, copy, modify, and distribute this script for personal or internal use, subject to preservation of this notice.

`; } function openCodeAndLegalPage() { const html = buildLegalPageHtml(); const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.target = '_blank'; link.rel = 'noopener noreferrer'; document.body.appendChild(link); link.click(); link.remove(); setTimeout(() => URL.revokeObjectURL(url), 60000); } function getMediaElements() { return Array.from(document.querySelectorAll(MEDIA_SELECTOR)).filter((node) => node instanceof HTMLMediaElement); } function updateMediaCount() { if (!controls.mediaCount) return; controls.mediaCount.textContent = getMediaElements().length + ' media'; } function updateTabCount() { if (!controls.tabCount) return; const count = getKnownTabs().length; controls.tabCount.textContent = count + ' tab' + (count === 1 ? '' : 's'); } function getAudioContext() { const AudioContextClass = window.AudioContext || window.webkitAudioContext; if (!AudioContextClass) return null; if (!sharedAudioContext || sharedAudioContext.state === 'closed') { sharedAudioContext = new AudioContextClass(); } return sharedAudioContext; } function resumeAudioContext() { const context = getAudioContext(); if (!context || context.state !== 'suspended') return; context.resume().catch(() => {}); } function ensureGraph(media) { const existing = mediaGraphs.get(media); if (existing) return existing; const context = getAudioContext(); if (!context) return null; let source; try { source = context.createMediaElementSource(media); } catch { return null; } const inputGain = context.createGain(); const bassFilter = context.createBiquadFilter(); const trebleFilter = context.createBiquadFilter(); const outputGain = context.createGain(); bassFilter.type = 'lowshelf'; bassFilter.frequency.value = 200; trebleFilter.type = 'highshelf'; trebleFilter.frequency.value = 3200; source.connect(inputGain); inputGain.connect(bassFilter); bassFilter.connect(trebleFilter); trebleFilter.connect(outputGain); outputGain.connect(context.destination); const graph = { inputGain, bassFilter, trebleFilter, outputGain }; mediaGraphs.set(media, graph); return graph; } function applyStateToMedia(media) { const enabled = state.enabled; const elementVolume = enabled ? state.volume / 100 : 1; const preamp = enabled ? state.preamp / 100 : 1; media.volume = clamp(elementVolume, 0, 1); const graph = ensureGraph(media); if (!graph) return; graph.inputGain.gain.value = enabled ? Math.max(1, elementVolume) : 1; graph.outputGain.gain.value = enabled ? Math.max(0, preamp) : 1; graph.bassFilter.gain.value = enabled ? state.bass : 0; graph.trebleFilter.gain.value = enabled ? state.treble : 0; } function applyStateToAllMedia() { for (const media of getMediaElements()) { applyStateToMedia(media); } updateMediaCount(); } function renderRemoteTabs() { if (!controls.remoteList) return; const tabs = getKnownTabs().filter((entry) => entry.tabId !== tabId); controls.remoteList.innerHTML = ''; if (!tabs.length) { controls.remoteList.innerHTML = '

No other active Vedantu tabs detected yet.

'; updateTabCount(); return; } for (const entry of tabs) { const card = document.createElement('div'); card.className = 'tm-remote-card'; card.setAttribute('data-tab-id', entry.tabId); card.innerHTML = `

${escapeHtml(entry.title || 'Untitled tab')}

${escapeHtml(entry.path || '')} · volume ${escapeHtml(String(entry.volume))}%

${escapeHtml(String(clamp(Number(entry.volume) || 0, 0, 300)))}%

`; controls.remoteList.appendChild(card); } updateTabCount(); } function scheduleRemoteRefresh() { clearTimeout(refreshRemoteTimer); refreshRemoteTimer = window.setTimeout(() => { renderRemoteTabs(); }, 60); } function setupMediaListeners() { const handleMediaEvent = (event) => { const media = event.target; if (!(media instanceof HTMLMediaElement)) return; resumeAudioContext(); applyStateToMedia(media); updateMediaCount(); }; document.addEventListener('play', handleMediaEvent, true); document.addEventListener('loadedmetadata', handleMediaEvent, true); document.addEventListener('pointerdown', resumeAudioContext, { passive: true }); document.addEventListener('keydown', resumeAudioContext, { passive: true }); } function setupStorageListener() { window.addEventListener('storage', (event) => { if (!event.key) return; if (event.key === ownStorageKey && event.newValue) { const payload = parseJSON(event.newValue, null); adoptIncomingState(payload); return; } if (event.key.startsWith(TAB_STORAGE_PREFIX)) { scheduleRemoteRefresh(); } }); } function setupMutationObserver() { const target = document.querySelector('#vedantu-paper-video') || document.querySelector('#app') || document.body; if (!target) return; const observer = new MutationObserver((mutations) => { let foundMedia = false; for (const mutation of mutations) { for (const node of mutation.addedNodes) { if (!(node instanceof Element)) continue; if (node.matches?.(MEDIA_SELECTOR) || node.querySelector?.(MEDIA_SELECTOR)) { foundMedia = true; break; } } if (foundMedia) break; } if (foundMedia) { applyStateToAllMedia(); } }); observer.observe(target, { childList: true, subtree: true }); } function registerMenu() { if (typeof GM_registerMenuCommand !== 'function') return; GM_registerMenuCommand('Open Volume Hub Code and Legal page', () => { openCodeAndLegalPage(); }); GM_registerMenuCommand('Reset Volume Hub for this tab', () => { const panelOpen = state.panelOpen; state = { ...defaultState, panelOpen }; syncInputs(); render(); applyStateToAllMedia(); saveState(); }); } function cleanupStaleTabs() { const now = Date.now(); const toRemove = []; for (let index = 0; index < localStorage.length; index += 1) { const key = localStorage.key(index); if (!key || !key.startsWith(TAB_STORAGE_PREFIX)) continue; const payload = parseJSON(localStorage.getItem(key), null); if (!payload || !payload.updatedAt || now - payload.updatedAt > TAB_TTL_MS) { toRemove.push(key); } } for (const key of toRemove) { localStorage.removeItem(key); } } function startHeartbeat() { cleanupStaleTabs(); saveState(); window.setInterval(() => { cleanupStaleTabs(); saveState(); renderRemoteTabs(); }, HEARTBEAT_MS); } function init() { injectStyles(); setupChannel(); createUI(); setupMediaListeners(); setupStorageListener(); setupMutationObserver(); registerMenu(); applyStateToAllMedia(); startHeartbeat(); renderRemoteTabs(); window.addEventListener('pagehide', () => { saveState({ announce: false }); }, { passive: true }); document.addEventListener('visibilitychange', () => { if (!document.hidden) { cleanupStaleTabs(); saveState(); renderRemoteTabs(); applyStateToAllMedia(); } }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init, { once: true }); } else { init(); } } main();