Trying my first extension. Weird CORS error!

Hello, I am trying to make my first twitch extension ever. I was following this guide: Extensions | Twitch Developers. I’ve worked with Vue a lot so I wanted to make my extension using that. I created a project, connected it to a private github repo and spun up a dev server on 8080. The application works as expected until I add this line to the main.ts file:

import “https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js

as soon as add that line of code I get the following error and my vue components dont load:

Access to script at ‘https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Please Help, I am very confused

Shouldn’t be importing it

It needs to be it’s own <script in the head of the html

Ah I thought I tried this, but maybe I didn’t have it in the head before. Thank you that was an easy fix! My webpage loads now when hosting locally, but unfortunately, when I upload the project and move it to Hosted test, I still don’t see anything in my video component on my channel :thinking: . I don’t have time to dig into that right now, but if you have any suggestions i’m all ears!

Usual suspects:

  • you upload a zip file of a folder of files isntead of files and thus the paths don’t match, check network tab for your HTML loading or not
  • your zip file is correct but your JS/CSS did not load becuase you used absolute links instead of relative links, extensions are uploaded to a sub folder on the extension sub domain, check network tab for 404’s or mime type errors
  • your JS doesn’t include an onAuthorised call resuling in $clientID was not loaded in the console tab
  • something else. console to debug and trace

Extensions are just websites, debug accordingly

(Its only gonna let me put one image per reply since i’m a new user so sorry for multiple messges)

Alright I’m still struggling a lot here. Pretty sure i’m having issues with all of the first 3 bullet points.

Starting with bullet number 1, I was uploading the folder instead of the files. Easy fix, but just to be clear, Would I want to upload all the files inside the project’s folder? or just the files inside of the dist folder?

When I upload just the files within the dist folder, I get these two error in my network tab:
image

When I upload all files in the project, I get no errors in the network tab but I get this in the console tab:
image

Here is my index.html file:

And my main.ts file:

The white “hello world” from the index.html body shows up in my extension on twitch but nothing from my App.vue file renders

The MIME type error is because the server is responding with an error page because it can’t find your files.

The reason your js and css files can’t be found is becuse you’re using absolute links, rather than relative links.

Extensions are served from https://CLIENTID.ext-twitch.tv/CLIENTID/VERSION/HASH/, but because you link to /assets/... your HTML is making requests to https://CLIENTID.ext-twitch.tv/assets/... which is incorrect.

Your links should be ./assets/... or assets/... which will appropriately link to https://CLIENTID.ext-twitch.tv/CLIENTID/VERSION/HASH/assets/...

Woah. Just noticed something. I accidentally sent the dist/index.html file in the post above. For clarification i’ll send both index.html’s below.

src/index.html:

dist/index.html:

Am I using relative path’s correctly in the src/index.html? How can I make the path relative in the dist version too?

FINALLY SOME RESULTS!!
Pog GIFs | Tenor

I manually edited my dist/index.html file to use relative paths, and it still wasn’t working. So I checked out this guide again Extensions | Twitch Developers and realized I forgot to change my base URI from https to http. Thanks for your help guys this was a frustrating one.

Still if you have any ideas how to make my dist/index.html paths be relative even when i build That’d be awesome, but if not I can live with remembering to manually edit a couple lines in dist. Finally i can attempt development :sleepy: