New features for making extensions in PopClip 2022.12

Here are my 7 favourite new features for extension making in PopClip 2022.12, which I released today. For more details of these and other changes, see the extensions documentation.

1. Iconify icons

Pick from 100,000 openly licensed icons from a range of icon sets, accessed through Iconify.

Let’s say I want to add an icon to my Fish Search extension. If I head to https://icon-sets.iconify.design/ and search for ‘fish’ I find plenty of options:

I’ve picked the icon called ion:fish. To add it to my extension, I prepend iconify: to that and place (plaice?) it in my snippet:

#popclip
name: Fish Search
icon: iconify:ion:fish
url: https://duckduckgo.com/?q=FISH+***

To install this snippet as an extension, I select it:

CleanShot 2022-12-06 at 17.09.44

PopClip installs the extension and pulls the icon from the Iconify website:

You can also use Iconify’s color icons:

#popclip
name: Fish Search
actions:
- icon: iconify:ion:fish
  url: https://duckduckgo.com/?q=FISH+***
- icon: iconify:emojione-v1:tropical-fish
  url: https://duckduckgo.com/?q=TROPICAL+FISH+***

2. Icon display options

You can flip an icon horizontally or vertically, like so:

#popclip
name: Fish Search
actions:
- icon: iconify:ion:fish
  url: https://duckduckgo.com/?q=FISH+***
- icon: iconify:emojione-v1:tropical-fish
  flip horizontal: true
  url: https://duckduckgo.com/?q=TROPICAL+FISH+***

And now our fish both swim the same way:

(Honestly, I’m not sure how useful this one will be, but I thought the fish swimming together thing was cute :slightly_smiling_face:)

3. Shell scripts in snippets

Previously, to put a shell script in a snippet you had to wrap it awkwardly in an AppleScript like this:

#popclip (the old way 🤔)
name: Fish Talk
applescript: do shell script "say -v Daniel \"Fish fish fish {popclip text}\""

Now, you can just do this:

#popclip
name: Fish Talk
shell script: say -v Daniel "Fish fish fish $POPCLIP_TEXT"
interpreter: zsh # note that an interpreter must be specified

4. Flow-style snippets

Now, you can use flow-style YAML to express snippets in a more compact form:

