ブックマークレット

2013-09-23

ブックマークレットとは

ブックマークレットとは、 ウェブブラウザのブックマークで起動し、ブラウザの情報を参照したり更新したりするプログラムをいう。 通常は JavaScript で実装される。

通常のブックマークでは、プロパティを見ると URL が次のように記載されている :
https://jsprimer.net/
そしてこのブックマークを選ぶと、その URL にページが遷移する。
これを javascript: から始まる JavaScript のコードで書き換える。さて、このブックマークを選ぶとどうなるかというと、 あら不思議、 ページは遷移せず（するのもあるが）、ページの情報を取得できたり、ページを書き換えたりできる。 以下説明するブックマークレットで、その挙動を説明する。

hello, world の表示

現在のページに関係なく、単にポップアップで hello, world とポップアップする。

javascript:alert("hello, world");

テキスト入力 (id 指定の場合)

現在のページで、入力欄が <input type="text" id="IDENTIFIER"> のように記述されているテキスト入力欄があれば、 このブックマークレットを実行すると入力欄に VALUE が入力される。下のテキスト入力欄は、実際に id="IDENTIFIER" が指定されている。 そのため、下左の枠内の JavaScript スクリプトをブラウザ入力欄にコピーして実行すると、下右のテキスト入力欄には、今まで入っていた文字列が、新たな文字列 VALUE で上書きされる。
javascript:(function (){let s=document.getElementById('IDENTIFIER');s.value='VALUE';})();

紹介したブックマークレットでは、次の形の一見奇妙な関数構文が使われている。


(function () {
// …
})();

この関数は即時実行関数式（Immediately Invoked Function Expression, IIFE）と呼ばれている。 この IIFE を使う利点は、ブックマークレット内で新たな変数が定義されたとしても、ブックマークレットの実行が終わった瞬間に変数が破棄される。 そのため、その後の JavaScript で変数が「汚染」される問題が生じないからである。以降のブックマークレットでも IIFE が多用されている。

テキスト入力 (name 指定の場合)

現在のページで、入力欄が <input type="text" name="NAME"> のように記述されているテキスト入力欄があれば、 このブックマークレットを実行するとname="NAME" が指定されている最初の入力欄に VALUE が入力される。 下のテキスト入力欄は、実際に name="NAME" が指定されている。
javascript:(function (){let s=document.getElementsByName('NAME')[0];s.value='VALUE';}) ();

チェックボックストグル

現在のページにあるチェックボックスすべてについて、トグルが働く。すなわち、チェックされていないチェックボックスはチェックされると同時に、 チェックされているチェックボックスはチェックが外れる。

チェックボックス1 チェックボックス2 チェックボックス3 チェックボックス4

以前は次のようなプログラムを書いていた。


javascript:(function (){
  const inputs=document.getElementsByTagName('input');
  for(let j=0;j<inputs.length;j++){
    let e=inputs[j];
    if(e.type&&e.type==='checkbox')e.checked=!e.checked;
  }
})();

これを次の点に注意して書き直した。

  1. inputs は const として宣言した。
  2. 添字の i を使わずに、for (let e of inputs) という for ... of 構文を用いた。この方が直感的だ。
  3. ?. 演算子を使って見やすくした。

配列もどき

getElementsByTagName()や、querySelectorAll()、Element.childNodes 、 Element.children などで取得した NodeList や HTMLCollection は、 .length で要素数を取得したり、[i]などで要素の取得ができたり、for ... of 構文でループを回すことができる。 しかし、配列ではない。そのため、 map とか filter, reduce, some のような、配列固有のメソッドが使えない。 かりにこのような NodeList や HTMLCollection を「配列もどき」と呼ぶことにする。

配列もどきは NodeList と HTMLCollection がある。このうち、NodeList は forEach() メソッドでループ処理したり、 entries(), values(), keys() などのメソッドを使えるが、HTMLCollection は forEach メソッドも使えない。

このような配列もどきを実際の配列に変換するには、Array.from かスプレッド構文を使えばよい。HTMLCollection で配列に変換した例を後に掲げる。

NodeList となるもの

Node.childNodes のプロパティ

Document の次のインスタンスメソッド

querySelectorAll(), getElementsByName()

HTMLCollection となるもの

Document の次のインターフェース

embeds, forms, images, links, plugins, scripts など

Documents.forms のように使う。

Document の次のインスタンスメソッド

getElementsByTagName(), getElementsByClassName() など

オプションの選択

