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!

Did you find this helpful or fun? Please donate!

donate via btc or eth

btc: 18jCzwsZDGQYcs6Kyv92pd4683cnnxm1Dd
eth: 0xC285F21Cb271Cb4B3F70c4C47B2f7B26063AF590
paypal: 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