Hosting Testing Hello World Issues

Extensions
1

I am able to run the my-extension hello world example fine in local and online mode. Hosted mode is broken for me.

I followed the mac instructions to attempt this.

I have seen the many pervious posts about this that have all been solved by ensuring the assets are at the root of the archive. If you need proof here is the zipinfo for the zip.

$zipinfo Archive.zip
Archive: Archive.zip
Zip file size: 11879 bytes, number of entries: 19
-rw-r–r-- 2.1 unx 604 bX defN 18-Aug-31 15:03 config.html
-rw-r–r-- 2.1 unx 201 bX defN 18-Aug-31 14:58 config.js
-rw-r–r-- 2.1 unx 1121 bX defN 18-Aug-31 15:03 live_config.html
drwxr-xr-x 2.1 unx 0 bx stor 18-Aug-31 14:58 local/
-rw-r–r-- 2.1 unx 606 bX defN 18-Aug-31 14:58 local/config.html
-rw-r–r-- 2.1 unx 1123 bX defN 18-Aug-31 14:58 local/live_config.html
-rw-r–r-- 2.1 unx 1102 bX defN 18-Aug-31 14:58 local/panel.html
-rw-r–r-- 2.1 unx 1102 bX defN 18-Aug-31 14:58 local/video_component.html
-rw-r–r-- 2.1 unx 1102 bX defN 18-Aug-31 14:58 local/video_overlay.html
drwxr-xr-x 2.1 unx 0 bx stor 18-Aug-31 14:58 online/
-rw-r–r-- 2.1 unx 614 bX defN 18-Aug-31 14:58 online/config.html
-rw-r–r-- 2.1 unx 1131 bX defN 18-Aug-31 14:58 online/live_config.html
-rw-r–r-- 2.1 unx 1111 bX defN 18-Aug-31 14:58 online/panel.html
-rw-r–r-- 2.1 unx 1111 bX defN 18-Aug-31 14:58 online/video_component.html
-rw-r–r-- 2.1 unx 1111 bX defN 18-Aug-31 14:58 online/video_overlay.html
-rw-r–r-- 2.1 unx 1100 bX defN 18-Aug-31 15:03 panel.html
-rw-r–r-- 2.1 unx 1100 bX defN 18-Aug-31 15:03 video_component.html
-rw-r–r-- 2.1 unx 1100 bX defN 18-Aug-31 15:03 video_overlay.html
-rw-r–r-- 2.1 unx 1922 bX defN 18-Aug-31 14:58 viewer.js
19 files, 17261 bytes uncompressed, 8967 bytes compressed: 48.1%

I thought perhaps it was I wasn’t archiving the right files since the instructions are somewhat vague on which files are needed (I’m not a frontend dev by trade). I am going into the ./my-extension/public directory and zipping up its contents. As previously stated the zip has all the files in it’s root.

I uploaded that to to the extension manager. I added my twitch account to the broadcaster whitelist and the testing account list. I hit the “move to hosted test” button the config and activate the app. Then I load up the config page, or go to my channel page, in both cases all app visuals fail to load.

Here is the error log for when the config fails to load. It looks like it is still looking to my local host for the extension files instead of looking on twitch’s servers. I don’t know what I need to do to fix this. I state again, I have not modified the example project and am just trying to learn the workflow.

config.html:1 Refused to load the script ‘https://localhost.rig.twitch.tv:3000/twitch-ext.js’ because it violates the following Content Security Policy directive: “script-src ‘self’ https://lcjxgkxbdqqk6ieyruvryrnoose9e5.ext-twitch.tv https://extension-files.twitch.tv”.

config.html:1 Refused to load the script ‘https://code.jquery.com/jquery-3.3.1.min.js’ because it violates the following Content Security Policy directive: “script-src ‘self’ https://lcjxgkxbdqqk6ieyruvryrnoose9e5.ext-twitch.tv https://extension-files.twitch.tv”.

config.js:3 Uncaught TypeError: Cannot read property ‘ext’ of undefined
at config.js:3

2

In hosted test,

you are trying to load from https://localhost.rig.twitch.tv:3000/twitch-ext.js which you can’t you must use a local URL/Path not a absolute URL/Path.

you are trying to load from https://code.jquery.com/jquery-3.3.1.min.js you cannot load jQuery from code.jquery.com in must be included in your zip

3

So given the my-example project that is pointed to in all the tutorials.

For the localhost loading, where is this problem line in the project so I can change it to a relative path?

What do I have to include within that project folder that will make jQuery load from twitch cns?

4

So to answer my own question. In the html files look for any references to localhost and remove them. I couldn’t find any after double checking so I imagine the jQuery thing caused both issues.

For the jQuery error, download the minified library file from the jQuery site and include it in your archive. Then look through the html files for jQuery script includes and make them local paths.

5

You got it!