# Twitch overlay extension

**URL:** <https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185>\
**Category:** Extensions\
**Created:** [February 20, 2020, 8:17am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185 "2020-02-20T08:17:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![tariquewaseem](https://avatars.discourse-cdn.com/v4/letter/t/87869e/32.png) [@tariquewaseem](https://discuss.dev.twitch.com/u/tariquewaseem)\
**Post date:** [February 20, 2020, 8:17am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/1 "2020-02-20T08:17:05Z")

</div>

I want to create a twitch overlay extension “scoreboard”, which will update the score automatically. I will subscribe to topic/channel on wss://pubsub-edge.twitch.tv to receive the json data from server.

Server will send the data to wss://pubsub-edge.twitch.tv. on a topic/channel

Created an overlay extension from the following

> **[Twitch](https://dev.twitch.tv/console/extensions)**
>
> Twitch is the world's leading video platform and community for gamers.

now what?

---

<div class="post-metadata">

**Author:** ![Dist](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://discuss.dev.twitch.com/u/Dist)\
**Post date:** [February 20, 2020, 9:28am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/2 "2020-02-20T09:28:35Z")

</div>

On your backend server you can use the Send Extension PubSub endpoint [https://dev.twitch.tv/docs/extensions/reference#send-extension-pubsub-message](https://dev.twitch.tv/docs/extensions/reference#send-extension-pubsub-message) to send the score to your clients.

On your frontend you can create a listener with the Extension Helper to listen for the broadcast your server will be sending [https://dev.twitch.tv/docs/extensions/reference#helper-extensions](https://dev.twitch.tv/docs/extensions/reference#helper-extensions)

An example of this in action can be seen in the Hello World sample extension, which has an EBS broadcast updates (in the sample it was updating the colour of an element in the frontend, in your case it’d be the same process but just sending the score data) and the frontend listens for that and updates what gets displayed accordingly.

---

<div class="post-metadata">

**Author:** ![tariquewaseem](https://avatars.discourse-cdn.com/v4/letter/t/87869e/32.png) [@tariquewaseem](https://discuss.dev.twitch.com/u/tariquewaseem)\
**Post date:** [February 20, 2020, 9:41am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/3 "2020-02-20T09:41:19Z")

</div>

Thank you Dist for quick response!

The APIs you have mentioned above are based on http. can’t we just use websocket based API like wss://pubsub-edge.twitch.tv. to solve my problem?

I will download the “Hello World sample extension” and check it in VS code editor. Is it necessary to use “Twitch developer rig” to test the extension or we can do it in VS code alone?

---

<div class="post-metadata">

**Author:** ![Dist](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://discuss.dev.twitch.com/u/Dist)\
**Post date:** [February 20, 2020, 9:50am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/4 "2020-02-20T09:50:49Z")

</div>

Your frontend connects to Twitch’s Extension Pubsub using the Javascript Helper, that’s the only way you should be listening for messages on it.

Your backend server shouldn’t be connecting to the Extension Pubsub at all as it doesn’t need to listen for anything (plus the only ones with the ability to send anything on PubSub is your server, and the broadcaster), it’s just broadcasting the scoreboard as needed. When you send the HTTP request, Twitch will handle broadcasting it on PubSub.

> [@tariquewaseem](#):
>
> I will download the “Hello World sample extension” and check it in VS code editor. Is it necessary to use “Twitch developer rig” to test the extension or we can do it in VS code alone?

You don’t have to use the rig, you can test on Twitch itself if you like as long as you whitelist a test account to install your extension on while it’s in testing.

---

<div class="post-metadata">

**Author:** ![tariquewaseem](https://avatars.discourse-cdn.com/v4/letter/t/87869e/32.png) [@tariquewaseem](https://discuss.dev.twitch.com/u/tariquewaseem)\
**Post date:** [February 20, 2020, 10:49am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/5 "2020-02-20T10:49:26Z")

</div>

I did not get “Your backend server shouldn’t be connecting to the Extension Pubsub”

does it mean the server will use following to send messages?

curl -H “Authorization: Bearer REMOVED   
-H “Client-Id: pxifeyz7vxk9v6yb202nq4cwsnsp1t”   
-H “Content-Type: application/json”   
-d '{“content\_type”:“application/json”, “message”:”{“foo”:“bar”}", “targets”:[“broadcast”]}’   
POST [https://api.twitch.tv/extensions/message/27419011](https://api.twitch.tv/extensions/message/27419011)

and

“Your frontend connects to Twitch’s Extension Pubsub using the Javascript Helper”

does it mean the client will use following to receive messages?

“wss://pubsub-edge.twitch.tv”

furthermore, can I change the “Hello World sample extension” as per my requirement. like I just want to keep only front-end related files in it and wants to delete all server related stuffs from this example.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [February 20, 2020, 10:52am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/6 "2020-02-20T10:52:48Z")

</div>

**Removed your bearer. bearers are like passwords and should not be posted publicly!**

Your code for sending appears correct.

Sending to pubsub is documented here

> **[Extensions Reference](https://dev.twitch.tv/docs/extensions/reference/)**
>
> Extensions Reference

> [@tariquewaseem](#):
>
> “Your frontend connects to Twitch’s Extension Pubsub using the Javascript Helper”
> 
> does it mean the client will use following to receive messages?
> 
> “wss://pubsub-edge.twitch.tv”

No you don’t connect to pubsub yourself, you receive it in an extension as documented:

> **[Extensions Reference](https://dev.twitch.tv/docs/extensions/reference/)**
>
> Extensions Reference

For example:

Use `broadcast` for channel specific messages and `global` for Extension wide messages. Your sending code above uses the broadcast topic

```auto
window.Twitch.ext.listen('broadcast', function (topic, contentType, message) {
    try {
        message = JSON.parse(message);
    } catch (e) {
        // this accounts for JSON parse errors
        // just in case
        return;
    }

    console.log(message);
});

```

---

<div class="post-metadata">

**Author:** ![tariquewaseem](https://avatars.discourse-cdn.com/v4/letter/t/87869e/32.png) [@tariquewaseem](https://discuss.dev.twitch.com/u/tariquewaseem)\
**Post date:** [February 20, 2020, 11:10am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/7 "2020-02-20T11:10:14Z")

</div>

Thank for reminding me about it, but this token was not actual it was just a random string.

Now, I want to break the “Hello World sample extension” example into two parts back-end and front-end

I will change the “Hello World sample extension” as per my requirement. like I just want to keep only front-end related files in it and will delete all back-end related stuffs from this example.

Will move back-end related code in back-end project.

I hope, I will be able to run the front-end only in “Twitch Developer Rig” after this change.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [February 20, 2020, 11:14am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/8 "2020-02-20T11:14:37Z")

</div>

> [@tariquewaseem](#):
>
> Thank for reminding me about it, but this token was not actual it was just a random string.

I didn’t take the time to validate it as real, but it matched the right format. It’s bad practice even if it’s invalid.

---

<div class="post-metadata">

**Author:** ![tariquewaseem](https://avatars.discourse-cdn.com/v4/letter/t/87869e/32.png) [@tariquewaseem](https://discuss.dev.twitch.com/u/tariquewaseem)\
**Post date:** [February 20, 2020, 11:32am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/9 "2020-02-20T11:32:22Z")

</div>

Downloaded “Hello World sample extension”  
I have started Front-end and Back-end both but not able to see the front-end view on twitch developer rig [https://www.screencast.com/t/ii2GXLbrU3j](https://www.screencast.com/t/ii2GXLbrU3j)

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [February 20, 2020, 11:38am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/10 "2020-02-20T11:38:57Z")

</div>

You didn’t create any views

---

<div class="post-metadata">

**Author:** ![tariquewaseem](https://avatars.discourse-cdn.com/v4/letter/t/87869e/32.png) [@tariquewaseem](https://discuss.dev.twitch.com/u/tariquewaseem)\
**Post date:** [February 20, 2020, 11:42am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/11 "2020-02-20T11:42:21Z")

</div>

It has default views. Please see here [https://www.screencast.com/t/UOBshs7pANUg](https://www.screencast.com/t/UOBshs7pANUg)  
Do I need to create other than default ones?

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [February 20, 2020, 11:43am UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/12 "2020-02-20T11:43:02Z")

</div>

You didn’t create any views in the rig.

Hit create view! Then define the parameters of the view (logged in/logged out etc)

 ![image](https://d2opxh93rbxzdn.cloudfront.net/original/2X/7/78d9dccf0c10730604d28f6379a17a19bbfbb530.png)

You need to tell the Rig what integration points it needs to display to you to simulate the broadcaster installing and activating your extension.

And means you can easily see the users view as well as the broadcasters config view on one page. If you tell the rig to present those layouts

---

<div class="post-metadata">

**Author:** ![tariquewaseem](https://avatars.discourse-cdn.com/v4/letter/t/87869e/32.png) [@tariquewaseem](https://discuss.dev.twitch.com/u/tariquewaseem)\
**Post date:** [February 20, 2020, 12:33pm UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/13 "2020-02-20T12:33:34Z")

</div>

does client need to be authenticated to receive the messages broadcasted by server?

like  
[https://id.twitch.tv/oauth2/token](https://id.twitch.tv/oauth2/token)’ +  
‘?client\_id=’ + clientId +  
‘&client\_secret=’ + clientSecret +  
‘&grant\_type=client\_credentials’

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [February 20, 2020, 12:34pm UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/14 "2020-02-20T12:34:41Z")

</div>

No the Extension “client” is just a webpage with code similar to

```auto
window.Twitch.ext.listen('broadcast', function (topic, contentType, message) {
    try {
        message = JSON.parse(message);
    } catch (e) {
        // this accounts for JSON parse errors
        // just in case
        return;
    }

    console.log(message);
});

```

Present.

The Twitch JS extension helper handles all the relevant authentication needed to operate

---

<div class="post-metadata">

**Author:** ![tariquewaseem](https://avatars.discourse-cdn.com/v4/letter/t/87869e/32.png) [@tariquewaseem](https://discuss.dev.twitch.com/u/tariquewaseem)\
**Post date:** [February 20, 2020, 12:53pm UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/15 "2020-02-20T12:53:25Z")

</div>

ok, actually our server will broadcast the live score to multiple channels. At the same time the clients will check if the score changes are coming to my channel. if yes then it will update the score on overlay.

my question is how score overlay will know where am I running? because this score overlay will be added to multiple channels for live streaming

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [February 20, 2020, 12:55pm UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/16 "2020-02-20T12:55:01Z")

</div>

If the score is the SAME for all channels.

Then broadcast using `all` and listen on `global` instead of `broadcast`

> **[Extensions Reference](https://dev.twitch.tv/docs/extensions/reference/)**
>
> Extensions Reference

> POST [https://api.twitch.tv/extensions/message/all](https://api.twitch.tv/extensions/message/all)

For example JWT:

```auto
{
  "exp": 1503343947,
  "user_id": "27419011",
  "role": "external",
  "channel_id": "all",
  "pubsub_perms": {
    "send":[
      "global"
    ]
  }
}

```

---

<div class="post-metadata">

**Author:** ![tariquewaseem](https://avatars.discourse-cdn.com/v4/letter/t/87869e/32.png) [@tariquewaseem](https://discuss.dev.twitch.com/u/tariquewaseem)\
**Post date:** [February 20, 2020, 12:58pm UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/17 "2020-02-20T12:58:29Z")

</div>

correct, but how the score overlay will know where I am running because the same overlay is added on different channel?

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [February 20, 2020, 12:59pm UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/18 "2020-02-20T12:59:54Z")

</div>

You don’t need to know as if you sent to `all` it sends to all active channels

The live activated channels endpoint

> **[Extensions Reference](https://dev.twitch.tv/docs/extensions/reference/#get-live-channels-with-extension-activated)**
>
> Extensions Reference

Will tell you which channels are live streaming with your extension active.

---

<div class="post-metadata">

**Author:** ![tariquewaseem](https://avatars.discourse-cdn.com/v4/letter/t/87869e/32.png) [@tariquewaseem](https://discuss.dev.twitch.com/u/tariquewaseem)\
**Post date:** [February 20, 2020, 1:07pm UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/19 "2020-02-20T13:07:26Z")

</div>

Two different games are being live streamed on two different channels. The score will be different of both games suppose channel 1 (game 1) score is 1:2  
while channel 2 (game 2) score is 2:5

we want to update the score channel wise on score overlay.

I hope you got my point.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [February 20, 2020, 1:08pm UTC](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185/20 "2020-02-20T13:08:33Z")

</div>

Then you need a game to streamer Map in your EBS.

And broadcast the data to the Extensions accordingly.

You could use global and include game information in the payload  
Or you could broadcast directly to individual channels

[Next page](https://discuss.dev.twitch.com/t/twitch-overlay-extension/24185.md?page=2)