PHP for Easy Bookmarklet Testing and Distribution

Bookmarklet authors have it tough. On top of the usual challenges of cross-browser Javascript testing, we’ve traditionally also had to workaround IE’s character limit and jump through hoops to embed code inside of javascript: links.

Bookmarklet Server (source) eases testing and deployment by allowing you to keep code where it should be—in .js files. A single SCRIPT element dynamically loads the bookmarklet code and creates the javascript: link for you.

Features

  • Works around IE’s restrictive character limit (an external loader bookmarklet is given to IE users)
  • Any valid JS quote characters can be used!
  • invalid/problematic HTML characters/tokens can be used!

Tests

  • Loading… (You must enable Javascript)
  • Loading… (in IE this will load the BM in a SCRIPT element)
  • Loading… (your JS console can now report accurate line numbers!)



Setup

  1. Create a public* directory to hold all your bookmarklets. (*within your
    web root; this will work on private testing servers)
  2. Configure and place the script in
    your new directory.
  3. For each bookmarklet, include an element with a unique id in which the link
    will be embedded and a script element:

    <div id='myBM'></div>
    <script type="text/javascript"src="/bookmarklets/bm.php?action=getScript&file=myCompressedBM.js&name=My%20Bookmarklet&container=myBM"></script>

Bookmarklet creation & testing

  1. Best practice is to start with a template
    that uses a closure
    to
    hide all inner variables and functions. I also have a template
    for affecting all frames
    in a frameset.
  2. While testing the script, append &test=1 to the
    end of the src attribute of the script element described above. This
    forces the script to load as an external script for easier debugging.
  3. Aggressively comment your source!
  4. Test…
  5. When you’re done, create a compressed source version using
    something like Dean
    Edwards’ Packer
    . Don’t lose your uncompressed source!
  6. If you wish to comment your compressed source, use only /* multi-line
    comments */
    at the very top of the file.
  7. Remove &test=1 from the script src attribute to embed
    the full compressed source into the link’s href attribute.

One thought on “PHP for Easy Bookmarklet Testing and Distribution

  1. says:

    ideas:
    * load code only when requested
    * pre-processor to allow @include-ing separate source files (compile to single BM, IE?) and REQUEST vars to set BM vars/control @includes.
    * integrate Packer to optionally compress directly before embedding, optionally preserve header comments
    * move most client-side code to static JS file
    * convenient test area for efficient workflow
    * microformat for BM releases, allow authors to easily capture/integrate open-sourced BM sources
    * standard way to embed author/post URL into BM. Maybe store info on window object, create a BM to read info of the last BM executed.
    * md5/sha1-based tools to verify compressed sources
    * easy conversion to blummlet

Leave a Reply