Twitch server not contacting my front-end service. Errors showing in Chrome debugger for extension

Extensions
1

I got rid of the authenticated sources warning on my extension by moving to a full-fledged domain with valid SSL certs. However, when my extension loads on my channel page, I see a blank screen. I have my extension, which is currently the Hello World sample, running in a debugger and I am not seeing any activity, so it doesn’t look like the Twitch servers are contacting my front-end service.

If I do a simple get request in a browser to the front-end service, I DO see activity so I know the route is working, at least at the Internet routing level. But when I check the Chrome debugger I see this error:

Got message from unexpected source https://supervisor.ext-twitch.tv {"target":"inpage","data":{"name":"publicConfig","data":{"networkVersion":"1"}}}
handleAction    @    supervisor.js:1
postMessage (async)        
Z._write    @    contentscript.js:1
h    @    contentscript.js:1
(anonymous)    @    contentscript.js:1
a.write    @    contentscript.js:1
y    @    contentscript.js:1
(anonymous)    @    contentscript.js:1
m.emit    @    contentscript.js:1
L    @    contentscript.js:1
I    @    contentscript.js:1
h.push    @    contentscript.js:1
m.push    @    contentscript.js:1
(anonymous)    @    contentscript.js:1
Z.afterTransform    @    contentscript.js:1
transform    @    contentscript.js:1
m._read    @    contentscript.js:1
m._write    @    contentscript.js:1
h    @    contentscript.js:1
(anonymous)    @    contentscript.js:1
a.write    @    contentscript.js:1
y    @    contentscript.js:1
(anonymous)    @    contentscript.js:1
m.emit    @    contentscript.js:1
L    @    contentscript.js:1
I    @    contentscript.js:1
h.push    @    contentscript.js:1
Z._onMessage    @    contentscript.js:1

Anyone know what is wrong? I have the base URI for the front-end service set to the following (with a real domain, not the fake domain shown below I’m using to hide the actual domain). Please don’t click on the link, the domain is fake. How can I show a link in a forum post without making it clickable?:

https://my-real-domain.com:7600/

2

Got it figured out. I’m an Node.JS/Express dev and I had to take an ad hoc crash course in Hapi server to get things working. My original problem was that I was serving up the backend for the front-end. I fixed that, but I had to learn a bit about Hapi routing and the use of the Inert plugin to get things working in total.

I now have the Hello World extension sample working now with the color cycler demo. I still get the occasional “Got message from an unexpected source” error in the Chrome debugger from time to time, but I don’t know why that’s happening and it doesn’t seem to affect anything that I detect.

3

If you are having problems with HAPI just build it in express and skip the hello world example (which uses HAPI)

A Twitch extension is literally just plain HTML, JS, CSS on the front end and then do you EBS however you want.

Don’t get bogged down in HAPI if you don’t know HAPI or intend to use HAPI

1 Like
4

Hii Barry,

I got it working. It still very useful to have that sample working, especially for the JWT token code, which was new to me. I had already done Twitch auth in Express with Passport, but that JWT code was completely new to me.

5

Comparing Twitch oAuth with JWT is like comparing apples with oranges.

Two distinctly different industry standard methods.

Also since on the subject of JWT’s

As noted on

If you are not familiar with JWTs, visit the official site for an introduction.

Check

And consider using

jsonwebtoken to manage you JWT verification and decoding, in node

1 Like
6

Thanks again Barry, I’ll have a look at those.

But I’m “off to the races” now. I have what I need to to get my extension working.