Linking Directly to Web Page Content with Typinator

Recently, the major browsers introduced the capability to go to a webpage highlighting and scrolling to a particular piece of text. Once you see it in action, it really is neat.

They syntax is <original_url>#:~:text= followed by the URI encoded text you want to highlight, like https://blog.lanzani.nl/2024/who-will-speak-up-for-free-speech/#:~:text=Economist (you can click on it to see for yourself).

Typing the whole thing is, however, cumbersome, so I resorted to Typinator to automate some of it, creating a snippet (bound to ;frag) like this:

1{/JavaScript
2let text = encodeURIComponent("{clip}")
3let safari = Application("Safari");
4safari.documents[0].url() + "#:~:text=" + text
5}

The way I engage with it is simple: on a page, I copy some text, and then, in another application (it doesn’t work in Safari—although with some tweaks it might) I type ;frag and the URL including the #:~text=something appears instead.

The script works as follows:

  1. Line 2 expands the clipboard and URI encodes it (for example, replacing spaces with %20).
  2. Line 3 grabs an object that lets you manipulate the Safari application. This Javascript system built into the system is one of those big details in macOS that sets it apart from the competition, in my opinion.
  3. Line 4 gets the URL of the active tab, and appends first #:~:text= and then the encoded text.

That’s it. Simple and effective.