Javascript Bookmark Scripts

I often use scripts that inject javascript and modify current page im looking at, mostly for inspecting/debug reasons, for example the WhatFont, that reveals what fonts the page is using. These scripts can be triggered from a browser bookmark, so that they run with just a click(very convenient).


Here’s an example. This script finds programming code placed on a web page and makes it pretty, using the google pretiffy syntax highlight javascript lib.

// A. Add as browser bookmark:
// javascript:(function(){var d=document,s=d.createElement('scr'+'ipt'),b=d.body,l=d.location;s.setAttribute('src','');b.appendChild(s)})();

// B. Loads javascript
// note that callback function needs be before calling loadJS(or inline)
// loadJS("", function() { $('my_element').hide(); });
var loadJS = function (url, callback) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.src = url;

  // Attach handlers for all browsers
  var done = false;
  script.onload = script.onreadystatechange = function() {
    if( !done && ( !this.readyState             || 
                    this.readyState == "loaded" || 
                    this.readyState == "complete")) {
      done = true;

      // Continue your code

      // Handle memory leak in IE
      script.onload = script.onreadystatechange = null;
      head.removeChild( script );


// C. main function to run after js files are loaded
var run = function () {
  // include pretiffy.css
  $('head').append('<link rel="stylesheet" href="" type="text/css" />');
  // find all elements with pre (typically where code is)
  // make pretty !!

// D. jquery and take it from there
loadJS('', function () {
  //when finished loading jquery load prettify.js, then run
  loadJS('', run);

How it works:

  1. The browser bookmark code(in A.) loads the pretty.js a (github)gist hosted script.
  2. The pretty.js script itselfs loads external jquery.js and prettify.js libs(in D. by using B.)
  3. When external libs are fully loaded it runs a bit of code that for every pre html tag(tipically where code exists) makes it pretty(syntax highlighted). (in C.)

Pretty.js is hosted here:


I have also put toguether a javascript growl type alerts as a gist, to be used in bookmarks like these: see here

I imagine this is a very common pattern for this type of script, so feel free to use, re-use, modify.

Kudos for the github:gist service! (it even includes versioning !!)


In Page Debug tool - August 2012

A visual debug tool to inspect custom tracking code placed in the different html elements of a web page, to ease the debugging of web analytics tracking code.

The general solution of injecting javascript into a page from a bookmark, is very usefull for many applications, especially if when combined with javascript online hosting, i explain most of the solution i used in javascript bookmarks.


comments powered by Disqus