Ubiquity Tutorial: Turn Bookmarklets Into Commands

Advertisement:

POWERED by FUSION

Bookmarklets are clickable actions (technically a link containing some Javascript) that can be added to the bookmarks bar of your browser. They’re a good way of getting control of the web back into users hands, by allowing them to add whatever new functionality they want to the websites they visit.

The main problem with bookmarklets is that they don’t provide a scalable solution for accessing their functionality. You can only have so many buttons on the toolbar before they become an unusable outbreak of pimples that clutter the browser’s interface.

With a new utility function in Ubiquity, it’s now trivial to turn any bookmarklet into a Ubiquity command. Here’s a short video tutorial on how to do it:

Here’s the source code for the command in the video. The bookmarklet comes from here.

CmdUtils.makeBookmarkletCommand({ name: "Embed Flickr Photo", url: "javascript:(function(){if(window.page_p)window.open('http://www.elsewhere.org/mbedr/?p='+window.page_p.id);%20else%20alert('No%20Flickr%20photo%20found.');})()" })

If you’ve got any favorite bookmarklets or great bookmarklet-based commands, put ‘em in the comments.

About this entry

You’re currently reading “Ubiquity Tutorial: Turn Bookmarklets Into Commands,” an entry on Aza’s Thoughts

Published:: 10.16.08 / 3pm

Category:: Firefox, WEBLOG

Athan 10.17.08 / 2am

Hy Aza, i m for the unable to download ubiquity 0.1.2 …
on the wiki …
Whatever, nice new utility …

Thanks

Athan

Aza Raskin 10.17.08 / 4am

@Athan: That’s because we are releasing Ubiquity 0.1.2 tomorrow. Overly optimistic timing on my part :)

Gabriel 10.17.08 / 6am

Here’s a list of bookmarklet commands sorted by usage: http://queri.ac/commands/bookmarklets?sort=down_by_queries_count_all
You can mouseover the name links to see the urls or just click on them individually

Ian 10.17.08 / 10am

Share on friendfeed

Fredrik 10.18.08 / 4am

This is excellent! I never use bookmarks - except for bookmarklets. This seems like a much better way to use bookmarklets. Can’t wait to try it out.

Athan 10.22.08 / 4am

Hy Aza,

thanks for the release. I never wrote a line of command and create my first command thanks to these new ubiquity feature.

it’s “clip to evernote”. I shared it on gist.

Thanks a lot

Adrien 10.23.08 / 7pm

Great!
Is the opposite possible?
Do you have a clue how to execute ubiquity command from bookmarklet?

Mskadu 11.30.08 / 8am

Interesting. But there’s a snag. For bookmarklets that open Windows, Firefox blocks it every time.

For example, try

