


Then click the purple Upload button at the bottom. To upload your zip file to Twitch, choose Files > Upload Version in Assets > Choose File. Make sure you are bundling the files, not the folder containing your Extension files. When you send Twitch an Extension, you need to bundle the Extension files into a zip file. Set the Panel Viewer Path to index.html (the name of our panel HTML file). Now it’s added to your channel!Įxtensions needs to know what the starting point is for your panel. Close the config window and click the Activate button on your extension.Click View on Twitch and Install to add your extension to your channel.After filling in the optional fields, click Create Extension Version.Fill in any optional fields you choose.For this example, we’ll use a Panel Extension. Type a unique name for your new Extension. Hello World! Hello, world! Configure the ExtensionĬonfiguring an Extension requires a few steps:

Here’s an extension that just says ‘Hello, world!’: Extensions are simply webpages, and the only basic requirement is to import the Extension Helper. It’s easier than you might think to make a simple Twitch Extension. We provide some special functionality for you including: User %% Extensions Overview DiagramĮxtension -> | - HTTP - | EBSīeing a webpage, an extension can do almost anything you can already do on the web, such as play sounds and show video. This is a high level API allowing the extension to request things like user identity and chat. We handle all the nitty-gritty of forming these messages, and provide a Javascript API to the extension called the Extension Helper. Component Extensions can be hidden by viewers.Ī Twitch Extension sits in a specially sandboxed iframe inside Twitch and communicates with its parent via postMessage. Component Extension - Displays as part of the video, taking up part of the screen.Overlay Extension - Displays on top of the whole video as a transparent overlay.Panel Extension - Displays in a box under the video.Twitch Extensions can appear in one of three views: For example, the Hearthstone Deck Tracker extension adds an interactive overlay allowing viewers to browse through the cards the streamer is using and their effects.

Get started with Twitch Extensions What is a Twitch Extension?Ī Twitch Extension is a webpage that sits inside Twitch and communicates with Twitch to provide extra functionality.
