I'm Aza Raskin @aza. I make shiny things. I simplify.

I'm VP at Jawbone, focusing on health.

 

Ubiquity Tutorial: Turn Bookmarklets Into Commands

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.

RT @aza Ubiquity Tutorial: Turn Bookmarklets Into Commands | Follow @aza on Twitter | All blog posts

View all 37 comments



Athan

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

Thanks

Athan


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



Gabriel

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

Share on friendfeed


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

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

Athan



Adrien

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


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?


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

@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

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


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



Aza Raskin

@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.


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/


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

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

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

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! :)


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.


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.



Sex

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.


Given the impact of the downturn mens belts in the labor market, GHD, has undergone many workers cheap gucci belts have no other choice, fixed-term cheap louis vuitton belts for men employment or agency. Therefore, some could change from low labor costs cheap desiger belts all on a regular basis. In other words, if they could gucci belts on sale move louis vuitton belts cheap from poverty to escape C temporarily. The charity says that government policy and legislation, MBT, on the basis of the phenomenon and requires change, including improved rights and conditions for employees to wear.


Thanx admins. good post


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:


FYI: Ubiquity is not working on the most recent versions of Trunk aka Minefield aka Firefox 3.1b2pre. There have been many patches landing lately. One or more of them has likely borked things.


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


thnks
gooooood



Corey

Thanks for the tip and tutorial, I just used it to create a command for Instapaper Read Later and it works great!


China wholesale beads store, free shipping, and very good post really


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


thnks
goooooooooooood
min:)ااا


I’m not sure the place you are getting your information, however good topic. I must spend a while studying more or figuring out more. Thanks for excellent information I used to be on the ugg lookout for this information for my mission.


I like the valuable information you provide in your articles. I抣l bookmark your blog and check again here regularly. I am quite certain I抣l learn plenty of new stuff right here! Best of luck for the next!


Leave a Comment