ByteByteGo Reference Linker

6 December 2025

Enhancing the ByteByteGo Experience

ByteByteGo is one of the best resources for learning system design. But when reading through their detailed articles, I kept running into the same friction: references like [1], [22], etc. that required manually scrolling to the bottom to find the actual URL, then scrolling back to continue reading.

So I built a userscript to fix that.

What It Does

Before

...which significantly reduced load times [22].

You'd have to scroll down, find reference 22, click the link, then scroll back up to continue reading.

After

...which significantly reduced load times [22]↓
                                          ^^^^
                                          |  |
                           Opens URL ─────┘  └───── Scrolls to reference

Now references are clickable links that open directly, with navigation arrows for jumping to the reference section.

Features

Rich Preview Cards

Hover over any reference to see a beautiful preview card showing:

Site favicon and domain
Reference description
OpenGraph image (when available)
Full URL preview
Quick action buttons

Bidirectional Navigation

Down arrow (↓): Scrolls to the reference in the Resources section
Up arrow (↑): In the References section, jumps back to where the reference is mentioned

Multiple Format Support

The script handles various reference formats found across ByteByteGo content:

[n] Description: URL
n. Description URL
<ol><li>...</li></ol>

Auto-Updates

Get notified when a new version is available with a changelog toast notification.

Installation

Prerequisites

Install one of these browser extensions:

One-Click Install

Install ByteByteGo Reference Linker

Click the link above, and Tampermonkey will prompt you to install.

How It Works

Scan: The script finds References/Resources sections (supports <h2>, <h3> headers)
Parse: Extracts URLs and descriptions from various reference formats
Transform: Replaces [n] markers with interactive elements
Observe: Uses MutationObserver to handle dynamically loaded content

Technical Details

The script uses vanilla JavaScript with no dependencies:

// MutationObserver for dynamic content
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.addedNodes.length) {
            processReferences();
        }
    });
});

// Rich preview cards with OG image fetching
async function fetchOpenGraphData(url) {
    // Fetch and parse OG meta tags
    // Display in preview card
}

Supported Sites

https://bytebytego.com/*
https://*.bytebytego.com/*

Release Process

The project uses automated releases:

changelog.json defines the next version
Auto-version-bump workflow syncs @version in the userscript
Tag creation triggers release workflow
Release includes install badge, changelog, and generated notes
Userscript auto-checks for updates and prompts users