Last week, I was looking at the way I use Safari and save links to other apps and services, and I realized that I wanted a unified action menu to group some of my most used bookmarklets together. While this can be done by creating a bookmark folder in Safari, folders require too many taps on the iPhone and I’d like to have better visual differentiation between actions with unique icons for each one of them. That seemed like a good opportunity to test the capabilities of Launch Center Pro (now on the iPad as well) when it comes to lists and JavaScript, so I got to work.
A fair warning: Though my solution works, the code isn’t pretty. Until Apple improves the way apps can share information with each other, we’re stuck with hacks like URL schemes, JavaScript, and manual encoding. If you want to customize what I came up with, you’ll have to manually edit URL schemes and test everything on your own. If you’re not concerned about a bookmarklet’s prettiness, go ahead – I’m fairly satisfied with the results.
The output is pictured above: everytime I want to share a link from Safari to another app, I tap a “Share” button in Safari and I’m presented with a list of actions from Launch Center Pro. The list conveniently comes up in the middle of the screen with large buttons I can tap to send a link off to Tweetbot, Fantastical, Drafts, and other apps. The action menu works on both the iPhone and iPad and, more importantly, it doesn’t require you to install any additional Launch Center Pro action because it’s a “headless” bookmarklet that isn’t actually based on any Launch Center Pro action.
The single-line code you can save as a bookmarklet in Safari is available on GitHub; however, you’ll want to modify the bookmarklet for your needs, so here’s how it looked in Drafts when I was editing it:
A a multi-line code breakdown with comments is also available as a GitHub Gist to give you a better idea of what’s going on in the bookmarklet.
The solution that I employ to launch a list not based on an existing action is to “trick” Launch Center Pro into linking to itself. Using the launchpro://?url= URL scheme twice, you can tell Launch Center Pro to open a Launch Center Pro URL to display a list. I don’t know why I couldn’t simply launch the app and tell it to display a list without nesting two levels of URL schemes, but that’s how it is. You’re telling Launch Center Pro to open itself.
Actions are the core part of the bookmarklet, and they’re formatted according to Launch Center Pro’s list syntax. Each section is separated by a pipe (vertical bar) and URL schemes are used to send the URL you’re viewing in Safari to other apps. As you can see, there’s a lot of manual encoding due to the multiple levels of URL schemes the bookmarklet needs to use.
I made two simple tweaks to the standard list presentation that I’m quite fond of. First, the URL you’re sharing is displayed in the title of the list: it’s not a great solution because Launch Center Pro cuts off long URLs, but it’s better than nothing. Second, I made actions a little more visual by using emojis next to their names. Again, not perfect (it’d be great if Launch Center Pro could pull in small app icons for URL schemes in lists) but color helps.
I made a video that demonstrates how the action menu works.
There are several ways in which this action menu could be improved. Having to manually create and edit the bookmarklet isn’t a good user experience, and perhaps someone could come up with a better way to assemble the necessary URL schemes. I didn’t implement support for x-callback-url in my actions (you can see that I return to Safari manually) because that would have required additional levels of encoding, but I suppose it’s doable. I had to remove support for sharing webpage titles, because sending those to Launch Center Pro created the possibility that pages with a pipe in their title could mess with the lists’ syntax.
The bookmarklet works, and I’m using it a lot to quickly share URLs, but it can be break easily if you don’t pay attention when modifying it. Because it’s based on JavaScript, the same code can also be used to trigger the same menu from apps like Mr. Reader and Editorial.
If you have suggestions or other feedback, feel free to get in touch.
