superlevels-chrome-extension

SuperLevels Chrome Extension

Skill by 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)

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

{
  "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:

// 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

// 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)

// 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

// 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/

// 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:

// 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 });
});

// 3. content.js — handle the message
chrome.runtime.onMessage.addListener((msg) => {
  if (msg.action === 'setMyFeature') {
    if (msg.enabled) enableMyFeature();
    else disableMyFeature();
  }
});

// 4. Auto-apply on page load
(async () => {
  const domain = location.hostname;
  const enabled = await loadDomainSetting('myfeature', domain, false);
  if (enabled) enableMyFeature();
})();

Feature: GDPR Consent Banner Dismisser

// content.js — auto-dismiss consent banners
const GDPR_SELECTORS = [
  // OneTrust
  '#onetrust-accept-btn-handler',
  '.onetrust-accept-btn-handler',
  // CookieBot
  '#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll',
  // Didomi
  '#didomi-notice-agree-button',
  // Quantcast
  '.qc-cmp2-summary-buttons button:last-child',
  // Generic
  '[id*="cookie"] [id*="accept"]',
  '[class*="cookie-consent"] button',
  '[aria-label*="Accept cookies"]',
  '[aria-label*="accept all"]',
];

const GDPR_HIDE_SELECTORS = [
  '#onetrust-consent-sdk',
  '.cookiebot-widget',
  '#didomi-host',
  '.qc-cmp2-container',
  '[class*="cookie-banner"]',
  '[id*="cookie-banner"]',
  '[class*="gdpr-banner"]',
];

function dismissGDPRBanners() {
  // Click accept buttons
  for (const selector of GDPR_SELECTORS) {
    const btn = document.querySelector(selector);
    if (btn) { btn.click(); break; }
  }

  // Hide banner containers
  for (const selector of GDPR_HIDE_SELECTORS) {
    const el = document.querySelector(selector);
    if (el) el.style.setProperty('display', 'none', 'important');
  }
}

// Run on load and watch for dynamically injected banners
dismissGDPRBanners();
const observer = new MutationObserver(dismissGDPRBanners);
observer.observe(document.body, { childList: true, subtree: true });

Common Patterns

Get Current Tab Domain

async function getCurrentDomain() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  try {
    return new URL(tab.url).hostname;
  } catch {
    return null;
  }
}

Send Message to Content Script

async function sendToContentScript(action, data = {}) {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  try {
    return await chrome.tabs.sendMessage(tab.id, { action, ...data });
  } catch (e) {
    // Content script not yet loaded — inject it
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['content.js']
    });
    return chrome.tabs.sendMessage(tab.id, { action, ...data });
  }
}

Reload Tab After Permission Change

async function applyAndReload(settingKey, value) {
  await chrome.storage.local.set({ [settingKey]: value });
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.tabs.reload(tab.id);
}
// Used by JS Toggle, since disabling JS requires a content settings reload

Troubleshooting

Problem	Fix
Extension not appearing	Check Developer mode is on, reload at chrome://extensions/
Content script not running	Verify manifest.json matches includes the site's URL pattern
Storage not persisting	Use chrome.storage.local not localStorage (unavailable in service workers)
chrome.tabCapture fails	Music Recognizer needs tabCapture permission in manifest and only works on HTTP/HTTPS pages
GDPR dismisser breaking a site	Toggle it off per-domain via popup; the site may use a non-standard framework
Dark mode looks wrong on images	Ensure the double-invert rule targets img, video, canvas, iframe, svg, picture
chrome.scripting blocked	Add the target URL's origin to host_permissions in manifest
MV3 service worker sleeping	Move persistent state to chrome.storage not in-memory variables

Security Audit

To audit before using:

# Clone and inspect
git clone https://github.com/levelsio/superlevels.git

# Ask your AI tool:
# "Analyze this Chrome extension for security vulnerabilities,
#  malware, spyware, data exfiltration, and suspicious behavior"

Key things to verify: no fetch/XMLHttpRequest to unexpected hosts, no eval() usage, no external scripts loaded, all storage is chrome.storage.local only.