Updating your Component Extension: Twitch Client Beta

Announcements
1

Testing the new Extension Sidebar and component Extension user experience is now available on Twitch.tv! By following the steps below, you can now develop and test your video Extension within the new video Extension UI framework. You can manage the updated component sizing fields in your dev.twitch.tv console and you may submit an updated version of your Extension at any point ahead of the July 31 full roll out of the updated experience to all users.

More information about what is changing and why can be found in the RFC.

Step 1: Edit your Extension manifest

Using the Twitch Developer console, you can edit the new fields defining the size of your component extension. You can find these fields in the “Asset Hosting” tab of your Extension version management interface.

image%20(37)
image%20(37)740Ă—140 21.3 KB

The new fields are:

  • Target Height: The percentage of available area (between the top and bottom edges of the player control overlays, and accounting for the component extension header bar) that your component Extension should consume.

  • Aspect Ratio (X and Y): The ratio of your Extension’s horizontal and vertical dimensions

  • Autoscale (Formerly “CSS Zoom”): Whether or not you would like your Extension scaled to a fixed resolution using CSS zoom

  • ScalePixels (Formerly “Zoom Pixels”): The pixel width you would like your Extension to be fixed to if you have enabled Autoscale. This field is ignored if Autoscale is not enabled.

You are not required to edit these values to start testing. If you don’t, they will begin automatically populated by values that make a best effort at keeping the dimensions of your component the same as in the previous design.

Step 2: Managing your Extension’s rendering based on interface version

Your Extension will be expected to display a user interface that works with the new design when the query param legacyComponentDesign is not present as a query parameter in your Extension iframe’s URL. For example, if your component has an “X” button that calls the minimize function that will be made redundant by the close button on the new Extension header bar. We recommend giving it a class that sets its display to none when the legacyComponentDesign parameter isn’t present.

Step 3: View your Extension on Twitch.tv

To enable the new design on the Twitch website, set the local storage variable on the www.twitch.tv domain useNewExtensionComponentDesign to true. You can do this by opening your browser console and entering:

localStorage.useNewExtensionComponentDesign = true

Once set, you will see the new Extensions Sidebar on all streams and component Extensions will render using the new sizing parameters you set in step 1.

Known issues

We will keep this section up to date with known issues discovered during the developer beta, as well as marking when those issues are resolved. If you discover any functionality that is not working as expected, please let us know by adding a comment to this post.

Jun 19, 2019

  • When a user confirms a Bits transaction, the onTransactionCancelled callback erroneously gets invoked before the transaction is processed. The onTransactionComplete callback will still be called after the processing completes. Resolved 6/25
1 Like