Introduction

I’m con­stant­ly read­ing, col­lect­ing, and eval­u­at­ing web con­tent, so most of the short­cuts I use are relat­ed to inter­act­ing with my brows­er. So I was hap­py that Car­lo Zottmann just released the first betas of his new appli­ca­tion, Brows­er Actions, which expands the capa­bil­i­ties of Apple Short­cuts with actions that allow inter­ac­tions with all inter­net browsers. “Brows­er Actions” can access menus, win­dows, and tabs, enabling both read­ing and con­trol­ling their state. Addi­tion­al­ly, “Brows­er Actions” can also inter­act with the web con­tent. Input fields can be read or filled with data, but­tons can be trig­gered, and much more.

While a frac­tion of these capa­bil­i­ties is already avail­able out of the box in the Short­cut App, it is lim­it­ed to Safari. With “Brows­er Actions”, short­cuts work seam­less­ly with Google Chrome, MS Edge, Vival­di, and Brave with­out any mod­i­fi­ca­tions.

In this arti­cle, I will demon­strate how to use “Brows­er Actions” with two sim­ple exam­ples. How­ev­er, this will only give an idea of the vari­ety of pos­si­bil­i­ties that “Brows­er Actions” offers.

Amazon Price history

The first exam­ple shows how easy it is to work with URLs. Read­ing them from the active brows­er, manip­u­lat­ing them, and cre­at­ing new insights by open­ing the mod­i­fied URLs in the active brows­er again.

The web appli­ca­tion camelcamelcamel.com tracks how the prices of prod­ucts on the Ama­zon web­site have evolved over time. It uses a sim­ple URL query to search the price his­to­ry of a prod­uct. This makes it easy to cre­ate a short­cut that can be invoked direct­ly from an Ama­zon prod­uct page, rather than hav­ing to copy and paste or switch brows­er tabs man­u­al­ly.

To achieve this, the prod­uct page URL will be added to the fol­low­ing URL:

https://camelcamelcamel.com/search?sq=AmazonURL

Using stan­dard Apple Short­cut actions, it’s already pos­si­ble to cre­ate a short­cut with the fol­low­ing steps:

1. Get the URL from the cur­rent brows­er using the “Receive URLs input from Whats On Screen” action.
2. If there is no URL, stop the work­flow with the mes­sage “No URL.”
3. Check if the URL con­tains the word “ama­zon”.
4. If it doesn’t, stop the short­cut and dis­play the mes­sage “No Ama­zon URL.”
5. If it does, con­cate­nate the URL with the Camel­Camel­Camel URL.
6. Open the result­ing URL using the “Open URL” action.

And this is the short­cut:

The dis­ad­van­tage of this short­cut is that it always dis­plays the result in Safari, regard­less of which brows­er it was called from. How­ev­er, I would pre­fer the result to be dis­played in the same brows­er from which I ini­ti­at­ed the short­cut.

“Brows­er Actions” is the solu­tion because it works with most of the browsers on macOS. It helps to stay with­in the active brows­er, as it oper­ates based on the con­cept of the front­most brows­er. Even when mul­ti­ple browsers are open in the back­ground, you can inter­act with the cur­rent­ly active brows­er win­dow and expect that the results will be dis­played in that same brows­er.

With “Brows­er Actions”, the short­cut would look like this:

There is no need to check the option to “Receive What’s On Screen”. I only use the ‘Pin in Menu Bar’ option. It is eas­i­er for me to access short­cuts on the Mac from the menu instead of the Share Sheets.

---

Before con­tin­u­ing, I want to include a brief dis­cus­sion about using object para­me­ters in action calls. Let’s take the action “Get details of the tab active tab of front­most win­dow in front­most brows­er” as an exam­ple. This action cre­ates an inter­nal object from the cur­rent brows­er tab, includ­ing all its para­me­ters and with their cur­rent val­ues. The val­ues can be used in oth­er actions, such as in the “if” part of a con­di­tion­al state­ment.

Because of the fea­tures of the short­cut edi­tor, the con­di­tion is already set up with the result from the action that is used before, in this exam­ple with “Brows­er Tab Object.” If there is anoth­er object set up or none at all, just click in the field, clear it, and select “Insert Vari­able → Get Details of Brows­er Tab.”

After click­ing on “Brows­er,” a pop­up will appear with all the para­me­ters that can be used. Here, we want to check the Page URL, there for “PageURL” has to be select­ed.

It is also pos­si­ble to store an object in a vari­able. In this case, the object will be dupli­cat­ed and saved. This copy vari­able can then be used in the same way as the orig­i­nal object. You can also assign one para­me­ter of an object to a vari­able. But at least, it seems that way. In real­i­ty, the whole object will be copied again.

In one case, it took me hours to dis­cov­er that anoth­er para­me­ter was used when I thought I had assigned a spe­cif­ic para­me­ter. The short­cut end­ed up using a dif­fer­ent one.

