CodePen Fork Count Badge

WHAT IT DOES

CodePen Fork Count Badge displays a persistent, draggable floating badge that shows the fork count of any CodePen pen you're viewing. It detects the current pen from the page URL or data attributes, then fetches stats from the CodePen API or extracts them from the page. The badge shows the fork count prominently, with optional display of view count, comment count, and heart count. You can reposition the badge by dragging it anywhere on the screen, and it automatically refreshes at configurable intervals to reflect real-time changes. A close button hides the badge when you don't need it. This is perfect for developers who want to track engagement on their pens, or for quickly seeing how popular a pen is without scrolling through the page.

WHERE IT RUNS

This script runs exclusively on CodePen pages (*.codepen.io/*). It operates entirely within your browser tab, reading the page's DOM and fetching data from the CodePen API. The script cannot access other tabs, your browsing history, bookmarks, downloads, or any data outside the current page. All settings—including badge position, show/hide stats, refresh interval, badge size, and auto-detect preference—are stored locally using GM_setValue and never transmitted anywhere.

HOW TO USE

After installing with the BotGentz extension, the script automatically detects CodePen pens and displays the fork count badge (if auto-detect is enabled). Click "Show Badge" to manually activate it. The badge appears in the corner of your screen—drag it by clicking and holding to reposition it. Click the "✕" button to hide the badge. The panel lets you customize the badge: choose the position (top-left, top-right, bottom-left, bottom-right), select badge size (small, medium, large), toggle display of view count, comment count, and heart count, and set the refresh interval (10-300 seconds). Click "Refresh Stats" to manually update the counts, and "Copy Stats" to copy all stats to your clipboard as text.

THE REAL MECHANISM

The script extracts the pen ID from the URL using a regular expression that matches codepen.io/username/pen/PEN_ID patterns, with a fallback to scanning for data-slug-hash attributes on the page. With the pen ID, the script first attempts to fetch stats from the CodePen oEmbed API (https://codepen.io/api/oembed?url=https://codepen.io/pen/PEN_ID), which returns a JSON response containing views, comments, hearts, and forks counts. If the API request fails, the script falls back to DOM extraction using selectors like .fork-count, .view-count, .comment-count, and .heart-count, parsing the numeric values from the page text. The badge is created as a fixed-position div with a backdrop-blur background, containing the fork count and optional stats. The refresh timer uses setInterval to re-fetch stats at the user's configured interval. The drag functionality uses mousedown/mousemove/mouseup events to reposition the badge. All DOM manipulation uses safe methods with no innerHTML from untrusted content.

THE PANEL

The Fork Count Badge panel is a BGPanel component that you can drag anywhere on your screen by its header. It snaps to the nearest edge when released, keeping your workspace organized. The panel collapses to a small bubble showing only the emoji icon when minimised—click to expand it again. You can resize the panel horizontally to see more of the settings. Press the Escape key to collapse the panel instantly. Your panel position and size are saved per-site.

PLEASE NOTE

This script requires the free BotGentz browser extension to function. CodePen may change its API endpoint or page structure over time—the script may require updates to maintain compatibility. The API fetch may be rate-limited or blocked in some browsers; the fallback DOM extraction ensures the badge still works. The badge refresh interval uses setInterval, which may be throttled in background tabs. The API returns stats for public pens only; private pens may not return data. The script never reads or writes password fields, hidden inputs, or file inputs. It stores only your position, size, stat toggles, refresh interval, and auto-detect preference locally. No pen data, user information, or personal information is ever collected, transmitted, or shared.