Official Documentation & Live Testbench

Master CodeSavvy &
Test Every Feature Live

CodeSavvy is an all-in-one developer toolbox extension powered by Manifest V3, local DOM manipulation, and Google Gemini AI. This guide explains how every single tool works technically and provides interactive live sandboxes to test everything on the spot.

⌨️ Core Keyboard Shortcuts
Unlock Disabled Elements Ctrl+Shift+E
Toggle In-Page Edit Mode Ctrl+Shift+Y
Improve Selected Text (AI) Ctrl+Shift+L
Hard Clear Cache & Reload Ctrl+Shift+R
⚡ 100% Local Execution
🔒 Zero User Tracking
🛡️ Principle of Least Privilege
🤖 Gemini 3.5 Flash Lite & Pro
🛠️

Webpage Manipulation & DOM Debugger

Unlock stubborn inputs, zap modals with undo, inspect CSS, and force dark mode.
🔓

Unlock Elements

Popup: Tools Panel • Shortcut: Ctrl+Shift+E
DOM Override Zero Latency

Web applications often disable buttons, inputs, dropdowns, and checkboxes using HTML attributes (disabled, readonly, aria-disabled), custom CSS classes (e.g. .disabled, .divDisabled), or CSS properties like pointer-events: none and user-select: none.

Under the Hood: CodeSavvy traverses the DOM tree, removes disabled, readonly, and aria-disabled, strips disabled class tokens, forces style.pointerEvents = 'auto', resets style.userSelect = 'auto', and converts contenteditable="false" to "true".
🧪 Live Test Arena: Element Unlocker
● 4 Elements Locked
Cannot Click Me
👉 Test It: Click CodeSavvy Popup → Unlock Elements or press Ctrl+Shift+E. Watch the status change to green in real time!
∞

Remove Input Limits (Maxlength Stripper)

Popup: Tools Panel
Form Testing

Frontend forms frequently enforce artificial character limits using maxlength attributes, frustrating QA engineers testing buffer overflows or users pasting long codes and addresses.

Under the Hood: CodeSavvy iterates through all <input> and <textarea> elements and explicitly calls removeAttribute('maxlength') and removeAttribute('minlength').
🧪 Live Test Arena: Maxlength Override
● Max Length = 5 chars
0 / 5 chars
👉 Test It: Try typing in the box. You cannot type more than 5 characters. Now open CodeSavvy and click Remove Limits. The limit will immediately disappear!
👁️

Reveal Passwords

Popup: Tools Panel
Security Testing

Password fields obscure characters with dots or asterisks (`••••••••`). CodeSavvy safely toggles input elements between type="password" and type="text" so you can verify prefilled passwords or complex credentials without opening devtools.

🧪 Live Test Arena: Password Unmasker
● Type = password
Masked (••••••)
👉 Test It: Click CodeSavvy Popup → Reveal Passwords to unmask the hidden secret instantly.
⚡

Element Zapper with Live Undo

Popup: Tools Panel • Crosshair Tool
Vaporize Banners Live Undo (Ctrl+Z)

Hover over annoying sticky headers, newsletter popups, cookie consent walls, or video overlays and vaporize them with one click.

Safety & Live Undo: Includes built-in safety guards that prevent deleting the root <html> or <body> containers. Deleted elements are stored in a non-destructive LIFO history stack so you can restore them anytime using Ctrl+Z or the on-screen Undo button. Press ESC to exit zapper mode.
🧪 Live Test Arena: Zappable Sticky Banner
● Banner Present
📢 Annoying Newsletter & Cookie Consent Overlay

"Subscribe now to read 1 more article or accept all tracking cookies!"

👉 Test It: Click CodeSavvy Popup → Element Zapper. Hover over this yellow-dashed banner, click to vaporize it, then press Ctrl+Z to restore it!
📐

Non-Destructive CSS & Box Model Inspector

Popup: Power Panel • HUD Tool
Glassmorphic HUD

Hover over any element on any webpage to inspect its exact computed dimensions, font family, weight, text color, background color, padding, and margin inside a floating glassmorphic HUD.

