Activate a Twitch Extension Panel
Tags: serverless, tutorial, devjournal
Published: 2021-10-19 07:19:01

This article is the second in a multi-part series to walk through the creation of a Twitch extension. For the second part, the goal is to install the front-end panel.

To go directly to the project, the source code repository is available at [github.com/shrmpy/pavlok-panel](https://github.com/shrmpy/pavlok-panel)

__Requirements:__
- 2FA
- [Deploy EBS](https://dev.to/shrmpy/netlify-quick-deploy-for-a-twitch-extension-ebs-30cp)



## &sect; Steps
There will be steps from [part 1 of the series]() that overlap. So some steps may already be done. That said, the intention is for part 2 to be as self-contained as reasonable.

1. Enable two-factor. Follow the [instructions from Twitch support docs](https://help.twitch.tv/s/article/two-factor-authentication). 2FA is a requirement for creating extensions.

2. Follow the [tutorial](https://dev.twitch.tv/docs/tutorials/extension-101-tutorial-series/create-extension) to register a new extension. Specifically (repeated here):
    > Creating the Extension in the Console
    >
    >1) Go to the [Extensions Developer Console](https://dev.twitch.tv/console/extensions). From this console, you can start the process of creating a new Extension, view and clone your Extensions, and manage specific versions of your Extension(s). Login with your Twitch ID. You should see a page like this:
    >![Extensions developer console](https://dev.twitch.tv/docs/assets/uploads/extension-tutorial-2.png)
    >2) Click the __Create an Extension__ button on the right side of the page.

    >3) Fill in the __Name Your Extension__ section with any name you want, and then click Continue.
    >![Start an extension](https://dev.twitch.tv/docs/assets/uploads/extension-tutorial-3.png)
    >4) On this versions page, be sure to fill out respective fields
    >   - __Type of Extension__ — (Required) Select Panel.
    >   - __Version Number__ — (Required) Leave this as 0.0.1.
    >   - __Summary__ — (Optional) This will be viewable by broadcasters and viewers. It should be 1-2 brief sentences describing what your Extension does. To provide more detail, use the Description.
    >   - __Description__ — (Optional) More detail than the Summary about the functions of your Extension.
    >   - __Author Name__ — (Optional) The full name of the Extension author or organization that will receive credit on the Extensions manager.
    >   - __Author Email__ — (Optional) Contact information for the Extension creator. This is used to contact the developer with information about the Extension’s life cycle (e.g., reject/accept notifications). Twitch will never reveal this email to anyone on the site. If you provide this information, you’ll get a verification email soon after creating the Extension version. Be sure to check your email, as you need to verify ownership of the author email address.
    >   - __Support Email__ — (Optional) Public contact information for support-related queries from broadcasters.
    >
    >5) Click __Create Extension Version__. You will then see the Status page of the Extension Manager. This page essentially shows the current status (Local Test) of the Extension in the Extension Life Cycle, and also provides you with next steps to move the Extension through the life cycle. You should see the following page:
    >![extension life cycle](https://dev.twitch.tv/docs/assets/uploads/extension-tutorial-4.png)

3. Set the filenames of the broadcaster config, live config, and viewer panel.
    - Click the __Asset Hosting__ tab. 
    - The __Panel Viewer Path__ should already be pre-filled with the name `panel.html`. If not, then input the name `panel.html`.
    ![asset hosting](https://dev.twitch.tv/docs/assets/uploads/extension-tutorial-14.png)
    - The __Config Path__ should already be pre-filled with the name `config.html`. If not, then input the name `config.html`.
    - The __Live Config Path__ should be empty. Input the name `live_config.html`.
    - Click the __Save Changes__ button to save the filename settings.


4. Choose Configuration Service from the __Capabilities__ tab. Taken from the [tutorial](https://dev.twitch.tv/docs/tutorials/extension-101-tutorial-series/local-test#step-2-enabling-the-configuration-service) (repeated here):
    >Before testing the Extension, go to the Console Manager and enable the Configuration Service. Go to the __Capabilities__ tab of the Extension Manager, and scroll down to the second frame, where you should see a section titled “Select how you will configure your Extension.” Select __Extension Configuration Service​__, and then save the changes.
    >![configuration service](https://dev.twitch.tv/docs/assets/uploads/extension-tutorial-15.png) 

5. Find the new extension secret as explained in [Step 2: JWT Secret](https://dev.twitch.tv/docs/tutorials/extension-101-tutorial-series/jwt). Specifically (repeated here):

    >__Concept:__ Each Extension maintains a shared secret that is used to sign tokens that validate the identity of users. Extension Secret is `base64` encoded and is provided to you by the Extension Manager.
    >
    >To retrieve the secret, lets go to the Extension Manager. To get to the Manager, go to the [console](https://dev.twitch.tv/console/extensions), select a version of the Extension and click __Manage__. Once on this page, you will see the default status page. On the top right of the manager, click the __Extension Settings__ button. You will see the following page:
    >![JWT secret](https://dev.twitch.tv/docs/assets/uploads/extension-tutorial-29.png)
    >Under the __Extension Client Configuration__ section, copy the key provided. We need to use this key to verify that the token provided is signed with the same secret.

 

6. Obtain the ZIP archive of the front-end files. Navigate to the [source code repository](https://github.com/shrmpy/pavlok-panel).

    Click on the __Releases__ link on the right hand column to reach the release files. Download the archive named `panel.zip`:
    ![release zip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jt0nl0clz0lf6knyp6kl.png)

7. Upload ZIP archive. With the `panel.zip` downloaded from the source code repository, return to the [console](https://dev.twitch.tv/console/extensions) where the __Files__ tab can be found (same as __Go to Files__ link in __Status__ tab).

    >Package your Extension
    >When you send Twitch an Extension, you need to bundle the Extension files into a zip file. Make sure you are bundling the files, not the folder containing your Extension files.
    >
    >To upload your zip file to Twitch, choose __Files > Upload Version in Assets > Choose File__. Then click the purple __Upload__ button at the bottom.
    >
    >Now we’re ready to move to Hosted Test. Click __Next Step__ in the top right, click __Move To Hosted Test__, and confirm your choice.


8. Switch to Hosted Test. Navigate to the __Status__ tab. The heading will show __Current Status: Local Test__. Now the __Move to Hosted Test__ button will be available. Click the button to change to Hosted Test.


9. [Quick Deploy the EBS](https://dev.to/shrmpy/netlify-quick-deploy-for-a-twitch-extension-ebs-30cp). The URL that Netlify creates for the deployment will be our EBS base URL. If you completed part 1 previously, then step #9 is already done.

10. Activate. Follow [tutorial](https://dev.twitch.tv/docs/tutorials/extension-101-tutorial-series/local-test#step-3-install-configure-and-activate-your-extension):
    >We are ready to see the Extension live on Twitch! To do so, go to the __Status__ page of the Extension Manager, and scroll down to the section titled “Next Steps.” Click the ​__View on Twitch and Install​__ button.
    >![upload files](https://dev.twitch.tv/docs/assets/uploads/extension-tutorial-16.png)
    >Clicking this button will open a new tab with the Extension Details page.
    >
    >__Installation__:​ Next, click the purple __I​nstall__ ​button. When the Extension is installed, you will see a confirmation pop-up informing you that Extension installation is complete, and that if you want to activate the Extension right now, you need to configure it.

    ![panel install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnlyzj8po0byg38kvcd9.png)

    >__Configuration__:​ Click __​Configure__​. Upon doing so, you will be directed to the Broadcaster Configuration Page. Here we see the page we created where the Broadcaster can select the options they want viewers to be able to choose from.

    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03r7e0z1cldnse2p1m47.png)
    The URL shown here (https://randomized-phrase.netlify.app) is an example, but the format of EBS base URL will be similar from the result of step #9.

    Clicking the button __connect pavlok (opens in new tab)__ will be the first test that the configuration fields are matched correctly. If everything works, the Pavlok OAuth Login prompt will display. Unless pop-up windows are blocked, in which case the browser configuration needs to allow `dashboard.twitch.tv` for this step.
    ![pavlok login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulwg0hkrkwknmgx4b5dm.png)

    If the Pavlok Login is successful, the pop-up will be closed and return you to the extension config view. Close the config view, and the extension will have the __Activate__ dropdown available:
    ![panel activate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4okpm98kxbk6yf1s4ahv.png)
    Choose __Set as Panel 1__ if that is available. Now the extension is activated.

## &sect; Test

- Go to the __Stream Manager__ page on Twitch, and under the __Quick Actions__ list click on the new extension. It should launch the Live Config view in a new window.
    ![live config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1oqoc18z6e0317cf1ec.png)

- Click on the __shock__ button and if everything is connected, the Pavlok API call will be invoked. If the Discord webhook is configured, the API result code will be logged in the respective channel, too.

_____
### &#42; Notes, Lessons, Monologue
![panel flowchart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rr0m56ruf1ubiojrfx31.png)
*Legacy* panel view flow; need to revise for iterations so far.

![config flowchart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzest7yqscvymhth2bth.png)
*Legacy* broadcaster config; need to revise.