Textarea Character Countdown

WHAT IT DOES

Textarea Character Countdown adds a live counter to every textarea on the web, showing you exactly how many characters or words you've typed and how many remain until the limit. A visual progress bar fills as you type, changing color from blue to orange to red as you approach the limit. The counter displays both the current count and the maximum limit when defined, and automatically shows remaining characters. This is invaluable for social media posts, form submissions, comments, reviews, product descriptions, and any other text input with character or word limits. The extension supports both character and word counting modes, so you can switch between them based on the context. All settings are saved locally, and per-site preferences let you customize behavior for different websites.

WHERE IT RUNS

The extension works on every website with textareas, including social media platforms, comment sections, review forms, CMS admin panels, CRM systems, support ticket forms, blog comment areas, and any other web-based text input interface. It runs locally in your browser, attaching counter displays to textareas in real-time without sending any data to external servers. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, the extension automatically adds character counters below every textarea on the page. Each counter shows the current count and, if the textarea has a maxlength attribute, the maximum limit and remaining characters. A progress bar below the counter fills as you type, providing a quick visual indicator of how close you are to the limit. By default, the counter turns orange at 80% of the limit and red at 90% or when the limit is reached. To change settings, open the extension panel and adjust the counting mode (characters or words), warning threshold percentage, or color theme. For per-site customization, use the "Enable on This Site Only" or "Disable on This Site Only" buttons to override global settings for specific websites.

THE ACTUAL MECHANISM — ELEMENT-LEVEL COUNTER ATTACHMENT WITH REACTIVE UPDATES

The extension works by scanning the DOM for textarea elements and attaching a counter display immediately below each one. For each textarea, the extension creates a wrapper containing a counter display and a progress bar. The counter display updates in real-time using the `input` event listener, which fires on every keystroke, paste, or content change. The extension calculates the current count using either the `length` property (for characters) or by splitting the trimmed value by whitespace (for words). If the textarea has a `maxlength` attribute, the extension parses it and calculates remaining characters, displayed as "count / max (remaining: X)". The progress bar fills proportionally to the current count relative to the maximum, with the bar color transitioning from the user's chosen accent color to orange at the warning threshold, then to red at 90% and above. When the limit is reached, the counter display updates to "limit reached!" and the progress bar turns red at full width. The counter wrapper is inserted into the DOM after each textarea using `parentNode.insertBefore`, ensuring it appears directly below the textarea without interfering with surrounding layout. For dynamically added textareas (e.g., in single-page applications), a MutationObserver watches for DOM changes and automatically attaches counters to new textareas as they appear.

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 enable/disable toggle, counting mode selector, warning threshold input, color picker, per-site settings, and refresh 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 storage engine. Because websites frequently update their code structures and JavaScript frameworks, certain complex web applications may occasionally require manual refresh of counters using the "Refresh Counters" button in the panel. The extension will automatically check for updates weekly and notify you when a new version is available. No personal data, browsing history, or textarea content is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.