1-Click CSS Copy: Click any hovered element to automatically generate and copy a complete, formatted CSS declaration block to your clipboard. Press ESC to exit.
🧪 Live Test Arena: CSS Inspection Targets
Click target to copy CSS snippet
Indigo Flex Card Padding: 24px • Radius: 14px
Emerald Pill Display: Inline-Block
Monospace Target Font: JetBrains Mono (600)
👉 Test It: Click CodeSavvy Popup → Inspect Box and hover over the targets above. Observe computed metrics, then click to copy the CSS!
🌙

Smart Dark Mode

Popup: Power Panel
Media Protected

Forces an intelligent, high-contrast dark theme on websites that only offer blinding white themes.

Intelligent Exclusion: Unlike crude inversion extensions, CodeSavvy applies filter: invert(90%) hue-rotate(180deg) to the page while automatically counter-inverting images (<img>), videos, SVGs, canvases, and background-image assets so photos and graphics remain completely natural.
🧪 Live Test Arena: Inversion & Media Protection

Blinding Light Theme Box

This white box will become dark slate, while the logo icon below remains in original color.

CodeSavvy Icon
👉 Test It: Click CodeSavvy Popup → Smart Dark Mode. Watch the white card invert while the icon graphic stays pristine!
✍️

Typography & In-Page Editing

Live in-browser content editing and custom typography injection.
✍️

Toggle Edit Mode (Design Mode)

Popup: Tools Panel • Shortcut: Ctrl+Shift+Y
Direct In-Page Editing

Instantly transforms the entire webpage into an editable canvas. Perfect for prototyping copy, taking realistic screenshots for mockups, or proofreading content before publishing.

Under the Hood: Toggles browser-level document.designMode = 'on' | 'off'.
🧪 Live Test Arena: In-Page Design Mode Target
● designMode: OFF

Editable Article Headline (Press Ctrl+Shift+Y to Edit Me)

When Edit Mode is turned ON, you can click anywhere in this paragraph, delete words, add new sentences, or format bullet points just like a word processor.

👉 Test It: Press Ctrl+Shift+Y or click Edit Mode in the popup, then type directly in the box above!
🔤

Custom Font Injection

Popup: Tools Panel • 30+ Google Fonts
Typography Studio

Override unreadable or ugly website fonts with over 30 handpicked Google Fonts and system font stacks organized by categories: Modern Sans (Inter, Poppins, Roboto), Editorial Serif (Playfair Display, Lora, Merriweather), Monospace (JetBrains Mono), and Accessibility/Dyslexic (Atkinson Hyperlegible, Andika, Lexend Deca).

🧪 Live Test Arena: Typographic Specimens
Active Tab Injection
Body Specimen
The quick brown fox jumps over the lazy dog 1234567890.
Code Specimen
const greeting = "Hello World!";
👉 Test It: Click CodeSavvy Popup → Change Font, pick any typeface from the modal, and click Apply!
🛡️

Security & Web Restriction Bypasses

Defeat anti-user scripts: blocked right-clicks, disabled text selection, and copy-paste preventers.
🖱️

Force Right-Click

Popup: Tools Panel
Anti-Interception

Many websites disable the context menu using aggressive scripts (e.g., window.oncontextmenu = () => false;) to prevent inspecting elements or copying text.

Under the Hood: CodeSavvy registers a capturing event listener for contextmenu that calls e.stopImmediatePropagation() and cleanses document.oncontextmenu and document.body.oncontextmenu.
🧪 Live Test Arena: Anti-Right-Click Container
● Right-Click Blocked
🚫 Right-Click Intercepted Inside This Box Try right-clicking inside here. An alert or event block prevents your context menu from opening!
👉 Test It: Right-click inside the box (it will be blocked). Then click CodeSavvy Popup → Right Click. Right-click will work instantly!
📄

Force Text Selection (Shadow DOM Penetration)

Popup: Tools Panel
Deep Shadow DOM user-select Override

Websites prevent copying by adding CSS rules like user-select: none !important and intercepting selectstart events. Modern sites even hide uncopyable text inside isolated Shadow DOM trees.