#popclip
{ name: Fish Search, icon: search F, URL: https://duckduckgo.com/?q=FISH+*** }

And if you are more comfortable with JSON (which is valid flow-style YAML), you can use it:

#popclip
{
  "name": "Fish Search",
  "icon": "search F",
  "URL": "https://duckduckgo.com/?q=FISH+***"
}

5. Full JavaScript libraries

Previously, PopClip’s JavaScript engine relied upon the standard libraries shipping with macOS. This meant that not all newer ECMAScript features were available, and support varied unpredictably by macOS version.

Now, PopClip comes with all current stable ECMAScript features, by using polyfills from core-js. Plus the following web standards: URL, URLSearchParams and structuredClone.

6. Annotated scripts as snippets

Let’s say I want to make a more substantial script:

There are a few problems with this:

  • the awkwardness of having to indent the script as a YAML string block;
  • lack of syntax highlighting of the script contents;
  • difficulty running the script independently for testing.

I would previously have recommended constructing a .popclipext package in this situation, with a separate script file and Config file.

But now you can do this:

The roles are now reversed: the file itself is the script, and the information PopClip needs is in a header at the top. Installation is by the usual method:

CleanShot 2022-12-06 at 18.30.14

This method can be used to create shell script extensions (including all languages such as Python, Perl, Ruby etc.) as well as JavaScript and AppleScript extensions.

The maximum amount of selected text you can install as a snippet is now 5000 characters (increased from 1000).

Here’s a quick Python example you can select and install:

# #popclip
# { name: Hello, icon: hi, after: show-result, interpreter: python3 }
import os
print('Hello, ' + os.environ['POPCLIP_TEXT'] + '!')

I’ll follow up with another post with more details about writing extensions this way.

7. .popcliptxt files

Finally, as something that feels like a natural progression of the snippets concept, PopClip will now open text files with a .popcliptxt (“PopClip text”) file extension and treat the contents like a snippet:

CleanShot 2022-12-06 at 18.55.46

In contrast to regular snippets, there is no limit on the length of a .popcliptxt file.


That’s it for now! I hope you enjoy using the new features. Please ask questions, post about the stuff you make, and let me know what you think!

13 Likes

This is amazing, especially (for me) now. 6 and 7!

1 Like

No. 6 I am pleased with. It looks to me now as the simple and obvious way to do it, but it was quite a bit of thinking and refinement to get to that. Looking back at the list, I like how all these features work together as a whole. I feel like I’ve got the “base” of extensions & snippets to a good place so I can concentrate a bit more on other aspects of the app now.

1 Like

Are you allowed to use SF symbols like that?

Iconify includes independently released icon sets from various designers, with open licenses. It doesn’t include Apple’s SF Symbols. The Iconify website shows the license and author credit for each icon. Licenses vary between icon sets, but they are all under a permissive license of some kind. You can include the appropriate attribution in a comment or readme file when publishing an extension.

PopClip can also display SF Symbols but you can’t view them on a website. You need to install Apple’s icon catalog app instead. SF Symbols are licensed under the Xcode and Apple SDKs Agreement, “solely for the purpose of developing Applications for Apple-branded products that run on the system for which the image was provided”. There is a 3rd party catalog website that just shows the symbol names.

In PopClip, you can specify SF Symbols with the symbol: prefix and Iconify icons with the iconify: prefix.

2 Likes

One minor issue with annotated scripts: Icons are not displayed in the list of extensions (menu bar view), but only grey boxes, when iconify icons are used.

@Kolkrabe, I’ve done some work on the Iconify icons. If you get a chance, could you give the latest beta a try and see if it fixes the issue you are having?

The issue persists:
Bildschirmfoto 2023-01-26 at 23.08.21

The icon are used as e.g. # icon: iconify:twemoji:flag-united-kingdomand work in the popup view.

1 Like

Ah, i see. It’s not anything to do with the annotated syntax, this is just because those icons are solid colour icons which where rendered in monochrome come out as solid rectangles. PopClip currently renders all the icons in the settings menu in grey.

Could “Config.plist” type using iconify for icon? thanks

Yes, in the Config.plist just put it wherever you would before have put the icon file name:

<key>Icon</key>
<string>iconify:foo:bar</string>

Or for old extensions:

<key>Image File</key>
<string>iconify:foo:bar</string>

and/or:

<key>Extension Image File</key>
<string>iconify:foo:bar</string>

Note that Image File and Extension Image File are just alternative old names for the Icon field. PopClip it sees them all as the same.

1 Like

EDIT: never mind, my bad. Popclip talks to iconify.design to pull the icon and I had my LuLu firewall in place blocking it’s network call. Leaving it here just in case someone else faces this issue

@nick Just bought Popclip and loving the app. Thanks for building a great app.

I’m trying to create a snippet with and add an iconify icon but it’s not working. Anything wrong I’m doing

# popclip
name: Search Reddit
icon: iconify:prime:reddit
URL: https://www.google.com/search?q=***+reddit

https://icon-sets.iconify.design/prime/reddit/

for me, it just shows up as “Search Reddit” in the popup. If I do

# popclip
name: Search Reddit
icon: search R
URL: https://www.google.com/search?q=***+reddit

It shows up as “R” in a search icon

1 Like

Hmm, I’m not sure … your snippet works for me and I get a Reddit icon.

Is there perhaps something preventing PopClip on your Mac from accessing the internet (specifically api.iconify.design), to download the icon — perhaps a firewall or something?

EDIT: Noticed your comment re. firewall. Glad it’s sorted. Welcome to forum btw

1 Like

Hello Nick, can you please help me with this Iconify problem I am facing?

This is my code:

# popclip 
name: Markdown To Do
icon: iconify:wpf:todo-list
actions:
  - title: To Do List
    icon: text:[ ]
    javascript: return '[ ] ' + popclip.input.text.replace(/\n/g, '\n[ ] ')
    after: paste-result

After I run this, the iconify icon was added in Popclip (a list with check mark)
image

But, when Popclip appears, it’s blank square:

I can access api.iconify.design from browser so I don’t think it is a firewall issue. Any ideas?

1 Like

The reason your icon is a square is that as well as an icon for the extension, you also have an icon for the action.

CleanShot 2023-09-20 at 07.05.53@2x

So if you want the iconify icon as the action’s icon, just remove the separate icon in the action and it will inherit the extension’s icon.

… Now, you might ask: “why would that icon be a square and not two brackets?”

Well, when I was first designing the icon syntax I did it like this:

[a] letter a in a square, (a) letter a in a circle, {a} a in magnifying glass, plus [[a]] for letter a in a filled square, and so on.

In the end, I decided to go with square a, circle a and so on. But the original code to interpret the two square brackets as a square is still there…

If you actually want a [ ] icon, I’ll need to look up how to do that!!! it’s -[ ]-

1 Like

You read my mind! I do want a [ ] icon!!
And thanks for spotting the double icon. I did not see it!
Brilliant! <3

1 Like

For the [ ] looking icon I suggest monospaced []:


which looks nicer I think (note no space between the brackets in the string)

Indeed, it does look much nicer:
image

Btw, kudos to the fact that I could just install the same snippet over and over and Popclip knew to replace, instead of creating new clip, or, having me to delete the old one. That saves a lot of time when experimenting.

1 Like

Been using PopClip for 2ish weeks now and I must say Snippets is one of the best/user-friendly/simplest implementations of creating user-defined extensions relative to other apps like Keyboard Maestro, BetterTouchTool, Alfred, Raycast. I love those apps, but Snippets is just so easy to create and it’s just text I can type anywhere and install lol.

I also love the regex feature that shows the extensions only when they are needed, reducing the crowding of options in the popup.

3 Likes

Thanks for the feedback, Andy. I appreciate that. It’s been my ‘mission’ to make self-created extensions easier. Snippets have turned out to be a huge advance in that.

Initially, I thought that making it ‘easier’ would involve developing a full-featured extension configurator UI, similar to those found in other apps. This would have required creating a suite of menus and controls for creating and editing extensions. However, I had a spidey-sense that this approach would become limiting. Adding every possible option to the configurator UI would be a painstaking development process and it would need to be carefully designed to avoid overwhelming the users. This UI work would likely take over as the main focus of development. And frankly, I also dislike the tedious coding required to implement such interfaces (which is one of the reasons why PopClip’s on-screen settings menu is simple and rarely changes).

However, one day I had a thought. What if I made the config file format really simple, and made it almost effortless to input it into PopClip? The idea of snippets was born. I initially added it without much fanfare, just to see if it could work. The feedback was immediately positive and more users than before seemed to become engaged with making extensions.

I believe that using snippets feels good precisely because there is no user interface full of buttons and switches. In my opinion, the best interface is no interface! I am asking people to do a little bit of coding, but I’m disguising it so that it doesn’t initially appear as coding :slight_smile:

3 Likes