EZ Stream Access

The goal was to create a browser extension that streamlines my Twitch usage by saving me a few clicks when opening channels I follow. When watching Twitch channels on a second monitor, you are actually only interested in the video player. Twitch offers a "Popout Player" functionality but to reach that you have to click multiple times and it also doesn't open the stream in the normal browser tab. So I decided to implement a browser extension that uses the Twitch API to display followed channels and directly open them with a fullscreen player that occupies the whole browser tab.

The extension can be used by anyone and is available in the Chrome Web Store for Chromium-based browsers.

• Save a few clicks by being able to open Twitch channels directly from the extension menu accessible from the browser toolbar.
• Clicking on the thumbnail opens the channel with the video player covering the whole browser window. No chat or Twitch UI. Perfect for selecting streams to watch on your second monitor! EZ Stream Access also remembers the stream quality you selected in the popup. This saves you a few seconds you normally have to spend selecting your quality.
• Clicking on the stream title or profile picture of the channel opens the normal channel page.
• A click on the name of the streamer leads you to their videos page.
• And a click on the game or category name opens the directory page.

As a base I started off with the web-extension-starter-kit from Stateful. It already contains a lot of useful setup. For example directly starting a browser with WebdriverIO with the extension pre-installed.

The project files are built with Vite. The frontend is implemented with React and Tailwind CSS. The main popup communicates with a service worker background script via messages.

The background script is responsible for keeping track of state as well as using the web extension APIs to use browser features. These include things like

• handling clicks
• persisting state
• retrieving information from the Twitch API
• handling the OAuth flow to fetch an access token for the user

For unit tests I chose Vitest as a drop in replacement for Jest, since I am already using Vite.

The source code is available on GitHub.