Extension in components overlay

Extensions
1

Good afternoon!

I would like to ask for your help please. I need to create a component on top of an overlay, and I am trying to do this using the following link: Twitch Developers. In the video_component.html file, I have the appropriate link. However, when uploading the extension to Twitch, something goes wrong and the component does not display correctly along with the button.

I would appreciate your help with this. Thanks!!!

2

This normally indicates that you uploaded a zip file of a folder of files. Instead of a zip of files

3

I uploaded the zip, and inside are the files for customization: exactly the same as on the website at the link

But it causes problems when displayed.
When I run it on a test server - it doesn’t work at all. :face_with_peeking_eye:

4

Then you need to debug it like you would a regular website.

You’ve not provided any additional information to help you.

So you need to apply normal website debugging and trace the fault.

Did network tools 404?
Do you have any errors in the console?
If in local test if your testing base URI isn’t over SSL then you’ll have fun accepting mixed content warnings…
Is something else I havn’t listed occuring?

5

Maybe you have some ready-made extension for this format? So that there is a button on the screen and viewers can interact with it by clicking on it :roll_eyes:

6

What you describe is like 4 lines of HTML (to make the button not including the boilerplate/Twitch required bits)

And 4 lines of javascript to make the click event and fetch request.

So it’s so basic that no I don’t

I mean I could go write it up, but it’s that basic, since it’s the basicist of websites really

7

I beg your pardon. I’m not asking you to write this. It’s just that when I do this, and start adding an extension, I don’t get anything displayed at all. But in the browser locally everything is displayed correctly.

Could you just look on Github and tell me what could be causing the display problems? Thank you :disappointed:

8

Other than the Twitch Extension helper you shouldn’t be loading external JS (I think Google Analytics and Google Fonts are also allowed, but the Extension Helper is required). You’re trying to use jQuery from a CDN rather than locally bundled with your Extension.

9

Then what does the console display in terms of error?

Does you html actually load in network tools and/or inspect element

If the webpage doesn’t load you need to debug it like you would a regular website

Once you’d identified which is failing then we can advise fixes if you cannot self determine the fix

You don’t need the jQuery script at all as your js doesn’t call/use jQuery

You don’t have an onAuthorised call in your js at all

So I don’t know if your html failed to load (http 404 in network tools) or the onAuthorised is missing (which raises a console error)

Well you asked for a boilerplate and I don’t have one for a simple button. So apologies if I misunderstood

10

Hello!
Can you please tell me what is wrong with my code? I don’t need a token for authorization, as I only have a button with classes and a js file with import twitch.js

When testing locally on hosting - http://127.0.0.1:5500/video_component.html everything displays correctly in OBS, but it doesn’t click on broadcasts.

When testing already on remote - invalid extension version param gets…

I don’t understand at all what I’m doing wrong

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>VK Button</title>
  </head>
  <body>
    <div id="vk-button">
      <a href="https://vk.com/" target="_blank">VK
      </a>
    </div>
  </body>
</html>

import Twitch from "twitch.js";

const button = document.querySelector(".vk-button");

const handleClick = () => {
  Twitch.openURL("https://vk.com/");
};

button.addEventListener("click", handleClick);
11

Extensions are not normally loaded inside OBS
They are shown/loaded on the Twitch website, and in the componenet slot shown on the right of the player

This should work in the context of a Twitch Extension if the URL is also added to the allowlist

I don’t know what TwitchJS is

That indicates a problem loading the HTML/JS/CSS or something else.

At this point I’m not sure if you are building an extension or something to be used in side OBS