Notion Page Word Count Badge

WHAT IT DOES

This script adds a word count badge to Notion pages, showing the total number of words in the page content. When you're editing a Notion page, the badge appears in the top-right corner of the screen showing the current word count (e.g., "📝 1,234 words"). The badge updates automatically as you type, so you always know the length of your document. The badge color changes based on a configurable threshold—green for short pages (under the threshold), yellow for medium pages, and red for long pages. You can click the "Copy" button on the badge to copy the word count to your clipboard. The badge can be toggled on and off in the settings panel.

WHERE IT RUNS

The script runs on all Notion pages (*.notion.so). It works on page editor views, excluding settings, account, and other non-editor pages. 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 "Show word count badge" toggle enables or disables the badge.

- Adjust the "Threshold" value to control the color-coding. Pages with fewer words than the threshold show green, pages between the threshold and twice the threshold show yellow, and pages with more than twice the threshold show red.

- Click "Refresh word count" to manually update the badge.

- Click "Copy word count" to copy the current count to your clipboard.

The badge appears automatically on Notion pages. It updates as you type.

TECHNICAL SECTION — REAL MECHANISM

The script detects Notion page editor views by checking the URL for notion.so and excluding non-editor pages. It extracts page content by finding the main editor container using selectors like .notion-page-content, .notion-scroller, and .notion-frame. Within the editor, it selects text-containing blocks using selectors for .notion-text-block, .notion-heading-block, .notion-sub_header-block, .notion-sub_sub_header-block, .notion-bulleted_list-block, .notion-numbered_list-block, .notion-toggle-block, .notion-quote-block, .notion-callout-block, .notion-code-block, and .notion-to-do-block. The text from all blocks is concatenated and the word count is calculated by splitting on whitespace. The badge is created as a fixed-position div with a glassmorphism style and inserted into the DOM using style properties and textContent (never innerHTML). A MutationObserver watches for DOM changes (including childList, subtree, attributes, and characterData) and updates the badge with a debounce to avoid excessive updates. The color is determined by comparing the word count to the threshold and twice the threshold.

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. Notion frequently updates its interface and class names, which may affect the selectors used to find the editor and text blocks. If the badge stops working, please check for updates. The word count includes text from all visible blocks—it does not count text in collapsed toggles or hidden sections. The script stores only your preferences via GM_setValue. No data is sent externally—all data is stored locally in your browser. 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.