Javascript for Panel Extension is not loading

Extensions
1

Hello,

I’m working on a Panel Extension and I’m trying host it using the twitch cdn.
The Panel html is loaded but the js files referenced are not and result in an error 400.

I know that it has something todo with the way the js is referenced.

My index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="UTF-8">
    <title>Extension</title>
    <script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
</head>

<body>
<script src="app.js" type="text/javascript"></script>
<p>Loading...</p>
</body>
</html>
2

Remove

<base href="/">

That tells brwosers to put this at the start of all resources

3

I tried that and it works for the js files but the framework I’m using requires a base href meaning now the UI is not loaded.

4

There is no way to know the base HREF until you upload to Twitch.

So you’ll either need to find how the framework operates without a base.
Create a shim to dynamically determine the base
Try <base href="./"> as the base which I have no idea if it works or not as a valid value.

The framework really shouldn’t need a base as

A document’s used base URL can be accessed by scripts with Node.baseURI. If the document has no <base> elements, then baseURI defaults to location.href.

As MDN states there is a backup/default to use instead

5

Thanks I got it working in the end. I was able to get rid of .