superlevels-chrome-extension

# SuperLevels Chrome Extension > Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection. SuperLevels is an open-source Chrome extension that consolidates 12+ browser tools into one auditable, privacy-respecting package. Features include tab cleaning, cookie editing, dark mode, JS toggle, GDPR consent dismissal, live CSS editing, YouTube unhooking, music recognition, Picture-in-Picture, and JSON formatting — all stored locally with zero telemetry. ## Installation (Developer Mode) ```bash git clone https://github.com/levelsio/superlevels.git cd superlevels ``` 1. Open Chrome → `chrome://extensions/` 2. Enable **Developer mode** (top-right toggle) 3. Click **Load unpacked** → select the `superlevels` folder 4. The 🚀 icon appears in your toolbar No build step required — pure JavaScript, loads directly. ## Project Structure ``` superlevels/ ├── manifest.json # Extension manifest (permissions, content scripts) ├── popup.html # Main popup UI ├── popup.js # Popup logic and feature coordination ├── background.js # Service worker (tab events, redirects, storage) ├── content.js # Injected into pages (dark mode, CSS, GDPR, etc.) ├── features/ # Individual feature modules (if separated) ├── icons/ # Extension icons └── demo.gif # Demo animation ``` ## manifest.json Key Patterns ```json { "manifest_version": 3, "name": "SuperLevels", "version": "1.0", "permissions": [ "tabs", "cookies", "storage", "scripting", "webNavigation", "activeTab" ], "host_permissions": ["<all_urls>"], "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"], "run_at": "document_start" } ], "action": { "default_popup": "popup.html", "default_icon": "icons/icon48.png" } } ``` ## Storage Pattern (All Features) SuperLevels uses `chrome.storage.local` exclusively — no external storage: ```javascript // Save a setting async function saveSetting(key, value) { await chrome.storage.local.set({ [key]: value }); } // Load a setting with default async function loadSetting(key, defaultValue) { const result = await chrome.storage.local.get([key]); return result[key] !== undefined ? result[key] : defaultValue; } // Per-domain settings pattern async function saveDomainSetting(feature, domain, value) { const storageKey = `${feature}_${domain}`; await chrome.storage.local.set({ [storageKey]: value }); } async function loadDomainSetting(feature, domain, defaultValue) { const storageKey = `${feature}_${domain}`; const result = await chrome.storage.local.get([storageKey]); return result[storageKey] !== undefined ? result[storageKey] : defaultValue; } ``` ## Feature: Tab Cleaner ```javascript // background.js — track tab activity const tabLastActive = {}; chrome.tabs.onActivated.addListener(({ tabId }) => { tabLastActive[tabId] = Date.now(); }); chrome.tabs.onUpdated.addListener((tabId, changeInfo) => { if (changeInfo.status === 'complete') { tabLastActive[tabId] = Date.now(); } }); async function cleanInactiveTabs() { const settings = await chrome.storage.local.get(['tabTimeout', 'excludedHosts']); const timeoutMs = (settings.tabTimeout || 5) * 60 * 1000; const excludedHosts = settings.excludedHosts || []; const tabs = await chrome.tabs.query({}); const now = Date.now(); for (const tab of tabs) { if (tab.active || tab.pinned) continue; const tabHost = new URL(tab.url).hostname; if (excludedHosts.some(h => tabHost.includes(h))) continue; const lastActive = tabLastActive[tab.id] || tab.lastAccessed || 0; if (now - lastActive > timeoutMs) { // Save to recently closed before removing await saveRecentlyClosed(tab); chrome.tabs.remove(tab.id); } } } async function saveRecentlyClosed(tab) { const { recentlyClosed = [] } = await chrome.storage.local.get(['recentlyClosed']); recentlyClosed.unshift({ url: tab.url, title: tab.title, closedAt: Date.now() }); const trimmed = recentlyClosed.slice(0, 20); // keep last 20 await chrome.storage.local.set({ recentlyClosed: trimmed }); } // Run cleaner on interval setInterval(cleanInactiveTabs, 60 * 1000); ``` ## Feature: Dark Mode (Content Script) ```javascript // content.js — dark mode via CSS filter function applyDarkMode(brightness = 90) { let style = document.getElementById('superlevels-darkmode'); if (!style) { style = document.createElement('style'); style.id = 'superlevels-darkmode'; document.head.appendChild(style); } style.textContent = ` html { filter: invert(1) hue-rotate(180deg) brightness(${brightness}%) !important; } img, video, canvas, iframe, svg, picture { filter: invert(1) hue-rotate(180deg) !important; } `; } function removeDarkMode() { const style = document.getElementById('superlevels-darkmode'); if (style) style.remove(); } // Listen for messages from popup chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { if (msg.action === 'setDarkMode') { if (msg.enabled) { applyDarkMode(msg.brightness || 90); } else { removeDarkMode(); } sendResponse({ ok: true }); } }); // Auto-apply on load if enabled for this domain (async () => { const domain = location.hostname; const { [`darkmode_${domain}`]: enabled, [`darkmode_brightness_${domain}`]: brightness } = await chrome.storage.local.get([`darkmode_${domain}`, `darkmode_brightness_${domain}`]); if (enabled) applyDarkMode(brightness || 90); })(); ``` ## Feature: Live CSS Editor ```javascript // content.js — inject and update custom CSS function applyCustomCSS(css) { let style = document.getElementById('superlevels-custom-css'); if (!style) { style = document.createElement('style'); style.id = 'superlevels-custom-css'; document.head.appendChild(style); } style.textContent = css; } // popup.js — save and send CSS as user types const cssTextarea = document.getElementById('css-editor'); const domain = new URL((await chrome.tabs.query({ active: true, currentWindow: true }))[0].url).hostname; cssTextarea.addEventListener('input', async () => { const css = cssTextarea.value; await chrome.storage.local.set({ [`css_${domain}`]: css }); const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, func: (css) => { let style = document.getElementById('superlevels-custom-css'); if (!style) { style = document.createElement('style'); style.id = 'superlevels-custom-css'; document.head.appendChild(style); } style.textContent = css; }, args: [css] }); }); // Handle Tab key for indentation cssTextarea.addEventListener('keydown', (e) => { if (e.key === 'Tab') { e.preventDefault(); const start = cssTextarea.selectionStart; const end = cssTextarea.selectionEnd; cssTextarea.value = cssTextarea.value.substring(0, start) + ' ' + cssTextarea.value.substring(end); cssTextarea.selectionStart = cssTextarea.selectionEnd = start + 2; } }); ``` ## Feature: Music Recognizer (ACRCloud) Requires your own ACRCloud API credentials — sign up free at https://www.acrcloud.com/sign-up/ ```javascript // popup.js — capture tab audio and identify async function recognizeMusic() { const settings = await chrome.storage.local.get(['acrcloud_host', 'acrcloud_key', 'acrcloud_secret']); if (!settings.acrcloud_host || !settings.acrcloud_key || !settings.acrcloud_secret) { showError('Add your ACRCloud API credentials in settings first.'); return; } // Capture audio from current tab (10 seconds) const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); const stream = await chrome.tabCapture.capture({ audio: true, video: false }); const audioContext = new AudioContext(); const source = audioContext.createMediaStreamSource(stream); const processor = audioContext.createScriptProcessor(4096, 1, 1); const chunks = []; processor.onaudioprocess = (e) => { chunks.push(new Float32Array(e.inputBuffer.getChannelData(0))); }; source.connect(processor); processor.connect(audioContext.destination); await new Promise(resolve => setTimeout(resolve, 10000)); // record 10s stream.getTracks().forEach(t => t.stop()); processor.disconnect(); // Convert to WAV and send to ACRCloud const wavBlob = float32ArrayToWav(chunks, audioContext.sampleRate); const result = await queryACRCloud(wavBlob, settings); // Save to history if (result?.metadata?.music?.[0]) { const song = result.metadata.music[0]; const { recognitionHistory = [] } = await chrome.storage.local.get(['recognitionHistory']); recognitionHistory.unshift({ title: song.title, artist: song.artists?.[0]?.name, album: song.album?.name, recognizedAt: Date.now() }); await chrome.storage.local.set({ recognitionHistory: recognitionHistory.slice(0, 50) }); } } async function queryACRCloud(audioBlob, { acrcloud_host, acrcloud_key, acrcloud_secret }) { const timestamp = Math.floor(Date.now() / 1000); const stringToSign = `POST\n/v1/identify\n${acrcloud_key}\naudio\n1\n${timestamp}`; // HMAC-SHA1 signature (use SubtleCrypto) const encoder = new TextEncoder(); const keyData = encoder.encode(acrcloud_secret); const cryptoKey = await crypto.subtle.importKey('raw', keyData, { name: 'HMAC', hash: 'SHA-1' }, false, ['sign']); const signature = btoa(String.fromCharCode(...new Uint8Array( await crypto.subtle.sign('HMAC', cryptoKey, encoder.encode(stringToSign)) ))); const formData = new FormData(); formData.append('sample', audioBlob, 'sample.wav'); formData.append('access_key', acrcloud_key); formData.append('data_type', 'audio'); formData.append('signature_version', '1'); formData.append('signature', signature); formData.append('sample_bytes', audioBlob.size); formData.append('timestamp', timestamp); const response = await fetch(`https://${acrcloud_host}/v1/identify`, { method: 'POST', body: formData }); return response.json(); } ``` ## Adding a New Feature Follow this pattern to add a feature: ```javascript // 1. Add toggle in popup.html // <div class="feature" id="my-feature"> // <label>My Feature</label> // <input type="checkbox" id="my-feature-toggle"> // </div> // 2. popup.js — wire up the toggle const myFeatureToggle = document.getElementById('my-feature-toggle'); const domain = await getCurrentDomain(); // Load saved state myFeatureToggle.checked = await loadDomainSetting('myfeature', domain, false); myFeatureToggle.addEventListener('change', async () => { const enabled = myFeatureToggle.checked; await saveDomainSetting('myfeature', domain, enabled); // Send message to content script const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.tabs.sendMessage(tab.id, { action: 'setMyFeature', enabled }); });