I am not a com­put­er sci­en­tist, so I hope I have used the cor­rect ter­mi­nol­o­gy for the most part.

---

Now, back to the short­cut.

In the next step, the short­cut checks whether the “PageURL” return val­ue from the ‘Get Tab Details…’ action con­tains the word ‘ama­zon’. If it does not, the short­cut will dis­play an alert. Oth­er­wise, it builds the link with the query in a text box, which is then used to call Camel­Camel­Camel in the cur­rent brows­er in a new tab.

This is a very basic use case for brows­er actions. It already shows an advan­tage over the stan­dard actions: It works seam­less­ly across browsers. If you call the short­cut when a Chrome brows­er is active, the result will appear in the same brows­er. In the next exam­ple, I will present a more com­plex sce­nario that also uses “Actions for Obsid­i­an”, an appli­ca­tion also devel­oped by Car­lo Zottmann.

Capture a Browser Selection as Snippet in Obsidian

The sec­ond exam­ple shows how a selec­tion in a brows­er win­dow can be cap­tured by “Brows­er Actions” and con­vert­ed to Mark­down. Then this mark­down will be added inside a call­out to an Obsid­i­an note that col­lects these snip­pets along with some meta­da­ta. The snip­pets will then look like this:

First, cre­ate a note to col­lect the snip­pets. Since the “Prepend Note” action from “Actions for Obsid­i­an” will be used, a head­ing is required under which the snip­pets will be insert­ed. Here is an exam­ple. It is pos­si­ble to add more text and head­lines if need­ed.

---
title: "Snippets"
tags: 
  - WebSnippets
date: 2023-10-20
---
## Snippets

--- 
This is a possible extra area, see text

With “Prepend Notes” and the option “begin­nig of sec­tion below the head­line” the snip­pet will be insert­ed below the head­line in order from newest to old­est. It is also pos­si­ble to change the order with the action Append Notes. How­ev­er, with­out an addi­tion­al step the snip­pet would be insert­ed below the line “This is a possible extra area, see text". To avoid this, an addi­tion­al head­er must be placed above the --- in the foot­er. This could be an invis­i­ble head­er like ## %%hidden%% or anoth­er head­line with addi­tion­al text.

---
title: "Snippets"
tags: 
  - WebSnippets
date: 2023-10-20
---
## Snippets


## %%hidden%%`
--- 
This is a possible extra area, see text 

The entire short­cut will look like this:

The short­cut goes through the fol­low­ing steps:

1. The “Details of the tab…” action gets all the details of the active tab of the front­most brows­er, such as the URL of the page, the title, the source, and so on. One of these details is “Cur­rent Selec­tion (Mark­down)” which, unlike the “Cur­rent Selec­tion” para­me­ter, cap­tures all for­mat­ting infor­ma­tion and con­verts it to mark­down.
2. In the next step, the val­ue of the para­me­ter “Cur­rent Selec­tion (Mark­down)” is con­vert­ed into a list where each line becomes an item. This makes it pos­si­ble to add “> ” in front of every line need­ed for the call­out mark­down visu­al­iza­tion.
3. The result of the split action will be assigned to a vari­able, so its pos­si­ble to loop through all the items with the “repeat” action.
4. With each iter­a­tion, the ‘repeat item’ is then pre­fixed with “> “.
5. The result­ing list is con­vert­ed back to nor­mal text.
6. The “date” is need­ed for the use in the text box.
7. In the “Text” box, the snip­pet is then assem­bled from the indi­vid­ual com­po­nents. Two blank lines are added before the head­line of the call­out, to ensure a gap between the snip­pets.
8. At the end, the snip­pet cre­at­ed is insert­ed into the snip­pet note with the help of “Actions for Obsid­i­an”

This allows you to select any part of a web page in most browsers on the Mac and save the selec­tion as a snip­pet to a note in Obsid­i­an. I chose Obsid­i­an because it’s my tool for cap­tur­ing what I find on the web. It may be pos­si­ble to apply this short­cut to oth­er tools as well, as long as there is some sort of inte­gra­tion with Apple Short­cuts.

Conclusion and Outlook

In this post I pre­sent­ed two small solu­tions that I think show the poten­tial of “Brows­er Actions “on the Mac. The first exam­ple takes the URL of an active web page and calls a web appli­ca­tion with that URL. This exam­ple shows that, unlike stan­dard actions, “Brows­er Actions” work with all browsers. The sec­ond exam­ple inte­grates the con­tent of a web page into a work­flow and cre­ates new con­tent in dif­fer­ent tools. But this is not all Brows­er Actions can do. The appli­ca­tion pro­vides many actions that allow automa­tion of brows­er inter­ac­tions and HTML ele­ments, such as input.

In one of my next posts, I want to dis­cuss these pos­si­bil­i­ties and show how to manip­u­late web pages. So stay tune 😉