bookmarklet.js

// You create your bookmarklet by instantiating
// a new Bookmarklet function, then pass in the options like so.
// This example checks to see if the var is already defined, and makes
// sure not to overwrite it. This could happen if the user clicks on
// the bookmarklet more than once.

var MyBookmarklet = MyBookmarklet || new Bookmarklet({
  // debug: true, // use debug to bust the cache on your resources
  css: ['/my/style.css'],
  js: [],
  // jqpath: '/my/jquery.js', // defaults to google cdn-hosted jquery
  ready: function(base) { // use base to expose a public method
    base.init = function(){
      // doStuff();
    }    
    base.init();
  }
});


/**
 * jQuery Bookmarklet - version 2.0
 * Author(s): Brett Barros, Paul Irish, Jon Jaques
 * 
 * Original Source: http://latentmotion.com/how-to-create-a-jquery-bookmarklet/
 * Modified Source: https://gist.github.com/2897748
 */
 
function Bookmarklet(options){
  // Avoid confusion when setting
  // public methods.
  var self = this;

  // Merges objects. B overwrites A.
  function extend(a, b){
    var c = {};
    for (var key in a) { c[key] = a[key]; }
    for (var key in b) { c[key] = b[key]; }
    return c;
  }

  function loadCSS(sheets) {
    // Synchronous loop for css files
    $.each(sheets, function(i, sheet){
      $('<link>').attr({
        href: (sheet + cachebuster), 
        rel: 'stylesheet'
      }).appendTo('head');
    });
  }

  function loadJS(scripts){
    // Check if we've processed all 
    // of the JS files (or if there are none).
    if (scripts.length === 0) {
      o.ready(self);
      return;
    }

    // Load the first js file in the array.
    $.getScript(scripts[0] + cachebuster, function(){
        // asyncronous recursion, courtesy Paul Irish.
        loadJS(scripts.slice(1));
    });
  }

  function init(callback) {
    if(!window.jQuery) {
      // Create jQuery script element.
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = o.jqpath;
      document.body.appendChild(script);

      // exit on jQuery load.
      script.onload = function(){ callback(); };
      script.onreadystatechange = function() {
        if (this.readyState == 'complete') callback();
      }
    } else {
      callback();
    }
  }

  var defaults = {
    debug: false
    , css: []
    , js: []
    , jqpath: "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
  }

  // If we don't pass options, use the defaults.
  , o = extend(defaults, options)

  , cachebuster = o.debug ?
    ('?v=' + (new Date()).getTime()) : '';


  // Kick it off.
  init(function(){
    loadCSS(o.css);
    loadJS(o.js);
  });
  
};

link.html

<!-- This requires no customization, but will load a new copy of the bookmarklet every time it is clicked. -->
<a href="javascript:(function(d,t){var timestamp=new Date(); var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src='http://dev.local.com/scripts/mybookmarklet.js?v=' + timestamp.getTime(); s.parentNode.insertBefore(g,s)}(document,'script'));">My Bookmarklet</a>

<!-- This implements a check to see if the bookmarklet has already been called, and if so, it simply re-runs the init function. You'll need to customize MyBookmarklet to the name of your object -->
<a href="javascript:if(!window.MyBookmarklet){(function(d,t){var timestamp=new Date(); var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src='http://dev.local.com/scripts/mybookmarklet.js?v=' + timestamp.getTime(); s.parentNode.insertBefore(g,s)}(document,'script'));}else{MyBookmarklet.init();}">My Bookmarklet</a>