Introduction

In the world of gaming, twitch is the widely known Application which is utilized by gamer to showcase their ability as well as earn money. Although Twitch provides a very good documentation that can be used to develop extension, still we found it typical for non coders. Hence, we came up with this article to teach “How to do Twitch Extension Development”.

Twitch Development

1. Open https://dev.twitch.tv and login with your Twitch ID
2. Go to your Dashboard
3. Create a new extension by clicking “Create Extension” as shown below:

4. Give it a name e.g. DummyChat, as shown below:

5. Click on the Video – Component checkbox. Give a version number, others are optional, still you can fill the descriptions and summary. Create Extension Version.
6. The most reliable way to code is to Download Developer Rig (links provided in the end of the article). There you can edit your code and run at local server. The illustration of Rig is shown below:
   
   Here, you can directly go to Extension Views à Create a New View à Run Front End and Backend code.
   We suggest you to create your extension directly from Rig. Here, you can click on Add Project and continue until the new project is created. While creating a project choose any template that is based on HTML.
7. Now, we will come back to next part of step 05. On the Twitch development website, you will see given tabs:
   

Status: Once you are done with code changes at local host and have uploaded files under File tab, you can move your code to Hosted Test. Until and unless, you don’t do that, you will not be able to test it on Twitch website.
Version Details: Once you are ready to push the final code for review, you will have to give all the details here. It will also include images and icons for your extensions.

Files: Under this tab, upload the zip file which is having just your code. Do not make zip of a folder, but a zip of files. For reference of files, check out zipped folder. The main file that is loaded in our case is video_component.html

Asset Hosting: Here we provide ratio for our extension, it can be adjusted as per requirement.

8. Once you are done with the file upload and moved the code to Hosted Test, you can check your extension at your twitch website.

Twitch Testing

1. To test your twitch extension, go to your twitch website and login.
2. Once logged in visit: https://www.twitch.tv/ and login using your account and the visit Dashboard => Extension and search your extension there, as shown below:
   
3. Hover the icon shown and click install.
4. Now go to Extension Manger and find your installed Extensions.
   For that visit: https://www.twitch.tv/  and login with your ID, and go to Dashboard => Extensions => Manage
   here, Activate your extension.
5. Once your extension is activated, you can find it during your live streaming.
   One important thing is that to test your Extension, you must be ONLINE. For that, you will need another software like OBS Studio. You will have to configure OBS Studio to start streaming. Find your Primary Stream key at given link https://www.twitch.tv/your_login_id/dashboard/settings#auto-host => Copy and paste it the settings of OBS Studio and start streaming. Here, you need to use the above link by replacing your_login_id with the id that you are using to login to twitch.
6. Once you are online on Twitch, after few seconds, you will find your extension icon visible on the twitch, click it and turn it on. Your extension is ready to be used. That’s it.

Important Links

Use the given link to download for Linux: https://developer-rig.twitchcdn.net/Twitch+Developer+Rig.AppImage
Use the given link to download for MacOS: https://developer-rig.twitchcdn.net/Twitch+Developer+Rig.dmg
Use the given link to download for Windows: https://developer-rig.twitchcdn.net/Twitch+Developer+Rig+Setup.exe