Bookmarklets

Bookmarklets are scripts that can be added to and ran from your Bookmark (Favorite) to enrich the web browsing environment.

Contents

  1. Examples of Bookmarklets
  2. Bookmarklet Editing Environment (in JScript)
  3. Links

Examples of Bookmarklets

These are examples of Bookmarklets that I wrote. They work on Internet Explorer.

Seeing is Wheeling src
This assists you to read the document.
See Seeing is Wheeling: Reading Assistance by Moving Hilight Using MouseWheel for detail.
javascript:with(document){
  if(onmousewheel){void(onmousewheel=null)}
  else{
    void(onmousewheel=function(k,o){
      k=event.wheelDelta/-120;
      o=selection.createRange();
      if(o.text){
        o.moveStart('word',k);
        o.moveEnd('word',k);
        o.select();
        event.returnValue=false;
      }
      else{event.returnValue=true}});
    void(ondblclick=function(){onmousewheel=null});
  }
}
Drag for iframe 2004/6/28 src
This enables you to create an internal frame (iframe) by dragging from a link.
To close the iframe, click the link which you dragged from.
javascript:(function(i){with(document){
  for(i_in_links){
    void(links[i].ondragstart = function(f,s,a,b,X,Y){
      f = createElement('iframe');
      f.src = this.href;
      body.appendChild(f);
      s = f.style;
      s.position = 'absolute';
      with(event){
        a = clientX;
        b = clientY + body.scrollTop;
        this.ondrag = function(){
          X = clientX;
          Y = clientY + body.scrollTop;
          s.pixelLeft = a < X ? a : X;
          s.pixelWidth = a < X ? X - a : a - X;
          s.pixelTop = b < Y ? b : Y;
          s.pixelHeight = b < Y ? Y - b : b - Y
        };
      }
      this.onclick = function(){
        body.removeChild(f);
        this.onclick = null;
        return_false;
      }
    })
  }
}})()
Show ID 2004/6/11 src
This shows the id of hn|div|dt elements in the document.
javascript:(function(n,i,e){
  if(n.id && n.tagName.match(/h[1-6]|div|dt/i)){
    e = document.createElement('a');
    e.href = '#' + n.id;
    e.appendChild(document.createTextNode(' '));
    n.insertAdjacentElement('afterBegin',e);
  }
  for(i in n.childNodes){
    arguments.callee(n.childNodes[i]);
  }
})(document.body)
Hameln 2004/7/5 src
Elements will follow the mouse. A reversed fairy tale.
javascript:(function(a, X, Y, n){with(document){
  a = new_Array();
  X = new_Array();
  Y = new_Array();
  n = 0;
  onmousemove = function(e, b, s){
    with(event){
      if(n++ % 8 > 0) return;
      e = elementFromPoint(clientX, clientY);
      b = false;
      if(!e.tagName.match(/body|div|table/i) && a.length < 32){
        for(i = 0; i < a.length; i++){
          if(a[i] == e) b = true;
        }
        if(!b) a.push(e);
      }
      X.push(clientX);
      Y.push(clientY);
      if(X.length > a.length){
        X.shift();
        Y.shift();
      }
      for(i = 0; i < a.length; i++){
        s = a[i].style;
        s.position = 'absolute';
        s.pixelLeft = X[i];
        s.pixelTop = Y[i];
      }
    }
  }
}})()
Crossing-based navigation 2004/7/20 src
This enables you to follow links by crossing instead of clicking.
Crossing-based interactions are proposed by Shumin Zhai et al. See "Lawsh of Action for detail.
javascript:(function(i){with(document){
  for(i_in_document.links){
    links[i].onmouseout = function(){
      this.click();
    }
  }
}})()
Place cookie marker 2004/8/4 src
javascript:(function(f,s){
  f = function(n, v){
    document.cookie = n + '=' + escape(v)
      + ';_expires=Fri,_01-Jan-2030_00:00:00_GMT';
  };
  s = document.selection.createRange().text;
  if(s){
    f('bookmarkletmarker' + document.location, s);
  }
  else{
    alert('Nothing_was_selected.');
  }
})()
Cookie marker stores the current selection.
This is excellent with 'Seeing is Wheeling'.
Use this bookmarklet with 'Resume from cookie marker'.
Resume from cookie marker 2004/8/4 src
javascript:(function(f, s, r){
  f = function(n, i, cs, c){
    cs = document.cookie.split("; ");
    for (i=0; i < cs.length; i++){
      c = cs[i].split("=");
      if(n == c[0]) return_unescape(c[1]);
    }
    return_null;
  };
  s = f('bookmarkletmarker' + document.location);
  if(s){
    r = document.selection.createRange();
    r.findText(s);
    r.select();
  }
})()
Use this bookmarklet with 'Place cookie marker'.
Follow quotations 2004/8/10 src
javascript:(function(l, i, n, a, f){with(document){
  f = function(q, o, c, t){
    if(!q.getAttribute) return;
    c = q.getAttribute('cite');
    t = q.getAttribute('title');
    o = createElement('a');
    o.href = c;
    t = '(in_' + (t ? t : c) + ')';
    o.appendChild(createTextNode(t));
    return_ c ? o : null;
  };
  l = body.getElementsByTagName('blockquote');
  for(i_in_l){
    n = l[i];
    a = f(n);
    if(a) n.appendChild(a);
  }
  l = body.getElementsByTagName('q');
  for(i_in_l){
    n = l[i];
    a = f(n);
    if(a) n.parentNode.insertBefore(a, n);
  }
}})()
This shows the cite attribute of quotations as a link.

Bookmarklet Editing Environment (in JScript)

These programs work on Windows with Internet Explorer 5.0 or later.

HTML version
Automatically generates 2 links: one is normal, and the other is framed.
Supports several features to shorten the bookmarklet (cf. IE's specification).
How to use: help and tips.
HTML application version
HTML applications are full-fledged applications written in DHTML.
This version allows the user to save the bookmarklet.
To start the application, double click 'main.hta'.

Other Bookmarklets writers around me

KOBAYASHI Masatomo
He influenced me to write Bookmarklets.
© Takeshi Nishida tnishida @ ui.is.s.u-tokyo.ac.jp