From aradotso-trending-skills-37
Provides instructions for installing in developer mode, customizing features, debugging, and extending the open-source SuperLevels Chrome extension with tools like tab cleaner, cookie editor, and dark mode.
npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin aradotso-trending-skills-37This skill uses the workspace's default tool permissions.
> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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.
git clone https://github.com/levelsio/superlevels.git
cd superlevels
chrome://extensions/superlevels folderNo build step required — pure JavaScript, loads directly.
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_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"
}
}
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;
}
// 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);
// 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);
})();
// 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;
}
});
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();
}
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();
})();
// 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 });
async function getCurrentDomain() {
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
try {
return new URL(tab.url).hostname;
} catch {
return null;
}
}
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 });
}
}
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
| 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 |
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.