02 April 2012

Bookmarklet Creator with Script Includer

Enter your javascript code here:

Why have a bookmarklet creator?

I think bookmarklets are great! However, it’s a pain to smoosh your JavaScript into one line and properly URI encode everything. It’s even more of a pain if you want to rely on external scripts in your bookmarklet. Fortunately, I have just packaged all of these features into the above tool!

  1. Enter your JavaScript code
  2. Choose if you want to include jQuery* and/or specify an external script
  3. Create your bookmarklet!

*Note: the jQuery include takes advantage of jQuery.noConflict.

Custom Script Example

What’s that? You’d like a silly and trivial example of someone using the custom script option? Well, OK… here’s the code for the official cornify button:

<a href="http://www.cornify.com" onclick="cornify_add();return false;">
    <img src="http://www.cornify.com/assets/cornify.gif"
          width="61" height="16" border="0" alt="Cornify" />
<script type="text/javascript"

Even though they provide a bookmarklet elsewhere on that page, let’s use the above information to write our own:

  1. Enter the proper function call in the bookmarklet code section: cornify_add()
  2. Enter the cornify JS path as the custom script: http://www.cornify.com/js/cornify.js
  3. Create the bookmarklet (no jQuery required)
  4. Profit!!

Lazy? Let me automatically fill that out for you above (seriously, click on that link…)

Want to run this server-side?

If you want to use this for proper coding or development, then try the bookmarklet NPM dependency. It allows you to write a bookmarklet as regular JS with some extra features to auto-include scripts or styles.

comments powered by Disqus

Peter Coles

Peter Coles

is a software engineer who lives in NYC, works at Ringly, and blogs here.
More about Peter »

github · soundcloud · @lethys · rss

It’s time to get big money out of politics. Join the kick-started campaign to put government back in the hands of the people. Pledge mayday.us now