🎬 Twitch Clips Viewer

A handy Chrome and Edge extension that lets you browse every clip from a chosen Twitch.tv channel on a dedicated page with convenient pagination (up to 100 clips per page), search, and flexible sorting.

---

✨ Features

• 🚀 Full load — fetches every clip from the channel via the Twitch Helix API with automatic pagination handling.
• 📊 High capacity — shows up to 100 clips per page for easy browsing.
• 🧭 Easy navigation — intuitive Back and Next buttons to move between pages.
• 🗂️ Flexible sorting:
  • Oldest first
  • Newest first
  • Most popular
• 🔍 Smart search — instant filtering by clip title and creator.
• 🎯 Direct link — clicking a clip card opens it on the official Twitch site.

---

🛠️ Installation

✅ Method 1. Chrome Web Store (recommended)

1. Open the extension page:
   Chrome Web Store
2. Click Add to Chrome.
3. Confirm installation.

Note

This method is the easiest and safest. However, updates may be published here with a slight delay due to Chrome Web Store moderation.

---

⚡ Method 2. Manual install (faster updates)

1. Open chrome://extensions/ in your browser.
2. In the top-right corner, enable Developer mode.
3. Click Load unpacked.
4. Select the TwitchClipsViewer folder on your computer.

Important

This method allows you to receive updates faster than the Chrome Web Store version.

---

💡 Usage

Method 1. Via the popup

1. Click the extension icon in the browser toolbar.
2. Enter a channel name (for example, Twitch).
3. Click Open clips.

Method 2. Direct link

You can open the clips page directly at:

chrome-extension://<EXTENSION_ID>/pages/tracking.html?channel=CHANNEL_NAME

Important

Replace CHANNEL_NAME with the streamer’s login and <EXTENSION_ID> with your extension’s unique ID (you can copy it on chrome://extensions/).

---

📦 Project structure

manifest.json
background.js
├── lib/
│   ├── twitch-api.js
│   ├── clip-loader.js
│   ├── clip-player.js
│   ├── rate-limiter.js
│   ├── credentials.js
│   ├── creator-stats.js
│   └── i18n.js
├── pages/
│   ├── tracking.html
│   ├── tracking.js
│   └── tracking.css
│   ├── options.html
├── popup/
│   ├── popup.html
│   ├── popup.js
│   └── popup.css
└── icons/

---

⚠️ Important notes

Warning

The Twitch API returns data in batches of 100. The extension requests all pages in sequence, so on channels with a very large number of clips the first load may take a while.

Note

Date sorting runs in the extension on the client side after all clips have been fully loaded into memory.