Contents

Getting Started with Extensions

Introduction

Welcome to developing Extensions!

This guide shows you how to get started as an Extensions developer and run your first Hello World extension within the Twitch Developer Rig.

If you have an issue, need more information, or have a question about anything in this guide, please visit the Extensions category of the Twitch Developer Forums.

If you’re not a tech developer or just want to know more about Extensions from a business perspective, see https://dev.twitch.tv/extensions.

What Are Extensions?

Extensions are interactive web apps that run on a broadcaster’s channel, either overlaying the video or below it in panels. Extension developers can build experiences ranging from broadcaster/community tools, to data driven overlays, to interactive apps that let the audience play in the game. These experiences bring viewers and broadcasters together, creating new ways to interact on Twitch.

Extensions installed and activated by a broadcaster are automatically visible to any viewer who goes to the broadcaster’s channel page using a desktop Web browser or mobile device. Viewers can see details about the extension and report an extension for bad behavior.

Broadcasters can browse and install extensions on their Dashboard’s Extensions tab. They can find extensions, add/remove them on their channels, and activate/deactivate them. Installing an extension on a channel does not make it active on the channel page. To do that, after broadcasters install an extension, they configure it (if required by the developer), then activate it to make it visible to all viewers.

Types of Extensions

There are several types of extensions:

Broadcasters can activate up to six extensions at a time: 3 panel, 1 video overlay (full screen), and 2 video component (smaller).

Any extension can also support mobile by adding an optional view. (For details, see Mobile Support in Building Extensions.)

If pop-out control is enabled, the extension iframe has an icon button that viewers can click to pop out the extension into its own window. For details, see Pop-Out Extensions.

Extensions Dashboard & Extensions Manager

To create and manage Extensions, you use two main interfaces:

Enable 2FA

Before you can create an extension, you must enable two-factor authentication (2FA). You can do this through either the Extensions manager (when creating your first extension, as described below) or your Twitch developer dashboard, as described here:

  1. On your Twitch developer dashboard, click on your profile (top right), then select Account Settings from the dropdown.
  2. In the Settings window, click the Security and Privacy tab.
  3. Click Enable two-factor authentication, then follow the steps.

Hello World & the Developer Rig

To get your first extension running locally on your machine, you’ll use the Twitch Developer Rig. The Developer Rig is a tool built in Electron and maintained by Twitch, which enables you to easily get started developing Extensions. The current version of the rig is in beta. As an extension developer, you can use the Developer Rig to:

For more information, see the Extensions Developer Rig document.

To start using the Developer Rig:

  1. Download the version for Mac here or Windows here.
  2. Install the rig just like an app.
  3. Launch the rig and sign in with your Twitch developer credentials.
  4. Create a project, using an extension manifest you created on the Twitch dev site (links are in the rig, or follow the procedure below).
  5. Run your extension in the rig.

Create Your Extension Manifest

When you create your extension manifest on the Twitch developer dashboard, you’ll need to fill out the following information. The most consequential information is the name, type, and author email; if needed, it’s okay to fill in dummy info in the other sections for now.

You can update manifest information later. To update the manifest any time before you submit your extension for review, your extension must be in local test mode. (See Extension Life Cycle and Testing Your Extension.) To update the manifest after the extension is released, you need to create a new version of the extension.

  1. Log in to the Twitch developer site with your Twitch ID, then navigate to the Extensions dashboard.
  2. If your account is not already set up for two-factor authentication, Enable 2FA appears. Click it, set up the authentication, then click Done to return to the dashboard.
  3. Click Create Extension.
  4. Complete each field in the Create an Extension form:
    • Name — The name of your extension.
    • Type of Extension — The type(s) of your extension (e.g., panel, video overlay, video component, mobile).
    • Summary — This will be viewable by broadcasters on the extensions listings page in the Extension Manager. It should be 1-2 brief sentences describing what your extension does. To provide more detail, use the Description field.
    • Description — More detail than the Summary about the functions of your extension.
    • Author name — The full name of the extension author or organization that will receive credit on the Extension Manager. This can be changed later.
    • Author email — Contact information for the extension creator. This is used to contact the developer with information about the extension’s lifecycle (e.g., reject/accept notifications). Twitch will never reveal this email to anyone on the site.
    • Support email — Public contact information for support-related queries from broadcasters.
  5. (Optional) Add a logo for your extension. This must be 100px x 100px. Do not use Twitch or Glitch logos. If you do not have a logo, a default logo will be assigned.

  6. Click Create Extension to create your extension manifest, containing metadata about your extension. Your extension is now in the Local Test state of the extension life cycle.

That’s it! Soon, you will get a verification email. Be sure to check your email, as you need to verify ownership of the author email address.

What’s Next

You’re well on your way to building and launching an extension on Twitch.

To learn more about Extensions, visit:

Before you start developing your own extensions, read the rest of the Extensions documentation set on the Twitch developer’s site. Start with Required Technical Background for Extensions. Next, consult other Extensions documentation for complete information on how to:

Code samples are available on GitHub.

Good luck!