superlevels-chrome-extension

name	superlevels-chrome-extension
description	Open-source Chrome extension replacing 12+ browser extensions with privacy-respecting tools including tab cleaner, cookie editor, dark mode, JS toggle, GDPR dismisser, and more.
triggers	["add superlevels extension","customize superlevels feature","add new feature to superlevels","how to install superlevels","debug superlevels extension","configure superlevels tab cleaner","superlevels music recognizer setup","fork and modify superlevels"]

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"
       
    
  
   
     
     
  

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

     tabHost =  (tab.).;
     (excludedHosts.( tabHost.(h))) ;

     lastActive = tabLastActive[tab.] || tab. || ;
     (now - lastActive > timeoutMs) {
      
       (tab);
      chrome..(tab.);
    }
  }
}

  () {
   { recentlyClosed = [] } =  chrome...([]);
  recentlyClosed.({ : tab., : tab., : .() });
   trimmed = recentlyClosed.(, ); 
   chrome...({ : trimmed });
}


(cleanInactiveTabs,  * );

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();
    }
    ({ :  });
  }
});


( () => {
   domain = location.;
   { []: enabled, []: brightness }
    =  chrome...([, ]);
   (enabled) (brightness || );
})();

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..({ : , :  });
  chrome..({
    : { : tab. },
    :  {
       style = .();
       (!style) {
        style = .();
        style. = ;
        ..(style);
      }
      style. = css;
    },
    : [css]
  });
});


cssTextarea.(,  {
   (e. === ) {
    e.();
     start = cssTextarea.;
     end = cssTextarea.;
    cssTextarea. = cssTextarea..(, start) +  + cssTextarea..(end);
    cssTextarea. = cssTextarea. = start + ;
  }
});

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 =  {
    chunks.( (e..()));
  };

  source.(processor);
  processor.(audioContext.);

    ( (resolve, )); 

  stream.().( t.());
  processor.();

  
   wavBlob = (chunks, audioContext.);
   result =  (wavBlob, settings);

  
   (result?.?.?.[]) {
     song = result..[];
     { recognitionHistory = [] } =  chrome...([]);
    recognitionHistory.({
      : song.,
      : song.?.[]?.,
      : song.?.,
      : .()
    });
     chrome...({ : recognitionHistory.(, ) });
  }
}

  () {
   timestamp = .(.() / );
   stringToSign = ;

  
   encoder =  ();
   keyData = encoder.(acrcloud_secret);
   cryptoKey =  crypto..(, keyData, { : , :  }, , []);
   signature = (.(... (
     crypto..(, cryptoKey, encoder.(stringToSign))
  )));

   formData =  ();
  formData.(, audioBlob, );
  formData.(, acrcloud_key);
  formData.(, );
  formData.(, );
  formData.(, signature);
  formData.(, audioBlob.);
  formData.(, timestamp);

   response =  (, {
    : ,
    : formData
  });
   response.();
}

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) => {
   (msg. === ) {
     (msg.) ();
     ();
  }
});


( () => {
   domain = location.;
   enabled =  (, domain, );
   (enabled) ();
})();

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) {
     el = .(selector);
     (el) el..(, , );
  }
}


();
 observer =  (dismissGDPRBanners);
observer.(., { : , :  });

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.