Extension 101 tutorial series
Now that we’ve set up the basic architecture of an Extension, let’s explore how different pages interact with each other. The first interaction we are going to look at is between the broadcaster’s configuration page and the viewer’s page. Specifically, we want to be able to save the broadcaster’s preferences for what WYR options should be shown to the viewers, and present those selected options to the viewer in the panel view. We can use the Twitch-provided Configuration Service to allow the broadcaster to customize the Extension.
Key Concept: We can think of the Configuration Service as a key-value pair service for basic data stores. By allowing the developer to easily read and write to a store, the Configuration Service helps developers because it:
- Removes the need for using a backend to store persistent per-channel and per-Extension specific information
- Stores user IDs to call third-party APIs from your backend (if you have one)
- Enables broadcasters to customize your Extension
Step 1: Config View Logic
In the broadcaster’s configuration page, we can use jQuery to write a function that will retrieve all the selected options in the fieldset form we say in previous tutorial and then save them as an array. We need to add the following function to
Step 2: Set Configuration
We now need to write the saved broadcaster’s options that we saved as an array to the configuration service. To do this, we are going to use the
twitch.configuration.set function from the Extensions Helper Library to essentially set the Extension Configuration.
Key Concept: An Extension configuration is made up of segments that consist of three values: type, Extension version, and configuration value. Segment types refer to who can read and write the configurations, and thus can be set to the broadcaster, developer, or global. More information on these types can be found in the documentation for the configuration service.
For this Extension, the broadcaster is setting the configuration, for version one, and saving a value of options (needs to be saved as a string). Thus, we need to add the following function to the
For more information on the set function, check out the Extension Helper Library.
The next thing is to render the broadcaster’s options in the viewer’s panel. We can access the configuration information that was set in the previous step through
twitch.configuration.broadcaster.content. However, we should only access this information inside the
twitch.configuration.onChanged function when the contents of the broadcaster variable have completely loaded. This
onChanged function essentially is called when an Extension configuration is received, which happens only once, on extension load!
Once you have the contents of your configuration, you can parse the values and update the panel view. To do this, add the following function to
On line 11, you can see that we are calling a function called
updateOptions(). This function is going to update the options on the viewer side. Let’s add this next!
Step 4: PanelView Logic
We want the Extension to be able to save the WYR options that the broadcaster selected in
config.html and provide them to the viewer’s interface,
Now that we’ve set up the Configuration Service, it’s time to test it.
Check: If you want to see the completed code at this stage, its available on the Step 1 branch.