CmdUtils.makeBookmarkletCommand({
name: “TwitSnip”,
url:”javascript:void(open(’http://twitter.grader.com/twitsnipsave.php?Title=’+escape(document.title)+’&Text=’+escape(document.selection?document.selection.createRange().text:(window.getSelection?window.getSelection():(document.getSelection?document.getSelection:”)))+’&Referrer=’+escape(document.referrer)+’&URL=’+escape(location.href),’TwitSnip%20from%20Twitter.Grader.com’,’scrollbars=no,width=550,height=350,top=175,left=75,status=yes,resizable=yes’))”
})

How does one work around that?

thegeniusfiles 1.2.09 / 12pm

Wow, thanks for adding this capability! I have particularly wanted to add the Evernote bookmarklet; now I have it. I do think, however, that you could take it one step further and make this feature really user-friendly. Make it so you can just drag’n'drop the bookmarklet into the Ubiquity command box. Wouldn’t that be a lot nicer?

oops, I futzed my link. this one should work.

Aza Raskin 1.2.09 / 1pm

@Mskadu Hmm. That is indeed a problem. Can you submit a bug report on that. Thanks!

@Athan, thegeniusfiles: That’s spectacular! Enabling everyone to be able to make their browser do what they want is what Ubiquity is all about.

@Adrien: It isn’t currently possible to call a Ubiquity command from a bookmarklet. That’s because bookmarklets run in content space, and Ubiquity requires full chrome privileges.

boardraider 1.16.09 / 6am

I stumbled over a small problem using your code alongside the NoScript extension.
NoScript allows using Bookmarklets even on untrusted sites (JavaScript is disabled there). The provided Ubiquity code breaks this.

As a workaround I personally use this code:
http://code.google.com/p/boardraider-ubiquity-commands/wiki/BookmarkletsToCommands

Endolith 1.19.09 / 1am

Shouldn’t you be writing an Ubiquity command to automatically create an Ubiquity command from a selected bookmarklet? :)

Aza Raskin 1.19.09 / 11pm

@Endolith: You are absolutely right. In fact, Ubiquity can just automatically scan your bookmarks, looking for a bookmarklet and add them as a Ubiquity command.

Endolith 1.20.09 / 8am

I was imagining a command that would automatically read a bookmarklet on the web (like the Mbedr link you clicked on) and convert it into a command, instead of making you type it manually.

But yes, indexing all the user’s bookmarklets and Quick Searches and Quick Search bookmarklets that have keywords and converting them into commands would also be good.

http://getsatisfaction.com/mozilla/topics/using_bookmarks_with_keywords_in_ubiquity

http://www.endolith.com/wordpress/2007/02/10/quick-search-bookmarklets/

Ted Curran 3.15.09 / 12pm

I don’t know why but following your tutorial doesn’t work for me. My bookmarklet commands do not become ubiquity commands. What am I doing wrong?

Ivan 5.2.09 / 5am

Hello, I’m trying to transform imageshack.us bookmarklet (http://reg.imageshack.us/content.php?page=transloader) to Ubiquity command, but it doesn’t work. Can you please check this out? Thanks.

yudi 7.25.09 / 12am

Hi Aza,

First of all thank you.

I just want to bring to your notice that when I try to add the following two bookmarklets something goes wrong.

CmdUtils.makeBookmarkletCommand({
name: “print whatyoulike”,
url: “javascript:(function(){if(window['ppw']&&ppw['bookmarklet']){ppw.bookmarklet.toggle();}else{window._pwyl_home=”http://www.printwhatyoulike.com/”;_pwyl_bmkl=document.createElement(’script’);_pwyl_bmkl.setAttribute(’type’,'text/javascript’);_pwyl_bmkl.setAttribute(’src’,_pwyl_home+’static/compressed/pwyl_bookmarklet_10.js’);_pwyl_bmkl.setAttribute(’pwyl’,'true’);document.getElementsByTagName(’head’)[0].appendChild(_pwyl_bmkl);}})();”
})

CmdUtils.makeBookmarkletCommand({
name: “printerfriendly”,
url: “javascript:(function(){function%20linkIsSafe(h){return(!/^mailto:/.exec(h)&&!/^javascript:/.exec(h));}%20var%20i,x,h;%20for(i=0;x=document.getElementsByTagName(’a')[i];i++)%20{%20h=x.innerHTML.toLowerCase();%20if(h.indexOf(’print’)>-1%20&&%20h.indexOf(’edition’)==-1%20&&%20h.indexOf(’subscri’)==-1%20&&%20h.indexOf(’reprint’)==-1%20&&%20h.indexOf(’slogan’)==-1%20&&%20linkIsSafe(x.href))%20{%20x.focus();location=x.href;return;%20}}%20alert(”Can’t%20find%20link%20to%20printer%20friendly%20version.”);})()”
})

I successfully added five bookmarklets but not these two. They both deal with print function.

Appreciate your work.

Yudi

JS 12.29.09 / 12am

Many thanks. Will turn my pornzilla bookmarklets into Ubiquity commands now. But then, you did too. You just didn’t tell us about it. ;) Flickr… pfft! :)

Ubiquity Tutorial: Turn Bookmarklets Into Commands

About this entry

19 Comments

Have your say

Previous

About me...

Projects