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 "Laws” 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'.

Links

Other Bookmarklets writers around me

KOBAYASHI Masatomo

He influenced me to write Bookmarklets.