
For this example, also make sure to select "Hello World" on the right side to automatically start with this repository's code.
Below this, make sure "Use Existing Example" is selected. "Hello World") and select a directory for the project files. Give the project a name if it was not pulled automatically (e.g. Click the "Import" button to get your Extension's information. Fill in the Client ID and Secret you found in the above steps. Open the Developer Rig, click "Add Project" at the top left and then "Create Project.". Hover over your key, then copy and paste it into a text editor as well for the next few steps. Click the "Settings" tab and then the "Secret Keys" menu option along the left. Copy and paste the Client ID into a text editor you'll need this in a few steps. You'll see an "About This Extension" section on the right of this page (if not, you may need to widen your browser window or look for a menu icon that has a "Product Info" option). On this page, click the "Overview" link along the top tabs. Click "Create Extension" at the bottom of the form and you will be taken to a status page for the first version of this Extension. Make sure you select "Video - Component" under the "Type Of Extension" section, check the box to indicate that you are using the Developer Rig, and fill out the remaining fields. Click the "Create Extension" button on this page and you will be taken to a form to setup your new Extension. You will see a button prompting you with instructions if 2FA has not yet been activated. You will need to have a Twitch account to login and two factor authentication (2FA) will need to be activated. Visit the Extensions section of you Developer Dashboard. Then, open the downloaded file to install the Rig. Download the Developer Rig for Mac, Windows, or Linux. The following steps will help you download, install, and set up the Rig. This is a native application to help with your development. The recommended path for building this sample is with the Twitch Developer Rig.
Instead of changing the CSS locally, it makes a call to a backend server for a new hex value (we call this an Extension Backend Service or EBS for short). On the frontend, a user clicks a button in this component that changes the color of a circle. It will allow Twitch viewers to cycle through colors via a visual element added on top of the video player (we call this a component overlay). This guide will cover the fundamentals of building your first Extension. If you haven't seen an Extension, check out the TwitchDev channel page and view the Twitter panel Extension below the video player. The Twitch community can interact in new ways such as heat maps, real-time game data overlays, mini-games, music requests, and leaderboards. Twitch Extensions are programmable interactive overlays and panels, which help streamers interact with their viewers. Getting Started with Twitch Extensions What are Twitch Extensions?