How to use modifier keys?

PopClip Extensions
1

Hi friends, I just built my first PopClip snippet and trying out different ideas.

What I wanna do is when I click the icon, it should open the specified URL, but if I hold the options key, I should open a different URL. How can I accomplish this?

# popclip
name: Amazon Search
icon: iconify:ri:amazon-fill
URL: https://www.amazon.com/s?k=***

If option key is pressed, open https://www.amazon.com/gp/your-account/order-history?search=***

2 Likes
2

The best way is with a JavaScript snippet. Like this:

// # popclip
// name: Amazon Search
// icon: iconify:ri:amazon-fill
// lang: js
const query = encodeURIComponent(popclip.input.text);
if (popclip.modifiers.option) {
  popclip.openUrl("https://www.amazon.com/gp/your-account/order-history?search=" + query);
} else {
  popclip.openUrl("https://www.amazon.com/s?k=" + query);  
}
2 Likes
3

Thank you!

  • When holding the options key, any way I can change the popup title/icon so I know the action I’m going to take?
  • I suppose popclip.modifers.command would work for the command key? (ref doc would work as well!)
4
  • No, it’s not possible to change the icon or title. That would be a good feature though.
  • That’s right. The docs are here.
2 Likes
5

I’ll just add that I would not recommend using Command as a modifier. This will likely have a global meaning in popclip in future. Likewise, avoid Shift and Control as well. the only modifier to be usable long-term is Option, which I will keep in reserve for extensions to do as they wish with.

The plans for modifiers, BTW…

  • Shift - will be used to specify background tab opening (for URL actions)
  • Command - will be used to perform “action chaining” where a second action can be chained onto the first
  • Control - will be used, along with right click, to enter a submenu. This of course will be a good way to have multiple actions under one icon in future…

That said feel free to use any modifiers you want for now, with the caution that you may have to redo things in future. This isn’t yet “Official” but when it is, I will document it.

2 Likes
6

This was helpful and works as expected. I’m curious about the syntax of creating snippets. Up until now I was using the syntax

# popclip
name: Amazon Search
icon: iconify:ri:amazon-fill
requirements: [text, "!url"]
URL: https://www.amazon.com/s?k=***

but the one you posted also works which has // for the first few lines. Are both of them valid syntaxes, which ones to use when

1 Like
7

yes, both are valid. The one with the // lines is called “Inverted Syntax”, and it’s useful for snippets that contain code. Here’s info about it: https://www.popclip.app/dev/snippets#inverted-syntax