tampermonkey | popular userscript manager , with over 10 million users | Browser Plugin library

Update 2

If the pages are dynamically generated, varies in content, and/or what and how things are loaded cannot be controlled, etc., try adding the button with .insertAdjacentHTML() method. Also adding elements to body isn't the best choice of locations because it's at the top of the hierarchy of HTML and there should be only few elements there.

There is no way you can predict class suffix that you are talking about.

That is used for purpose of encapsulating styles so that it applies only for that specific element or group of elements.

What you can do in your case is to use few CSS selectors that relay on searching values in attributes. In your case it would look something like this:

Edit: As it has been pointed out, first two sections of this answer are completely wrong.

TLDR: This might not be feasible without a backend server first fetching the video data.

If you check the MDN tutorial you followed, the video object passed to texImage2D is actually an MP4 video. However, in your script, the video object you have access to (document.getElementsByTagName("video")[0]) is just a DOM object. You don't have the actual video data. And it is not easy to get access to that for YouTube. The YouTube player do not fetch the video data in one shot, rather the YouTube streaming server makes sure to stream chunks of the video. I am not absolutely sure on this, but I think it'll be very difficult to work around this if your goal is to have a real time video effects. I found some discussion on this (link1, link2) which might help.

That being said, there are some issues in your code from WebGL perspective. Ideally the code you have should be showing a blue rectangle as that is the texture data you are creating, instead of the initial glClearColor color. And after the video starts to play, it should switch to the video texture (which will show as black due to the issue I have explained above).

I think it is due to the way you had setup your position data and doing clip space calculation in the shader. That can be skipped to directly send normalized device coordinate position data. Here is the updated code, with some cleaning up to make it shorter, which behaves as expected:

eslint: no-undef - 'THREE' is not defined is not necessarily problematic.

Use normal JavaScript versions of the Three.js scripts instead of module versions:

I was able to get it to work as I needed by removing the options:

Use GM_addElement to circumvent such CSP restrictions:

It was a bit difficult, but to solve this problem:

1. First it was necessary to find the element which listens to user events which trigger this behaviour, by using Ctrl-Shift-C on YouTube player's element and then adding "pointer-events: 'none'" to its parent elements' CSS, until it disables this functionality.
2. The element that was listening for the events can be selected with document.querySelector('ytd-page-manager #player-container'); (it turns out there are multiple elements with player-container id on YouTube).
3. Then we get event listeners for this element by typing "getEventListeners(temp1)" in Chrome developer console (where temp1 is the 'ytd-page-manager #player-container' element after right clicking and choosing "store as a global variable")
4. Then we add our own event listener with Capture:true and stop immediate propagation for these events (it was enough to do for the "pointerdown" event)

So after the page has loaded the code would be

Unfortunately this is not supported for gitlab.com since workhorse always sets the content disposition as 'attachment' for artifacts, causing the browser to download the file. The only cases where the content disposition header is set as 'inline' is when viewing blobs.

Your best possible workaround would be to commit your built files to the repository (or another repository/snippets) and use the raw view. Conveniently, project snippets are basically a repository within a repository you can use for this purpose.

For example, you can use the project snippets API in your pipeline to create a snippet containing your user scripts, then use the snippet raw URL in your release. I tested this as working with tampermonkey.

Another possible workaround may be to host your files on GitLab pages, but each publish to GitLab pages will overwrite the previous publish, so you'll have to download all your previous artifacts and re-publish them every time if you want to support all your branches/tags.
This may also prove problematic, as concurrent pipelines (like a tag+branch pipeline) may have race-conditions unless you guard them with resource groups.