Greasemonkeyスクリプトでページ内に画像を表示する方法には、僕が知っている限りですが、以下の2通りの方法があります。
- img要素を動的に生成し、img.src属性に任意のサーバ上にある画像ファイルへのパスを指定する
- img要素を動的に生成し、img.src属性にbase64エンコードした画像データを指定する
img.srcにサーバ上の画像ファイルを指定する
1の方法を実際にスクリプトにすると、以下のようになります。例として、任意のページの最後にGoogleへのリンク(Googleのロゴ画像)を追加するGreasemonkeyスクリプトを書いてみます。
// ==UserScript== // @name TestScript // @namespace TestScript // @include * // ==/UserScript== var img = document.createElement("img"); img.src = "http://www.google.com/intl/en_com/images/logo_plain.png"; var a = document.createElement("a"); a.href = "http://www.google.com/webhp?hl=ja"; a.appendChild(img); document.body.appendChild(a);
この方法は直感的でわかりやすいですが、毎回サーバ上の画像ファイルを読み込むため、ネットワークの状態によっては、スクリプトの処理速度に影響がでる可能性があります。*1また、サーバ上で画像ファイルの格納場所やファイル名が変更になった場合には、スクリプトそのものを変更する必要があります。
img.srcにBase64でエンコードした画像データを指定する
一方、2の方法はimg要素を生成するところまでは同じですが、サーバ上の画像ファイルを指定するのではなく、画像データを指定します。画像データとは、画像ファイルをBase64と呼ばれるエンコード方式でエンコードした結果のことを指します。
Base64とは
Base64は、データを64種類の印字可能な英数字のみを用いて、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式である。MIMEによって規定されていて、7ビットのデータしか扱うことの出来ない電子メールにて広く利用されている。
http://ja.wikipedia.org/wiki/Base64
実際にスクリプトにすると、以下のようになります。
// ==UserScript== // @name TestScript // @namespace TestScript // @include * // ==/UserScript== var data = 'data:image/png;base64,'+ 'iVBORw0KGgoAAAANSUhEUgAAARQAAABuCAMAAADRYBxYAAACzVBMVEX////39/fOy87e297v6+/W'+ '09b/+//n5+cQPJS1srX38/fGw8bn4+fGvr0YTcb38+/v7+/Gx8a9vr3Oz86cnpze397W19acmpze'+ '3+e1trU5cd69tr2tpq2lpqWtrq0IPKW9ur0YRa0hWdbGGABKfecQNITWJAhzou9jlu8IJGOloqUp'+ 'UbXnSTH/dWO9lgBaiu8xZdbGngCtqq2MEACEqve1JBApSZSlggClvu+UkoxjeaS9z++EhpTGkoyl'+ 'pq2Urt6MkpT3+//LztaEmtbe29bZ18t7hq2lhntKYZTOrqXv8vecZVqEkrV7TUKEfXPeMBjWrgCM'+ 'IBBjUQAQRbU7WZPnPCFrDAD3aVLGx84YUc4YSbWtqqW1sq33loS9LBjO1dbG1/9zeYxrLCH/zwDO'+ 'PCkpQWtaaXytx/dr03OUeQC1jgCEaQClqq3a5f/vWULvugCthgBJVXNraWuUQTF7ZVJSba3WtrX3'+ 'hnPn6+/Ox8be4+c5YbX3uq2UnrX3ppzW291Zgda1RTH39//GdWulttb/9//n5++1usbn5N6tloxz'+ 'js61omO1w961poyqkjHAv7/ey8a5uLnOw6WtFAD/6+e9nhDn297W2+c5ukK1WUpCw0r5+fkYoiF7'+ '24S1tr331ylj02P/y8YAZQD/7wj3187/94QxtjnO0+f331rv5+eEdTnJycney4xay1rvxymysbKi'+ 'oKD9/f2chkLWZVr09PT/7zHh4eH/87XeukLOrinn6/+1qqX/9/f/8+/q6uqc06Wop6f359b/+97e'+ '19b39++tjhDx8fHv6+elrr3W196My4zCwsOMrozFxMF7lnsIUQjv45StsrVCjkL//++9470AfQj/'+ '//fv9+8QlhgpXTHe795aqmMhqinO685adVrS0tIYLmGSlJoYeSHZ2dkXQJq0s7LX1NEZOX+4tbAq'+ 'Pm0KLXeUk5WbmZeam5/36/d4P/WjAAAajElEQVR4Xu2bZXfdSrKGI2kjM4OZmZkZwszMzMzMcJiZ'+ 'mZkZh5l5Lv6G+1ZLsr23tZ3EyazxXXY5J19OO+p+9FZ1dVVr3L/PxmzMxmzMxmzMxmzMxmzMfnof'+ 'bNWq5577DWzXvwZA09uLalZWwlbWLHr7yMhHsurBVatWPXj3b3/5s589/OOD/wIgR2pKDxUmW+bM'+ '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'+ 'gg=='; var img = document.createElement("img"); img.src = data; var a = document.createElement("a"); a.href = "http://www.google.com/webhp?hl=ja"; a.appendChild(img); document.body.appendChild(a);
上記のスクリプトでは、変数dataに格納されているがGoogleのロゴ画像(http://www.google.com/intl/en_com/images/logo_plain.png)をBase64エンコードした結果です。
画像ファイルからBase64エンコードした結果を取得する
通常、画像ファイルから手動でエンコード結果を求めることは人間のすることはではありませんので、機械にまかせてしまいます。たとえば、川崎有亮(かわさきゆうすけ)さんが作成した[JavaScript] dataスキームURI生成(画像データのBase64変換)では、画像ファイルを指定するだけで、Base64エンコードした結果を取得することができます。
このように、Base64エンコードした画像データを用いることで、サーバ上の物理的な画像ファイルに依存することなく、Greasemonkeyであらゆるページに画像を表示することができます。*2