Designing my extensions config page

Extensions
1

Hello!

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!

2

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.

image
image1270×135 12.7 KB

So in this example I use the panel/index.html file
Which is test mode I use the base URI of https://barrycarlyon.github.io/twitch_extension_debug/

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

3

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.

config page
config page1495×870 41 KB

4

this is the second image

config path
config path1602×142 35.9 KB

5

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
6

Do I do this on visual studio code?

Sorry I do not have a lot of coding experience

7

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

8

Installing and trying now, will keep you posted

Thank you

10

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

image
image882×337 8.39 KB

11

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

12

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

13

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

image
image1303×832 86.9 KB

14

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

15

From this

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

So you just tell NGROK to connect to that some port

16

this is my site http://127.0.0.1:5500/pagestructure.html how would I edit it? does it need to be https for local testing?

17

You do ngrok.exe http 5500

Which then connects a NGROK tunnel to your http://127.0.0.1:5500

18

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

19

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