Hosted Extension Errors

Hi all,

I moved my extension to the Hosted stated and included all of the CSS and JS files in the uploaded assets. But when the extension loads on the live feed I get a 404 errors despite the files being in their respected folders. This is how it is listed in the viewer.html

<link rel="stylesheet" href="/css/bootstrap.css" id="bootstrap-css">

And this is the error:

GET https://g39equtxkqd9z7s9qvj6cshka8.ext-twitch.tv/css/style.css 404 ()
Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'self' <URL> <URL>".

I’m going through the docs now and it mentions that if the files are included in the CDN hosted content it’s fine. Does anyone know if I need to add anything to the tags?

Thanks,
Mark

the <link> tag requests “bootstrap.css” but the error is about “style.css” - maybe there’s a problem at some other place in the HTML or the included CSS tries to load it?

Also, the second error is about inline JS, which is not allowed, so check if there’s some in the HTML.

More of the HTML file in question would help.

Sorry, I copied the wrong error!

This was the original line

<link href="/css/style.css" rel="stylesheet" >

Stupid question, but I just had a look at the Hello World example and there are no folders in the public one. Does this mean all JS, CSS and HTML have to be on one folder? That seems a bit messy.

You can have your files sorted into folders, I have a folder structure in my frontend files (that go onto the Twitch CDN) as well, and it works without problems.

However, I had a few issues upload my assets as well, lately. The solution for me was to re-upload them (sometimes several times) till it worked. Maybe this is the for you here, as well?

Related thread(s):

Don’t use Absolute URL’s

Your assets are uploaded to SOMEDOMAIN/SOMEKEY/VERSION/ANOTHERKEY/yourfiles

So your css file is not at /css/style.css. Link it using a URL relative to your HTML file

OK thanks for that advice.
Mark

We just have to build the project and add the files into a zip and upload it, right?
I did that but the extension HTML is not showing up, however when I host the same files on S3 and provide the public root URL, it works.

The build files are directly inside of the zip and not in another folder of the zip.
The structure is like this:
Folder.zip
|-index.html
|-main2348432.js
and remaining files in similar manner.

Am I missing something?

What error are you getting in the console? Is it the HTML 404’ing, or the .js?

Also, not directly related to your issue, but best practices would be to have a separate file for each view rather than shared html/js used by all views as otherwise you’re loading data for views that may not even need it.

This is error in the console.

I am using angular so, just uploading the build files.

EDIT: The localhost error I am aware of and is for a different extension.

Can you show the full URL that’s 404’ing, because of the length it’s partially hidden in that console picture.

It’s 404’ing because it’s trying to access a path called panel, when you want it to load index.html. In the Asset Hosting tab in your extension settings console, make sure you have each view pointing at index.html

1 Like

Thank you @Dist