Cannot select video element when self hosting the asbplayer client

[ShiroTohu]

Hello! I'm struggling to get the https://app.asbplayer.dev/ website working locally on my server as I cannot get the "select video element" on the website appearing. The website is able to launch no problem but that tab selector isn't showing. There is a lot of things that I have tried and I haven't been able to figure it out yet.

It's also worth mentioning that I am using the Firefox version of the extension which to my knowledge is not up to par with the chrome extension. I've also built the extension myself using the source code. But I've tested this issue on chrome using the official extension as well and it seems to be there as well.

# node --version
v22.17.1
# yarn --version
3.2.0
# go version
go version go1.19.8 linux/amd64

# cat /etc/os-release
PRETTY_NAME="Debian GNU/Linux 12 (bookworm)"
NAME="Debian GNU/Linux"
VERSION_ID="12"
VERSION="12 (bookworm)"
VERSION_CODENAME=bookworm
ID=debian

Below is what I use to start the client server. When running the client server there are no warnings or error messages appearing despite it being accessible on my local network.

yarn workspace @project/client run start --host 192.168.0.35
# I also use below in the client directory just on the off chance that it does something differently
yarn start

The server is not running locally on the machine that I have the extension installed on.

The vite.config.ts is also changed because of the reverse proxy. I added my asbhost domain to allowedHosts. The reverse proxy has websocket support turn ON. asbplayer.homelab.net is not my real homelab domain name btw.

server: {
            open: true,
            port: 3000,
            allowedHosts: [ "asbplayer.homelab.net" ]
        },

Just in case I also ran the websocket server in the background, though I'm quite certain this is unnecessary.

In this design, asbplayer is a WebSocket client that maintains a connection with a WebSocket server that runs locally on the user's computer.

This is how I run the websocket server in the background, the & is used to turn it into a background process:

go run . &

I have changed the app url on a new profile called "Custom". I have also tried accessing it with the raw IP of 192.168.0.35 with the port exposed on port 80. The same issue happens with seemingly no changing results.

I looked at these resources to help me out:

• https://docs.asbplayer.dev/docs/guides/offline-usage
• https://docs.asbplayer.dev/docs/common-issues
• https://docs.asbplayer.dev/docs/contributing
  • For the start instructions

I have also looked at the the bug issues and couldn't really see anything similar.

Some guidance would be greatly appreciated.

[killergerbah]

@ShiroTohu For the video element selector to appear the extension needs to load a specific content script into the asbplayer website. The hosts are specified here: https://github.com/killergerbah/asbplayer/blob/46279ce5dfa40daedc3eccd473efb87e146946de/extension/src/entrypoints/asbplayer.content.ts#L17

Unfortunately, production builds of the extension do not include localhost since extension stores do not allow such builds to be uploaded. You may build a development version of the extension instead:

yarn workspace @project/extension run build --mode development

Or modify the code to include localhost on production builds.

And in case you are not aware, it is possible to use the asbplayer extension without the website - you just need to load subtitles onto any streaming video element with drag-and-drop, with the side panel, or with right-click. Just make sure the "open subtitles in separate tab" setting is disabled.