How to Load Another Webpage in the Custom HTML Prompt?

Excellent, that greatly simplifies my window work as well—thanks!

-rob.

Beautiful, @macdevign_mac! Here's a variant that, if there's selected text in any app, feeds that to Google. I'm often working in InDesign or BBEdit and reluctant to launch a browser just to reference something online. This takes care of that.

It should properly use a local variable for the search string but I haven't been able to figure out how to pass a local to a JS function. As an alternative, I use a global variable that is treated a bit like a local (reusable by anything). And the storage overhead isn't much anyway.

Browser-free Google Search Macro (v10.0.2)

Browser-free Google Search.kmmacros (6.4 KB)

5 Likes

I had the same purpose.
The HTML Prompt is light and launches much faster.
Another advantage of the HTML Prompt is that the window floats on the top. It's useful when we want to refer to something online as we work on other apps.

2 Likes

Hi @mrpasini I like this a lot. Could you give a hint how it could be adapted to feed the selected text into Google Translate rather than Google Search?

I am assuming the initial text before =%CurrentClipboard% in this Action would be the key?

image

This scheme works really well to create stand-alone Web apps, too. I have a few PHP/MySQL apps (spiced with Spry AJAX and JavaScript) that I can now run in their own window from a hot key. No need for Platypus or other wrappers.

I just expanded this version to show a popuplist of them with Google as an option, too, if there's no selection and pass that URL to the HTML Prompt. But you could easily just create a macro for each Web app you have with its own hot key, of course.

1 Like

Sure, the Translate option for Text Tools I has the code. Let me conjure up a quick version...

[pause]

Translating the above text:

Ho appena ampliato questa versione per mostrarne un elenco popup con Google come opzione, se non c'è selezione e passare quell'URL al prompt HTML. Ma potresti facilmente creare una macro per ogni app Web che hai con il suo tasto di scelta rapida, ovviamente.

I get a warning to choose an application that can open about:blank that I didn't resolve but here's a preliminary version that flies well enough:

Browser-free Google Translate Macro (v10.0.2)

Browser-free Google Translate.kmmacros (7.5 KB)

1 Like

Thanks @mrpasini

Yes, I get that too. I wonder why.

This is the Macro I made for myself before, which works well but relies on Safari to open Google Translate. That's why I wondered if the code could be modified to work in your Browser Free version:

Google Translate.kmmacros (34.1 KB)
Google Translate

OK, this takes care of that. It's a little app that handles the request to about:blank. The author explains:

Browsers are supposed to display the URL about:blank as a blank page. Unfortunately, some web browsers or similar apps do not know how to do this and will ask macOS to handle this URL. Apps that do this are misbehaving, but until these apps are fixed, you can use AboutWeb to silence these errors.

3 Likes

My solution works but it lost all KM functions of custom Prompt as window.KeyboardMaestro no longer available.

I wonder if Peter can find a way to add window.KeyboardMaestro into custom prompt when using site url. That will be good idea. I don't think security is the worry because there is other library doing that exactly,

  • JxBrowser (Java)
  • Microsoft WebView2 (.net)
  • Microsoft PlayWright (node.js library)
  • Tampermonkey (Browser extension)
    and many more.

Imagine able to access the power of KM in a site.

By the way, you can also inject custom javascript this way by assigning a name to data-kmwindowid in the body tag. [action:Custom HTML Prompt [Keyboard Maestro Wiki]] and making custom prompt asynchronous

image

Some may suggest using iFrame inside custom prompt but it does not work if you are trying to inject code into iframe due to WKWebview's security check.

@mrpasini,

This https://github.com/szhu/AboutWeb that you provided is a must for those who using site in Custom HTML Prompt window. Even Google Translate site will popup the annoying following message

image

So the solution you provide did suppress that perfectly.

@mrpasini, thanks so much for sharing. I'll be using this one daily! (Another fine example of the amazing versatility of Keyboard Maestro.)

