Extension 101 tutorial series

Twitch Extensions Tutorials: Introduction

Prerequisites

Requires knowledge of:

• HTML
• CSS
• JS

Objectives

• Step by step tutorials for how to build a Twitch Extension from start to finish.
• Learn core concepts of Extensions via hands-on development and code walkthroughs.
• At the end of these tutorials, you will have developed your first production-ready Extension!

What are Extensions?

Extensions are web apps that are embedded as HTML iframes into a broadcaster’s channel. Extensions live in the broadcaster’s creator dashboard and provide more engaging, interactive experiences for both the broadcaster and the viewers. In this tutorial series, we will build a panel Extension. You can find more information about each type of Extension here.

What are we going to build?

Through these tutorials, we will be building an Extension that implements the “Would You Rather..?” conversation game. For those of you unfamiliar with that game, essentially the idea is that viewers will have the ability to ask questions that begin with “Would you rather…?” and select two scenarios for the broadcaster to choose from. The more similar the two choices are, the harder the dilemma. On stream, the broadcaster must choose one of the scenarios they would rather do. This Extension thus helps create a more engaging experience specifically for chat-oriented streams.

While this is the basic idea of the Extension we are going to build, we will also be adding other features to emphasize how Extensions can provide a better, more engaging experience for both the broadcaster and the viewers. Awesome! Now that we know what we are going to accomplish in this tutorial, let’s start building.