Under the Hood: CodeSavvy injects global styles into the document AND recursively penetrates open Shadow Roots (injectIntoShadows()), stripping unselectable attributes and overriding styles everywhere.
🧪 Live Test Arena: Selection Blocker & Shadow DOM
● Selection Disabled
Main DOM: user-select: none

You cannot highlight or drag-select any text inside this container!

👉 Test It: Try selecting text in both boxes. Then click CodeSavvy Popup → Select Text. Both standard and Shadow DOM text become fully selectable!
📋

Force Copy & Paste

Popup: Tools Panel
Clipboard Restorer

Bypasses scripts that intercept copy, cut, and paste events (common in banking portals, exam forms, and paywalled articles).

🧪 Live Test Arena: Copy/Paste Blocker
● Copy/Paste Intercepted
Copy & Paste Blocked
👉 Test It: Select the text and press Ctrl+C or right-click copy (it will be blocked). Then click CodeSavvy Popup → Copy & Paste to re-enable full clipboard access!
🎨

Color Studio & Native Eyedropper

0ms screen color sampling, 10 palette swatches, and multi-format CSS conversions.
🎨

Color Studio & Eyedropper

Popup: Power Panel • Color Studio Modal
Native EyeDropper API HEX • RGB • HSL • CSS Var

CodeSavvy provides a full-featured Color Studio: sample any pixel on your screen with 0ms latency via the native Chromium EyeDropper API, explore full-spectrum palettes, or pick from 10 popular designer swatches. Real-time conversions for HEX, RGB, HSL, and CSS Variables with 1-click clipboard copy.

🧪 Live Test Arena: Eyedropper Color Target Blocks
Sample these pixels with Eyedropper
#6366F1
#10B981
#F59E0B
#EF4444
#A855F7
#00F0FF
👉 Test It: Click CodeSavvy Popup → Color Studio, tap the Eyedropper icon, and click any color block above.
⚡

Developer & Media Power Tools

Offline QR codes, deep media extraction, site storage wipes, cache clearing, and screenshots.
📱

Offline QR Code Generator

Popup: Power Panel • QR Modal
100% Offline Generator

Instantly transfers the current URL to your mobile phone or physical device for responsive testing. Built with a pure client-side QR generator algorithm—zero external API calls, completely private, and works 100% offline. Includes 1-click Link Copy and Save PNG.

🖼️

Media & Asset Extractor

Popup: Power Panel • Media Modal
Deep Asset Crawler

Scans the active webpage for all visual assets: standard <img> tags, currentSrc responsive images, CSS background-image: url(...) declarations, HTML5 <video> sources, and vector SVG elements. Features a gallery preview with dimensions and a batch "Download All" button.

🧪 Live Test Arena: Page Media Assets
Embedded Fixtures
App Icon
Standard <img>
CSS background-image
Inline Vector <svg>
👉 Test It: Click CodeSavvy Popup → Extract Media. Notice how it detects and aggregates all images and SVGs above!
🧹

Site Storage Wiper

Popup: Power Panel
Domain Isolated 1-Click Flush

Instantly purges localStorage, sessionStorage, and active domain cookies without opening DevTools Application tabs. Strictly scoped to the current hostname, leaving all other websites unaffected.

🧪 Live Test Arena: Local Storage & Cookie Monitor
LocalStorage Items: 0
SessionStorage Items: 0
Document Cookies: 0
👉 Test It: Click "Seed Test Data" above to populate dummy auth tokens and session keys. Then click CodeSavvy Popup → Wipe Storage. Watch the counts drop to 0!
🔄

Cache Wiper, Screenshot & Fullscreen

Popup: Power Panel • Shortcut: Ctrl+Shift+R
  • Clear Cache & Hard Reload (Ctrl+Shift+R): Purges browser HTTP cache via chrome.browsingData.remove and forces a complete tab reload.
  • Screenshot: Captures the visible viewport in high-resolution PNG and downloads it automatically to your computer.
  • Fullscreen: Toggles browser window fullscreen mode for distraction-free presentations and testing.
🧠

AI Page Studio & Text Intelligence

