Twitch Live Extension

A browser extension that will help you find out when your followed streamers are live on Twitch and will send notifications when they go live.

Disclaimer

Firefox version is behind Chrome one and it will continue for a few more months until Firefox fully supports Manifest Version 3. Currently, it doesn't support service_workers that I use for authentication, went live notifications and the number on the badge icon. As soon as this feature is implemented, I'll release the recent version to Firefox too.

Table of Contents

• How to Use
• Explore Top Livestreams
• Settings
• Available Scripts
• Deployment
• Frameworks
• Resources
• Contribution
• License

How to use

To start using it, open it, log in with your Twitch account, so that the extension can have access to your follows, and, every time you click on the extension icon, you will see the streamers that you follow that are live.

This extension supports Just Went Live notifications. If you want to enable them, open the extension, go to Settings and enable the Just Went Live notifications.

There's also a button to log out of the Twitch account you are using on the extension.

The extension is available for Chrome/Microsoft Edge and Firefox.

Explore Top Livestreams

On the Explore tab, you can see the livestreams with most viewers in descending order. Once you reach the bottom of the list, more streams will be loaded.

Settings

In this page you can:

• Log out Twitch account
• Enable/Disable just went live notifications

Notifications

MacOS

Google Chrome

Firefox

In order to have Firefox notifications on Mac, you need to search for Notifications on spotlight and enable them like this:

Microsoft Edge

Windows

Google Chrome

For Windows users, you might get annoyed with the sound from Chrome Notifications. You can disable it by:

• Select the Windows Start button, and then select Settings
• Go to System > Notifications & actions
• Scroll down to "Google Chrome" and click the Chrome icon to open the notification settings
• Toggle "Play a sound when a notification arrives" to Off

Firefox

Microsoft Edge

Available Scripts

Before running any command, you need to create a file with your Twitch Client ID. To get one, go to the Twitch Api page and register your app.

After that, create the file ./src/config.ts with:

export const CLIENT_ID = "YOUR_CLIENT_ID";

export const RESPONSE_TYPE_TOKEN = 'token';

export const SCOPES: string[] = ['user:read:follows'];

export const OAUTH_BASE_URL = 'https://id.twitch.tv/oauth2';

export const API_BASE_URL = 'https://api.twitch.tv/helix';

yarn start

Runs the app in the development mode with reloading.
Open http://localhost:3000 to view it in the browser.

yarn test

Runs all the tests

yarn build

Builds the app for production to the build folder without inline scripts.

Deployment

• Run yarn build.
• Open chrome://extensions
• Enable Developer mode
• Press Load unpacked and upload the dist folder

Frameworks

This extension was developed using React, Zustand and Material-UI.

Resources

Changelog

Contribution

Youtube

• Kr4vzz

Twitch

• Garciap

• Obasene

• rSekeleton

• Johlee

• Andretgv

• Thenumber13_

• Impakt

• Tio Sake

• MeetTheMyth

• Vertigo

• Oryon

• Pinkly

• Ka1one

• RafikiHd

Graphic Designer

• PiwDuarte

And everyone else that gave feedback and suggestions.

Problems or issues?

If you encounter any problems, bugs or other issues with the repo, please create an issue in the GitHub repo.

License

BSD-Clause 3

Donation

If you appreciated this extension and want to help me, feel free to do it!