Problem with displaying local HTML files in the floating menu WebView

Bugs or Unexpected Behavior
1

Describe the bug
There are two strange problems with the displaying web view in the floating menu. When I try to set the location of the HTML file, which is inside the preset folder, using the presetfile:// path, the page doesn't seem to load at all. However, when I use the path from the localfile://, instead of displaying the website, the HTML file is shown as plain text.
Interestingly, everything displays correctly when I call the old type of Floating Web View from the Actions level, but only when I use Web URL or path to local HTML file to show in floating Web View setting with BTT_PRESET_PATH/settings.html in input.

Screenshots
Using presetfile://:

Using "presetfile://"
Using "presetfile://"960×976 8.73 KB

Using localfile://

Using "localfile://"
Using "localfile://"960×976 162 KB

Device information:

  • Type of Mac: MacBook Pro M2 Pro
  • macOS version: 15.5 (24F74)
  • BetterTouchTool version: 5.497
2

Did you enter the localfile:// like this?

image
image2808×1796 344 KB

It's important the file extension is .html, otherwise it might not send the correct mime type and display the source. That seems to work fine here.

However presetfile also seems to work fine here:

Either like this:
presetfile://presetname/filename.html

or like this:
presetfile://filename.html (in this case the preset name is automatically inferred)

image
image2808×1796 341 KB

3

Exactly that is what I did, and only the file content appears as text, just like in the second screenshot.

Here, I did exactly as you wrote. I tested both forms, and unfortunately, it still doesn't work.

What is even more interesting is that I have the impression the problem lies with the HTML file itself. If you allow me, I will send you this in a private message. Why? Because when I tried with a different HTML file, there was absolutely no problem and everything worked as it should. When I paste the content of the file that doesn’t work directly into the HTML or URL field, it displays site correctly. However, some variables from BetterTouchTool do not load.

4

weird, maybe some file encoding issue, could you check what this terminal command outputs?

file -I  /path/to/file.html

Does the file look ok when you open it with e.g. nano?

nano /path/to/file.html
5

/Users/michalstankiewicz/Library/Application Support/BetterTouchTool/PresetBundles/06933087-AE79-4487-B805-91C53B04430ETest/settings.html: text/html; charset=utf-8

Looks like normal HTML code :slight_smile:

obraz
obraz1394×1186 195 KB

6

looks good :man_shrugging:

your url is set to presetfile://settings.html, correct?

7

Yes, it is.

8

does a simple html like this also render as source for you?

hello.html (68 Bytes)

9

The problem was solved. It turns out that the floating menu was in the correct present, but the WebView in the floating menu was in a default one. I didn’t notice this because they were the same color.

Thank you very much for your help with this issue, but another problem has arisen in the process. The same file, which works perfectly using the old Floating Web View, no longer accepts BetterTouchTool scripts here. I see the following error appearing in the console:

[Error] Origin presetfile://settings.html is not allowed by Access-Control-Allow-Origin. Status code: 200
[Error] Failed to load resource: Origin presetfile://settings.html is not allowed by Access-Control-Allow-Origin. Status code: 200 (get_string_variable, line 0)
[Error] Fetch API cannot load bttweb://get_string_variable/?variable_name=reminder due to access control checks.

What can be done about this?

10

that's weird, as it is using the exact same code. However maybe Apple changed the CORS requirements in the past?

In general I would not recommend to use bttweb:// for things like this, it is faster to directly use java script for this. For example

async function someFunction() {
let result = await get_string_variable({variable_name: "reminder" });
return result;

}

This will also not run into CORS issues

You did not enable this checkbox, correct? (because that disable basically all extra features the BTT webview offers)

image
image2808×1796 360 KB

11

I tried this solution, but the console returns the following error:

[Error] Unhandled Promise Rejection: ReferenceError: Can't find variable: get_string_variable
	(anonymous function) (settings.html:199)
[Log] BTT Bridge Ready (settings.html, line 1)

I made sure, and I have this checkbox disabled.

Edit: Besides that, BTTDraggable class is also not working.

12

ah your script is called before the webview is initialized. There are two ways to solve his:

1.) only call your script function after a small delay
2.) or add this function to your html and only call further scripts after that has been triggered:


/* This is called after the webview content has loaded*/
function BTTInitialize() {

}

BTTDraggable not working is also pretty weird, as it's also the same webview (and code) as in the old show webview action (I just confirmed that it works ok here). I wonder what might be going on.

13

The problem has been solved. Regarding the script loading, I did have to add a slight delay for it to work because simply adding this function before the rest of the script didn’t work. As for BTTDraggable, I don’t know what I did, but suddenly, it started working.

Thank you very much for your help and patience.

1 Like