Dribbble Shot Like Trend Chart

WHAT IT DOES

This userscript helps designers track the popularity of Dribbble shots by displaying like trends and engagement metrics. It scans Dribbble shot pages and gallery views to extract like counts, view counts, and comment counts. For each shot, it displays a badge with the metrics you choose—likes (❤️), views (👁️), and comments (💬). It generates a sparkline or bar chart showing the like trajectory over time, tracking historical data each time you view the same shot. The script can rank shots in a gallery by popularity, highlight trending shots with rapid like growth, and show a summary of engagement metrics in a panel. This helps you identify which designs are resonating with the community and track the performance of your own work.

WHERE IT RUNS

The script works on Dribbble pages—gallery views, shot grids, search results, and individual shot detail pages. It runs entirely within your browser, reading only the visible content of the current page. It does not track your browsing history, access other tabs, or send any data externally. Historical data is stored locally in your browser using GM_setValue.

HOW TO USE

After installation, open the panel by clicking the tool's icon in the BotGentz sidebar. Choose your display mode—"Badge only" shows metrics on each shot card, "Panel only" shows a summary list in the panel, or "Both" shows both. Select which metrics to display: likes only, likes + views, or all metrics. Choose your chart type—sparkline, bar chart, or no chart. Set a highlight threshold to visually emphasize shots with high like counts (e.g., 100+ likes). Toggle "Show panel summary" to display a ranked list. Toggle "Auto-scan on page load" to automatically analyze pages. Click "Scan and display" to run the script manually, or "Clear all" to remove all overlays.

THE TECHNICAL MECHANISM

This script uses DOM traversal and pattern matching to extract metrics from Dribbble pages. It scans for shot elements using common Dribbble selectors like .shot-item, .shot, .Shot, and [data-shot-id]. For each element, it extracts text and applies regex patterns to find like counts (e.g., "123 likes"), view counts, and comment counts. The script also extracts a shot ID from element attributes to enable historical tracking. For historical data, the script stores like counts in GM_setValue keyed by shot ID, appending new values on each visit. The sparkline is drawn on a canvas element, with the x-axis representing time (data points) and the y-axis representing like counts. The chart area is filled with a subtle gradient, and the current like count is displayed. The panel sorts shots by like count and displays each with its chart and metrics.

THE PANEL

The panel is draggable anywhere on the screen and remembers its position between sessions. It can be collapsed to a small floating bubble to minimize distraction, and expanded again with a single click. The panel's width can be adjusted, and pressing the Escape key closes it instantly. All settings—display mode, metrics selection, chart type, highlight threshold, show panel, and auto-scan—are persisted locally using GM_setValue, so your preferences remain intact across page reloads and browser restarts.

PLEASE NOTE

This userscript requires the free BotGentz extension to function. The script is designed for Dribbble; it may work on other portfolio sites but is not guaranteed. The metric extraction relies on the current text patterns on Dribbble—if Dribbble changes their UI or text formatting, the script may need to be updated. Historical data is stored only in your browser and is limited to shots you have visited while the script is active. The script does not access your Dribbble account or API; it only reads what is visible on the page. No data from your browsing is stored or transmitted anywhere—all processing occurs entirely in your browser.