It seems like I've been using this more and more. I forget what first inspired me to try pasting a url with 'javascript:' in it into a bookmark, but the first collection of Bookmarklets I found was
this one. An easy bookmarklet for a beginner is a google search. The first step is to just bookmark the site. Then edit the bookmark and paste in a little bit of Javascript to make it more interactive:
javascript:document.location='http://www.google.com/search?q='+prompt('Google search for...');
(please forgive the 1 letter variables, and lack of proper spacing. it has to fit into a 1 line text input so there isn't really a lot of room)
I thought that was the coolest thing after I realized it worked. Then I thought it would be nice if it could read the existing search value from the querystring (in case i misspelled something, or wanted to change the search slightly). So I threw in some code to grab querystring variables:
javascript: s=location.search.substring(1,location.search.length).split('&');for (i=0;i<s.length;i++){t = s[i].split('='); if (t[0] == 'q'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;} else v='';} q=prompt('Google search for...',v); if (q != null) {window.location='http://google.com/search?q=' + q;} else {void(null);}
What's nice about google, is that they use the same querystring variable across their sites. So the following bookmarklets would all work with each other:
javascript: s=location.search.substring(1,location.search.length).split('&');for (i=0;i<s.length;i++){t = s[i].split('='); if (t[0] == 'q'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;} else v='';} q=prompt('Google News search for...',v); if (q != null) {window.location='http://news.google.com/news?num=100&sa=G&scoring=d&q=' + q;} else {void(null);}
javascript: s=location.search.substring(1,location.search.length).split('&');for (i=0;i<s.length;i++){t = s[i].split('='); if (t[0] == 'q'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;} else v='';} q=prompt('Froogle search for...',v); if (q != null) {window.location='http://froogle.google.com/froogle?btnG=Froogle+Search&q=' + q;} else {void(null);}
To see what I'm talking about, perform a search on the different bookmarklets and you'll see how your search phrase gets passed into each one automatically, even though you are searching on different sites. What's even cooler is when other sites happen to use 'q' as their search variable:
javascript: s=location.search.substring(1,location.search.length).split('&');for (i=0;i<s.length;i++){t = s[i].split('='); if (t[0] == 'q'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;} else v='';} q=prompt('BizRate search for...',v); if (q != null) {window.location='http://www.bizrate.com/marketplace/search/search.xpml?de_id=200&search_box=1&cat_id=1&SEARCH_GO.x=14&SEARCH_GO.y=3&SEARCH_GO=Submit&keyword=' + q + '&q=' + q;} else {void(null);}
javascript: s=location.search.substring(1,location.search.length).split('&');for (i=0;i<s.length;i++){t = s[i].split('='); if (t[0] == 'q'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;} else v='';} q=prompt('Dictionary search for...',v); if (q != null) {window.location='http://dictionary.reference.com/search?q=' + q;} else {void(null);}
Where I've found this most useful lately is searching for houses. It's a real time saver when you have to deal with poorly designed forms. This example searches Nothnagle's site for a particular zip code (the price is hard-coded to 65000-95000 since Nothnagle doesn't offer those prices in their form, and I have other criteria thrown in there as well):
javascript:s=location.search.substring(1,location.search.length).split('&');for (i=0;i<s.length;i++){t = s[i].split('='); if (t[0] == 'PRM_ZipCode'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;} else v='';} q=prompt('Zip',v); if (q != null) {window.location='http://www.nothnagle.com/property/proplist.asp?VAR_SearchType=listmailer&VAR_AllowSaveSearch=0&PRM_ZipCode='+q+'&PRM_Maximum_Price=95000&PRM_Minimum_Baths=1&PRM_Minimum_Beds=3&PRM_Minimum_Price=65000&VAR_PropertyCity=&VAR_PageSize=50';} else {void(null);}
After getting frustrated with the limited information for particular houses on Nothnagle's site, I made one to pass the MLS number (MLS is the unique identifier given to houses that are put up for sale) over to Realtor.com's site:
javascript:s=location.search.substring(1,location.search.length).split('&');for(i=0;i<s.length;i++){t=s[i].split('=');if(t[0]=='PRM_MLSNumber'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;}else v='';}q=prompt('MLS',v);if(q!=null){window.location='http://www.realtor.com/FindHome/Transition.asp?st=&mnprice=0&mxprice=99999999&mnbed=0&mnbath=0&mnsqft=0&exft=0&exft=0&exft=0&exft=0&frm=bymlsid&pgnum=1&mls=xmls&lnksrc=&js=off&fid=so&vtsort=&ss_aywr=&optInCheckbox=&poe=realtor&ct=&zp=&typ=1&typ=3&typ=7&typ=2&typ=6&typ=4&typ=5&lid='+q;}else{void(null);}
This has been a great timesaver for me. The basic format I use is this:
javascript: s=location.search.substring(1,location.search.length).split('&');for (i=0;i<s.length;i++){t = s[i].split('='); if (t[0] == 'q
[this is the querystring parameter to look for]
'){ v=unescape(t[1]).split('+').join(' ');i=s.length++;} else v='';} q=prompt('Google search for...
[this is the question in the prompt]
',v); if (q != null) {window.location='http://google.com/search?q=
[this is the first half of the URL, it MUST end in the querystring variable followed immediately by '=']
' + q + '&
[any other url stuff goes here, it should be preceded by '&']
';} else {void(null);}
It's pretty easy once you get the hang of it. If you want to use it on a form that POSTs (instead of GETs) you can try using the
Web Developer toolbar in your
real browser. It has a nice feature that converts POST to GET. Then you can bookmark the resulting URL. If that doesn't work you could try dynamically writing out a form with all the necessary variables/inputs and a POST action then submitting it all with javascript. I've never tried it, but it could work.
If you don't use a
real browser and you need a javascript debugger, you can try the following bookmarklet I made:
javascript:document.writeln('<html><body><form><textarea style="width:100%;height:400px;">// javascript goes here</textarea><input type="button" value="eval" onclick="javascript:eval(this.form.elements[0].value);" /></form></body></html>');
I started working on a vbscript one, but it isn't as easy since vbscript uses CRLF as a statement terminator. I really haven't had the need for it so I just gave up.
(I used
this JavaScript code highlighter for
this post, anyone know of a better one?)