Designing my extensions config page


I am coding my own extension and I am struggling with designing the config page. I cannot seem to find where I can add an image and button that will take the user to my web application linked to the extension.

Thank you!

Extensions are just websites.

In the developer console you tell which HTML file to load into each slot.

So you’ll tell the dev console to load config.html for example and then in the config.html file you’ll add whatever HTML you need as required.

So in this example I use the panel/index.html file
Which is test mode I use the base URI of

This “test” extension is hosted on github pages.

So I could change this to config/index.html and then I’d edit config/index.html accordingly

thank you for your quick response!

so I have done that with a web site I created on visual studio code but the page is still blank. I have been able to add a logo though.

I have attached two images. I have drawn over some of the information.

this is the second image

If you open Developer Console (f12) and do “normal website debugging”

You’ll find that your content failed to load due to “mixed content” restrictions

The Twitch Website is over SSL (https) and normally a Website over SSL will not load content over none SSL (http) as that is a security risk.

You can either

  • enable mixed content (not recommened) how to do this will depend on your browser
  • setup your test environement to provide SSL, the “quickest” method for this is to use NGROK

Do I do this on visual studio code?

Sorry I do not have a lot of coding experience

I don’t know if you can do SSL providation in visual studio code. Probably not since you cannot SSL localhost generally speaking (and you’ll have self signed cert issues so you’ll have other issues).

The simplest solution is probably NGROK.
Intall that run it, pointing it at whatever visiual studio is running for you
And then use the URL NGROK provides as the URL for you extension bnase URI

Installing and trying now, will keep you posted

Thank you

so I have installed it and I typed in ngrok.exe http 80 and this page came up. what should i do next?

The address starting 6290 can be used as your extensions testing base URI

Could you please explain to me what that means?
thank you for taking time to help :blush:

This is the testing base URI, where Twitch loads things from when in local test

Okay I understand that, but how do I link my visual studio code website to ngrok?

From this

I assumed you already had visual studio serving your website on some port

So you just tell NGROK to connect to that some port

this is my site how would I edit it? does it need to be https for local testing?

You do ngrok.exe http 5500

Which then connects a NGROK tunnel to your

Okay I am trying, and then does it need to be https for local testing?

NGROK will handle SSL for you so use the URL ngrok provides