ByteByteGo Reference Linker

Converts [n] reference markers into clickable links on ByteByteGo courses. Click the reference to open the URL, or click the arrow to scroll to the References section.

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

You will need to install an extension such as Tampermonkey to install this script.

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

作者のサイトでサポートを受ける。または、このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
作者
abd3lraouf
1日のインストール数
0
累計インストール数
1
評価
0 0 0
バージョン
1.2.0
作成日
2025/12/06
更新日
2025/12/06
大きさ
19.1KB
ライセンス
MIT
対象サイト

ByteByteGo Reference Linker

A Tampermonkey userscript that enhances ByteByteGo course pages by converting [n] reference markers into clickable links.

Features

  • Clickable References: [1], [2], etc. in the text become clickable links that open the referenced URL in a new tab
  • Quick Navigation: A arrow next to each reference scrolls you to the References/Resources section with a highlight effect
  • Hover Tooltips: Hover over a reference to see the description
  • Multiple Formats Supported: Works with various reference formats:
    • [n] Description: URL
    • n. Description URL
    • Ordered lists (<ol><li>...</li></ol>)

Demo

Before:

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

After:

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

Installation

Prerequisites

Install from GitHub (Recommended)

  1. Make sure you have Tampermonkey installed
  2. Click the link below:

Install ByteByteGo Reference Linker

  1. Tampermonkey will open and show the installation prompt
  2. Click Install

Install from Greasy Fork

Coming soon...

Manual Installation

  1. Open Tampermonkey dashboard
  2. Click the + tab to create a new script
  3. Copy and paste the contents of bytebytego-references.user.js
  4. Save (Ctrl+S / Cmd+S)

Usage

  1. Navigate to any ByteByteGo course page
  2. References like [1], [22], etc. will automatically become interactive:
    • Click the number to open the referenced URL in a new tab
    • Click the arrow to scroll down to the reference in the Resources/References section
    • Hover to see the reference description

Supported Sites

How It Works

  1. The script scans the page for a References or Resources section (supports <h2>, <h3> headers)
  2. Parses references in various formats and extracts URLs and descriptions
  3. Finds all [n] markers in the main content
  4. Replaces them with clickable links + navigation arrows
  5. Uses a MutationObserver to handle dynamically loaded content

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE for details.

Author

abd3lraouf - GitHub

Acknowledgments

  • ByteByteGo for the amazing system design content
  • The Tampermonkey team for making browser scripting accessible