superlevels-chrome-extension

What this skill does

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

  con