小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


Greasemonkeyスクリプトでページ内に画像を表示する方法

Greasemonkey

Greasemonkeyスクリプトでページ内に画像を表示する方法には、僕が知っている限りですが、以下の２通りの方法があります。

  1. img要素を動的に生成し、img.src属性に任意のサーバ上にある画像ファイルへのパスを指定する
  2. 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'+
    '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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

*1:ブラウザにキャッシュされるため、その影響は小さいかもしれません。

*2:wikipediaにもありますが、Base64でエンコードを行うと、データ量が増加します。このため、1の方法では1k程度のスクリプトが、10k強までファイルサイズが増えることになります。