Password Field Reveal Toggle

WHAT IT DOES

This script adds a toggle button to every password field on any webpage, letting you reveal or hide the password text with a single click. When you're filling in a password, you can click the eye icon to show the characters you're typing—helpful for avoiding typos and confirming your input. Click again to hide the password. The toggle works on all password fields, including login forms, registration forms, and password change forms. You can choose whether the toggle appears on the left or right side of the field. The script remembers your reveal state per field if you enable the persistence option, so the eye stays open across page reloads. A toggle in the settings panel lets you enable or disable the entire feature.

WHERE IT RUNS

The script runs on all websites (*://*/*), making it truly universal. It works on any page with password fields—login pages, registration forms, password reset forms, and more. It supports both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Enable reveal toggle" toggle enables or disables the script.

- Choose the toggle position from the dropdown: "Right of field" or "Left of field."

- Toggle "Remember reveal state per field" to save your preference for each field.

- Click "Refresh fields" to manually re-scan the page for password fields.

- Click "Clear stored states" to remove all saved reveal states.

On any password field, click the eye icon to reveal the password. Click again to hide it.

TECHNICAL SECTION — REAL MECHANISM

The script detects password fields by using document.querySelectorAll('input[type="password"]'). For each field, it creates a toggle button with an eye emoji (👁️ for show, 🙈 for hide). The button is wrapped in a span element that maintains the input's position in the DOM. The button's click handler toggles the input's type attribute between "password" and "text" using input.setAttribute('type', newType). The button's appearance and aria-label are updated to reflect the current state. For persistence, the script generates a field identifier from the input's id, name, placeholder, or class name, and stores the state in an object via GM_setValue. The position setting controls whether the button is inserted before or after the input within the wrapper. A MutationObserver watches for DOM changes and processes new password fields as they are added to the page.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. The script modifies password fields by changing their type attribute, which may affect some password managers or browser autofill behavior. The script does not read or store your password text—it only toggles the visibility of the field. The persistence feature stores only the state of the toggle (open/closed), not the password itself. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.