Dodgeball Cannon » JavaScript

URI-Escaping JavaScript Bookmarklets in Chrome

John Tantalo — Mon, 03 Oct 2011 21:00:24 +0000

John Gruber published a helpful JavaScript Bookmarklet Builder which I used to generate my IPA TTS bookmarklet.

A few users reported that Chrome choked on the bookmarklet. I found that the bookmarklet builder does not produce the output that Chrome expects. I was using Chrome 15.0.874.54 beta.

For example, take this simple script.

(function () {
  // what is 1+1?
  alert(["1+1=",(1+1)].join(''));
})()

Gruber’s script produces this bookmarklet: Example 1

javascript:(function%20()%20{alert([%221+1=%22,(1+1)].join(%27%27));})()

If you drag this example to your bookmark bar in Chrome, it will produce this error when invoked.

Uncaught SyntaxError: Unexpected token %

What happened? If you edit the bookmark, you will see that Chrome double-escaped the string,

javascript:(function%2520()%2520%7Balert(%5B%25221+1=%2522,(1+1)%5D.join(%2527%2527));%7D)()

I believe this happened because the string contained some non-escaped characters such as parentheses.

Gruber points out in a footnote that his script intentionally leaves some characters unescaped for the purpose of readability.

It’s unclear to me what characters must be escaped in a bookmarklet URL. Some sources suggest that other punctuation characters, such as brackets and semicolons, ought to be escaped, too, but I can see no practical reason to do so. If you want to be really conservative and escape just about everything, change this line:

uri_escape_utf8($bookmarklet, qq('" \x00-\x1f\x7f-\xff));

to:

uri_escape_utf8($bookmarklet);

Personally, I prefer to keep the bookmarklet URL itself as readable as possible.

With this change, we get this bookmarklet: Example 2

javascript:%28function%20%28%29%20%7Balert%28%5B%221%2B1%3D%22%2C%281%2B1%29%5D.join%28%27%27%29%29%3B%7D%29%28%29

It may not be as readable as “Example 1″, but it works.

Find my modifications to Gruber’s JavaScript Bookmarklet Builder on GitHub

Javascript Shebangs

John Tantalo — Mon, 20 Dec 2010 20:37:04 +0000

Ringo, Narwhal, Node, and JavaScriptCore support executing scripts with a shebang.

Here are some quick examples to get you started.

Ringo

    #!/usr/bin/env ringo
    print("ringo");

Narwhal

    #!/usr/bin/env narwhal
    print("narwhal");

Node

    #!/usr/bin/env node
    require("sys").print("node\n");

JavaScriptCore

    #!/usr/bin/env jsc
    print("jsc");

JavaScriptCore nightly added support for shebangs on 6 December 2010.

Since Node and JavaScriptCore are binaries, you can use the full path instead of env.

IE6 submit-click on text input submit

John Tantalo — Fri, 26 Sep 2008 23:15:44 +0000

Found this fun bug in IE6 today. If you have a text input and submit input unassociated with a form, then submitting the text input (by hitting return or enter when focused) will cause a click event on the submit input.

The solution is simple and intuitive: eliminate unassociated submit inputs and submit buttons.

Demo (IE only)

Custom Wikipedia CSS & Javascript for iPhone

John Tantalo — Sat, 02 Aug 2008 23:09:45 +0000

This afternoon I made a custom stylesheet and script to format Wikipedia nicely for me when I am logged on from my iPhone. If you have a Wikipedia account, you can easily use them by adding them to your own monobook.css and monobook.js. Screenshots below.

Dangers of anonymous function closures

John Tantalo — Mon, 07 Apr 2008 19:43:57 +0000

John Resig’s jQuery uses a standard technique of anonymous function closures to namespace its internal functionality.

(function(){
  // jQuery stuff goes here...
})();

This is all well and good until you want to inline this code under some of your application code, as I did while working on Eventful’s MySpace application. Consider this example, written in standard Javascript style.

var foo = function(bar) {
  console.log("foo");
  return bar;
}

(function(){
  console.log("bar")
})();

What do you expect this code to print? If you say “bar”, you’re wrong. It prints “foo bar” because in this context the anonymous function closure becomes a call to the function that prints “foo” and returns the function that prints “bar”, which is then called.

Most of us probably wouldn’t notice what just happened because we are so used to Javascript interpreters automatically inserting semicolons after function definitions.

The danger is assuming, as John Resig and hundreds others have, that your anonymous function closure is the first token in a new line. In my case, it wasn’t. The solution? Either start meticulously sprinkling semicolons in your application code, or just add a single semicolon before your parenthetical block, guaranteeing it’s the first token in the line.

;(function(){
  // jQuery stuff goes here...
})();