オプションとは、複数の選択肢から一つを選ぶダイアログの形式である。 通常のインターフェースではラジオボタンを用いる。下記のブックマークレットでは、 名称が selection_1 となっている複数の入力から値が radiobutton_3 となるものをチェックする。 下記のオプションは、名称 selection_j の値 radiobutton_k をとるものが、 オプション j-k を表している。つまり上段の名称の name 属性が selection_1 、下段が selection_2 である。 現在の状態が何であっても、ブックマークレットを起動するとオプション１‐３がチェックされることを確認されたい。

オプション１―１ オプション１―２ オプション１―３

オプション２―１ オプション２―２ オプション２―３

以前のプログラムは次の通り。

javascript:(function (){
  let inputs=document.getElementsByTagName('input');
  for(let j=0;j<inputs.length;j++){
    let e=inputs[j];
    if(e.type&&e.type==='radio'&&e.name==="selection_1")e.checked=(e.value==="radiobutton_3")?true:false;
  }
})();

DOM 構造

該当ページでこのブックマークレットを実行すると、別ウィンドウで該当ページ DOM 構造が見える。

select 要素

select 要素は複数の選択肢から一つを選ぶダイアログの形式である。 これについてはオプションと同じであるが、 インターフェースが「ポップアップメニュー」「ドロップダウンメニュー」「リストメニュー」 などの形をとる。ラジオボタンと異なるのは、選ぶ前では選択肢が一部しか見えていないということだ。 昔習ったインターフェースの知識では、選択肢がすべて見えるようにラジオボタンを使うのが原則である、 ということだった。

さて、selecte 要素のブックマークレットの例である。上から順番に i (i = 1 ... 4) 番目の分野で、 i 番目の項目が選ばれるしかけになっている。

好きな果物：
好きな音楽家：
好きな点心：
好きな言語：

リモートとローカル

以下の項は 2026-08-05 に書き直した。

自分のページをローカル環境を見ているときに、インターネットなどのリモート環境ではどのように見えているか知りたいと思うこともあるだろう。 そのときにブックマークレットで切り替える手段を考えてみたい。

仮に、インターネット上のアドレスが https://hostname/filename.html であるとし、ローカルの環境のファイルパスが file:///C:/Users/username/filename.html であったとする。これらを入れかえれば目的とするブックマークレットが得られる。

上記はローカル環境が Windows であることが前提となっているが、Macintosh や Linux などでも応用ができるだろう。

なお、この逆、すなわちリモート環境の URL からローカル環境の URL に切り替えて確認することは、セキュリティの問題ゆえ困難であることが、ChatGPT からの教授によりわかった。

ボタンの自動クリック

ログイン画面などで、ＩＤとパスワードを入力してログインボタンをクリックすると先に進むことがある。 これをブックマークレットで実現することができる。

上記は変数 document やメソッド getElementById が繰り返されていて、スペリングのあやまりによるバグを起こしやすい。 そこで同じ変数やメソッドを統一して扱えるように短縮したのが次の記述である。この方法は、リンク集のブックマークレット5番に拠った。

注意：下記はサンプルのため送信できない。上記ブックマークレットを実行したり、下記[送信]ボタンをクリックしたりしたときの動作は、 単にこのページの上部に戻るだけである。

ID : PASSWORD :

ボタンクリックのイベントで submit 関数が起動されない場合は、button 要素の可能性がある。 そのときは次のようにする。ただし、ボタンに id 属性として "botton2" が定義されているとする。また、短縮形のみ掲げる。

注意：下記はサンプルのため送信できない。上記ブックマークレットを実行したり、下記[送信]ボタンをクリックしたりしたときの動作は、 単にアラートウィンドウを表示するだけである。

ID : PASSWORD :

ちなみに、input 要素には、ボタン(type='button')のほかに多くつかわれるものとして、テキスト(type='text')、パスワード(type='password')、 チェックボックス(type='checkbox')、ラジオボタン(type='radio') などがある。

ナビゲーションへのリンク

<link rel="reltype" href="url" /> などが head 要素に記述されている場合、 reltype に応じて指定されたリンク先 url に遷移する。下記ブックマークレットは、 reltype が "prev" の場合に指定されたリンク先 l[i].href に遷移する。

ここで、if 文の条件節は、「文字列 "prev" に l[i].rel が大文字小文字の区別なしで一致するならば」ということを意味している。

HTMLCollection の配列への変換

次の書き方も可能である。

const l=Array.from(document.getElementsByTagName("link"));
の行は、 変数 l を配列に変換することを表している。getElementsByTagName メソッドで得られる値の型が HTMLCollection であり、配列ではないため、 強制的に配列にすることによって、配列型のメソッドである find が使えるという長所がある。

下記ボタンをクリックすると、実際にこのページで指定されたページ（サーバサイド JavaScript）に遷移する。

リンク集

リンク集を参照してほしい。