CodeSavvy Extension - Interactive Sandbox

🔓

Unlock Elements

Remove disabled and readonly states

LOCKED

Disabled Input Field

Readonly Input Field

Disabled Custom Container (divDisabled)

🚫 This custom content box is locked via CSS classes (.divDisabled).

✂️

Remove Input Limits

Unlock field characters boundaries

MAX_LENGTH: 10

Test Area (Restricted to 10 characters max)

Restricted by maxlength="10" attribute 0 / 10

👁️

Reveal Passwords

Convert hidden text inputs dynamically

MASKED

Protected Password Field

When the password revealer runs, the extension shifts the type attribute of input fields from password to text.

🔤

Change Fonts

Test global typeface modifications

Typography Sandbox Zone

Headline Text Element

This text box is designed to verify Google Fonts styling. When you apply fonts via the CodeSavvy popup, you will see this typography adapt instantly.

✏️

Page Edit Mode

Toggles document.designMode state

Interactive Edit Sandbox

Try editing this heading directly!

Once Edit Mode is active (via the extension popup or the key combination Ctrl+Shift+Y), you can click directly on this paragraph and type/delete characters as if it were a word processor.

✨

Gemini AI Actions

Select text, right-click, select AI enhancement

Test 1: Spelling & Grammar (Improve Text)

this extension are very good, it help me to debugs my webpages fastly.

Test 2: Professional Tone

yo i need this code done by tomorrow can u write me a function that fetches api data and handles errors thanks bro

Test 3: Roasted Mode & Humor

I spent 6 hours debugging a typo in a CSS class name, and it turned out I spelled 'flex' as 'flxe'.

Test 4: Prompt Engineering

write a script in python that parses a CSV file and calculates the averages of the second column

🔀

Transformations & Layouts

Right-click to swap casing or fix layouts

Case Transformations Playground

tHis IS a tESt SeNTeNCe foR CaSe CONveRSiON.

Layout: English to Arabic layout (sghl -> سلام)

Type with wrong layout: sghl

Layout: Arabic to English layout (ي -> d)

Type with wrong layout: ي

🖌️

Highlighting & Utilities

Interactive highlighter and layout utilities

Highlighter Zone

Highlight any selection of text inside this sentence. Right-click, expand "Text Actions" and choose "Highlight Text". It will immediately wrap your selected characters in a yellow highlight.

active_window_preview.png

📷 CodeSavvy Screenshot Target

Use the screenshot button in the extension popup to capture this canvas.

🖱️

Right-Click Blocker

Blocks default context menus

BLOCKED

Context Menu Test Zone

Try right-clicking inside this box. A warning log and alert will trigger, and the context menu will be blocked.

How it works: The page listens to the contextmenu event and executes e.preventDefault(). Bypassing it overrides this capture phase.

🔤

Text Selection Blocker

Restricts highlighting and copying

BLOCKED

Selection Test Zone

This text is completely unselectable! It has user-select: none style applied and is covered by an invisible transparent shield div to block drags.

How it works: Clicking the Select Text button injects a global stylesheet overriding all user-select properties and removes unselectable elements/overlays.

📋

Copy & Paste Blocker

Blocks clipboard operations

BLOCKED

Copy Test Zone

Highlight and copy this text: "CS-SECRET-PASSPHRASE". The site will intercept the copy event and block it.

Paste Test Zone (Try pasting here)

How it works: The site blocks copy, cut, and paste events. CodeSavvy registers high-priority capturing listeners to allow them.