Paragraph Focus Dimmer

WHAT IT DOES Paragraph Focus Dimmer reduces visual clutter by dimming all paragraphs on the page except the one you're currently reading. Using a semi-transparent overlay effect, the extension draws your attention to the active paragraph while muting the surrounding text. The active paragraph can be set by hovering your mouse over any paragraph, and you can also navigate between paragraphs using the up and down arrow keys. The dimming effect has adjustable opacity (10% to 90%), and you can choose from three dimming modes: Focus (dim all but active), Dim All (dim everything), or Off. The active paragraph can be highlighted with a subtle border or glow effect to make it stand out. A small badge in the corner shows your current paragraph position (e.g., "3/12"), helping you track your reading progress. WHERE IT RUNS The extension works on every website with paragraph-based content, including news sites, blogs, academic articles, documentation pages, and any other page with substantial text. It runs locally in your browser, applying CSS styles to paragraphs without modifying the page's underlying content. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly. HOW TO USE After installation, the extension automatically activates and dims paragraphs on pages with sufficient content. By default, the first paragraph is active. Move your mouse over any paragraph to make it the active paragraph—all others will dim. To navigate using the keyboard, press the up and down arrow keys to move between paragraphs; the active paragraph will scroll into view if needed. A badge in the top-right corner shows your current paragraph number and total count (e.g., "📖 Paragraph 4/12"). To customize the experience, open the extension panel and adjust the dim opacity (10% to 90%) using the slider. Choose your dimming mode: Focus, Dim All, or Off. Select a highlight style: Border highlight, Glow highlight, or None. Toggle keyboard navigation on or off. For per-site customization, set a unique opacity level for specific websites. THE ACTUAL MECHANISM — CSS OPACITY CONTROL WITH PARAGRAPH TRACKING AND KEYBOARD NAVIGATION The extension identifies all paragraph elements (`

`) on the page, filtering out empty paragraphs and those inside navigation, header, footer, or aside elements to focus on the main content. Each paragraph is tracked in an array with its index position. When a paragraph is activated (via mouse hover or keyboard navigation), the extension applies CSS styles to all paragraphs: inactive paragraphs receive `opacity: (1 - dimOpacity)` with a smooth transition, while the active paragraph receives `opacity: 1` and optional highlight classes (`border-highlight` or `glow-highlight`). The dim opacity is expressed as a percentage (e.g., 50% dim means inactive paragraphs have 50% opacity). For keyboard navigation, the extension listens for `ArrowDown` and `ArrowUp` key events, increments or decrements the current index, and activates the corresponding paragraph. If the active paragraph is outside the viewport, it's scrolled into view using `scrollIntoView({ behavior: 'smooth', block: 'center' })`. A MutationObserver watches for DOM changes and updates the paragraph list dynamically, ensuring the dimmer works on single-page applications and dynamically loaded content. The badge is updated with each paragraph change to show the current position. 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, apply dimming button, remove dimming button, dim opacity slider, dim mode selector, highlight style selector, keyboard navigation toggle, per-site opacity override, and per-site enable/disable controls—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. The dimming effect works by applying CSS opacity to paragraph elements; this may affect the readability of some text, particularly on sites with complex backgrounds. The keyboard navigation feature is disabled by default on input fields, textareas, and select elements to avoid interfering with form filling. No personal data, browsing history, or page 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.