BTW, with KM 8.0.3+ it seems that a local variable should work, but for some reason with this macro it doesn't. (I confirmed on my system: macOS 12.1; KM 10.0.2.) @peternlewis, what are we missing?

You will just have to preserve the window.KeyboardMaestro object if you wish to replace the window object. I am no JavaScript expert, but I presume you can take a reference to the object and it will remain after the window is deleted.

Peter,

I have verified that window.KeyboardMaestro object does exists. I find that in order to inject js code into custom prompt that use site (eg google.com), the injected code should be done in the "Execute Javascript in Custom Prompt" action (orange) where window.KeyboardMaestro exists.

window.KeyboardMaestro only exists in "Custom Floating HTML Prompt" action (purple) before the line window.location.href = url is called, and custom functions defined there are no longer recognized once the location is loaded.

So in other words, it is possible to inject js code for Custom Prompt Window that use site.

For example, I have removed unwanted elements in Google Translate site in Custom Prompt Window and variable passing is done through window.KeyboardMaestro's GetVariable function

image

Thanks.

I'd love to see your version, @macdevign_mac. When I use a local variable for my global kmVar, which I'd prefer, it just doesn't fly:

function KMInit(){window.location.href=window.KeyboardMaestro.GetVariable("localURL");}

Even when I add in:

	<script>
function KMHandleSchemes(){return "http https";}
function KMInit(){var app = Application.currentApplication()
app.includeStandardAdditions = true
var kmInst = app.systemAttribute("KMINSTANCE");
var kmeApp = Application("Keyboard Maestro Engine") 
window.location.href = kmeApp.getvariable("localURL",  {instance: kmInst});
	</script>
1 Like

@mrpasini,

Accessing a KM variable is different in the Custom HTML Prompt action

The following which you used is for Execute Javascript for Automation action, not Custom HTML Prompt action.

action:Execute a JavaScript For Automation [Keyboard Maestro Wiki]

var app = Application.currentApplication()
app.includeStandardAdditions = true
var kmInst = app.systemAttribute("KMINSTANCE");

The custom prompt version is using:

window.KeyboardMaestro.GetVariable( 'KMVariableName' )

action:Custom HTML Prompt [Keyboard Maestro Wiki]

The reason why local_variable failed is because of async Custom HTML Prompt. There is ways to solve this

  • Put a Pause action after Custom HTML Prompt action (2sec)
  • Use document.kmvar.Local_variable
  • Use global variable.

When async is used for Custom HTML prompt, it returns immediately for KM to execute rest of actions, so the macro may finish before the custom prompt get to read the local variable (hence return empty).

3 Likes

Ah ha! Thanks for the async explanation. That was the issue, resolved with document.kmvar.localURL in this version:

Browser-Free Google Translate.kmmacros (8.0 KB)

1 Like

This macro is great—I've turned it into a generic subroutine I call from a number of spots. What I'd like to do is add a floating button stuck to the top right corner of the window that would open the URL in the browser.

I am a Javascript neophyte, so everything I use comes from elsewhere :). I found some code for a floating button:

var button = document.createElement("Button");
button.innerHTML = "My Button";
button.style = "top:10;right:10;position:absolute;z-index: 9999"
document.body.appendChild(button);

Here's how that bit of the macro looks:

The custom HTML prompt is loading asynchronously, and I get no errors at any point…but nothing happens.

All pointers appreciated;
-rob.

Rob,
For this to work, the data—kmwindowid must be defined in body tag of custom HTML Prompt statically, not dynamically. So your custom prompt need to include the body tag with data—kmwindowid and cannot be created with document.write.

Anyway do not use document.write as it is destroying the KM reference to the prompt so you can no longer use Execute Javascript in Custom Prompt action

Use the following instead:

I was using the code above from @macdevign_mac, which uses document.write to put a live webpage into the custom HTML prompt. I'm far from an expert (hence, the help request), but I don't see how I could do that with your template?

-rob.

Rob,
how do you define web page ? Are you defining it as the actual Website (eg http://www.infoworld.com) or some thing generated by KM variable as shown by your example ?