Signature Pad Injector

WHAT IT DOES

Signature Pad Injector adds a fully functional signature pad to any webpage that requires a signature. Whether you need to sign a contract, authorize a form, or provide a handwritten acknowledgment, this extension lets you draw your signature directly on the page using mouse or touch input. The signature pad captures your drawing as a high-quality PNG image and automatically inserts it into file input fields that accept images (such as signature upload fields). If no image file input exists, the extension can insert the signature as a base64 data URL into text fields or textareas that are designed for signature data. The pad includes undo, clear, save, and insert controls, and supports configurable pen color, line width, and background color. Saved signatures persist across browser sessions, allowing you to reuse your signature on multiple forms.

WHERE IT RUNS

The extension works on every website with signature upload fields, including contract signing platforms, insurance applications, loan forms, rental agreements, purchase authorizations, government forms, and any other web-based form requiring a handwritten signature. It runs locally in your browser, processing all drawing and data within the browser without sending any data to external servers. The extension supports both mouse and touch input, making it suitable for desktop, tablet, and mobile devices.

HOW TO USE

After installation, the extension automatically detects signature fields on the page and displays a floating "✎ Sign" button. Click this button to open the signature pad overlay. Draw your signature using your mouse, stylus, or finger. Use the "Undo" button to remove the last stroke, or "Clear" to start over. When you're satisfied, click "Save" to store the signature for future use, or click "Insert into Form" to insert the signature into the current form's signature field. The extension will detect file input fields that accept images and insert the signature as a PNG file. If no image file input is found, it will look for text fields containing "signature" or "sig" in their id, name, or placeholder and insert the signature as a base64 data URL. If no suitable field is found, the signature is copied to your clipboard. To reopen the pad later, click the floating button again or use the "Open Signature Pad" button in the extension panel.

THE ACTUAL MECHANISM — CANVAS-BASED DRAWING WITH TOUCH AND MOUSE SUPPORT

The extension creates a fixed-position overlay containing an HTML5 Canvas element. When the user draws, the extension captures mouse and touch events (`mousedown`, `mousemove`, `mouseup`, `touchstart`, `touchmove`, `touchend`) and translates them into drawing coordinates relative to the canvas using `getBoundingClientRect()`. Each stroke is stored as an array of points, enabling undo functionality by removing the last stroke and redrawing all remaining strokes. The canvas uses high-resolution rendering with `devicePixelRatio` scaling to ensure crisp output on retina displays. When inserting the signature, the extension exports the canvas content using `toDataURL('image/png')` to create a base64 PNG string. For file input insertion, the extension converts the data URL to a Blob using `atob()` and `ArrayBuffer`, then creates a File object and constructs a DataTransfer object to set the file input's `files` property. Both `input` and `change` events are dispatched to ensure compatibility with React, Vue, and Angular frameworks. For text field insertion, the signature is inserted as the full data URL string. Saved signatures are stored as data URLs using `GM_setValue` and restored on page load.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the "Open Signature Pad" button, "Insert Saved Signature" button, pen color picker, pen width input, background color picker, and "Clear Saved Signature" button—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access and overlay engine. Because websites implement signature fields in various ways (file inputs with different accept attributes, text fields with different naming conventions), certain complex web applications may occasionally require manual insertion. The extension will automatically check for updates weekly and notify you when a new version is available. No personal data, browsing history, or signature content is ever collected, stored, or transmitted. All signature data is stored locally using the browser's storage API and remains solely on your device. The extension does not inject ads, trackers, or analytics of any kind.