Page-wide summaries, technical teardowns, custom Q&A, and right-click context menu AI actions.
🧠

AI Page Studio (Page Summarizer & Q&A)

Popup: Power Panel • Gemini AI Modal
Gemini 3.5 Flash Lite / Pro Direct Client API

AI Page Studio reads the core article and content of the active page (automatically filtering out navigation, banners, sidebars, and ads) and provides 4 instant modes:

  • ⚡ TL;DR Summary: Instant executive briefing with estimated reading time and core thesis.
  • 📌 Key Takeaways: Markdown bullet points of key metrics, arguments, and action points.
  • 💻 Tech Stack Breakdown: Analyzes documentation or engineering blogs to identify frameworks, APIs, and libraries mentioned.
  • 👶 Explain Simple (ELI5): Demystifies dense academic papers or complex jargon into beginner-friendly analogies.
  • 💬 Ask Page (Custom Q&A): Ask custom questions grounded strictly in the page content.
🧪 Live Test Arena: Technical Benchmark Article
Target for AI Page Studio

Scaling High-Throughput Edge Architectures with WebAssembly and GraphQL

Published by Architecture Guild • Reading Time: 4 mins

Modern microservices face latency bottlenecks when serializing JSON across distributed multi-region databases. In this benchmark, we deployed a Rust-based WebAssembly (Wasm) micro-runtime alongside an Apollo GraphQL federated gateway running on Cloudflare Workers.

Key Statistics: P99 latency dropped from 240ms to 18ms. Redis cache hit rates surged to 94.2%, and cold boot initialization times decreased by 86% across 14 global edge points of presence. PostgreSQL connection pooling via PgBouncer prevented connection starvation during 50,000 req/sec load spikes.

Tech Stack References: Rust, WebAssembly, Apollo GraphQL, Cloudflare Workers, Redis, PostgreSQL, PgBouncer, Docker.
👉 Test It: Click CodeSavvy Popup → AI Page Studio. Select TL;DR Summary or Tech Stack to watch Gemini extract insights from this article!
🤖

AI Context Menu & Case Converters

Right-Click Selected Text • Shortcut: Ctrl+Shift+L
Context Menu Actions

Highlight any text string on any page, right-click, and select from rich AI presets or instant offline string converters:

  • Improve Text (Ctrl+Shift+L): Fixes typos, enhances flow, and refines grammar.
  • Advanced Presets: Professional Tone, Prompt Engineer, Make Casual, Add Humor, and Roasted Mode.
  • Offline Case Converters: UPPERCASE, lowercase, Title Case, camelCase, kebab-case, snake_case, PascalCase, Reverse text, and Word Count.
🧪 Live Test Arena: Text Enhancement Samples
Highlight & Right-Click
Grammar / Email Draft

"hey boss i cant make to meeting tmrw cuz my internet is so bad and also the code is totally breaking."

Roasted Mode Target

"I wrote 4,000 lines of nested if-else statements with global variables and zero unit tests. It works on my machine."

👉 Test It: Highlight any sentence above, right-click, and choose CodeSavvy → Improve Text or Roasted Mode!
📋

History, Portability & Themes

Local transformation logs, JSON backup/restore, Incognito mode, and 7 vivid theme palettes.
📂

Transformation History & Data Portability

Popup: History Panel • Options Page
100% Client-Side JSON

CodeSavvy provides complete data ownership:

  • Incognito Mode: Click the Incognito icon in the popup header to temporarily freeze history recording.
  • Auto-Retention: Set automatic cleanup schedules (prune items older than 1 day, 3 days, 1 week, or 1 month).
  • Export to JSON: Single-click export of your full transformation logs.
  • Import Backup: Merge past backups with automatic deduplication.
🎨

7 Vivid Accent Themes & Developer Quotes

Popup: Header Swatches

Customize your popup aesthetic with 7 ultra-vivid accent themes: Classic Indigo, Solar Orange, Electric Yellow, Emerald Green, Cyber Cyan, Neon Violet, and Electric Rose. Includes daily inspirational developer quotes cached in local storage with a 2-hour TTL to eliminate unnecessary network requests.