How to load JS and CSS files in floating webview

Is it possible to load javascript and css files in a floating webview from an html file in the preset directory?

<script type="module"  src="presetfile://assets/index-CNsiR_dp.js"></script>
<link rel="stylesheet"  href="presetfile://assets/index-DG9j6O4a.css">

I have all the files in the preset directory, and it seems to find them (if I change the path in the href’s above, it says it can’t find them).

However, I’m not sure it actually loads them. When I use the inspector, it shows the file names, but the contents appear blank, and the script doesn’t seem to do anything.

Am I missing something.

Thanks!

due to some webview limitations this only works if the HTML is also placed in the presets folder and referenced like this:

//edit: note, if you are trying this with BTT Mobile you need to include the preset name in the link like this: presetfile://presetname/filename.html

Thanks.

I was trying to load it via a Show Floating WebView action like this:

Is that possible?

I did just try using through a Floating Menu with a WebView/HTML Item as you suggested. But that gives the following error in the Inspector Console logs

Origin presetfile://index.html is not allowed by Access-Control-Allow-Origin. Status code: 200

Failed to load resource: Origin presetfile://index.html is not allowed by Access-Control-Allow-Origin. Status code: 200 presetfile://assets/index-CNsiR_dp.js

When using the Show Floating WebView action, there’s no error, but doesn’t seem to load the JS and CSS files either.

All of the files are in the preset directory.

Right now I’m just on the Mac

It seems to work fine here, however there seem to be multiple developers facing the issue you described. Behavior seems to differ a lot between macOS versions. I have added a suggested workaround in 6.219 which is uploading now!

1 Like

Thanks. I’ll try the next build.

I’m still macOS 15.7.4.

6.219 did away with the cross-origin error, but it still doesn’t seem to be actually loading the CSS or JS files using either the Floating Menu Web Item or the Show Floating WebView action.

that's strange, could you share some example file?

I just tried with

body { background: red;}

which immediately turned the webview red

You are sure the files are in the correct preset's folder? (needs to be in the folder for the trigger's preset - unless you specify the preset name in the path)

Possibly try without the assets subfolder.

1 Like

I had just finished trying moving it out of the assets folder when I saw you edited post.

It works fine when they’re not in a subfolder, but directly in the preset folder.

Both for the Floating Menu Web Item or the Show Floating WebView action.