02 April 2012

Bookmarklet Creator with Script Includer

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"
 src="https://mrcoles.com/media/js/seadragon.js"></script>
<a href="#" onclick="window.SeaDragon.add();return false;">
 Add sea dragon!
</a>

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!

Peter Coles

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