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… I wrote a script that throws the sea dragon from the header of my website onto any page and scrolls it in a marquee (for browsers that still support marquee…). You can run it in HTML as such:

<script type="text/javascript"
<a href="#" onclick="window.SeaDragon.add();return false;">
    Add sea dragon!

Let’s instead turn that into a bookmarklet:

  1. Enter the proper function call in the bookmarklet code section: window.SeaDragon.add()
  2. Enter the JS file path as the custom script: https://mrcoles.com/media/js/seadragon.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.

Update (March 2018): I used to use Cornify in my example, but I changed it to use my own script in order to limit external scripts that run on my site!

Interested in working with me at Superset to help shape the future of virtual fitness and to empower people to launch their own businesses online? We’re hiring a mobile engineer. 💪🤓📱 Apply online

Did you find this helpful or fun? paypal.me/mrcoles
comments powered by Disqus

Peter Coles

Peter Coles

is a software engineer living in NYC who is building Superset 💪 and also created GoFullPage 📸
more »

github · soundcloud · @lethys · rss