ブックマークレットで画面にHTMLの部品とイベントハンドラを追加するサンプルです。

使うもの

jQuery

やっていること

このブックマークレットを実行すると、

画面の一番上に1つボタンと2つのチェックボックスを追加します。
jQueryで3つの部品にイベントハンドラと関数を追加します。

ボタンは変数の状態を確認するためだけのものです。チェックボックスは<img><iframe>を非表示にして画面をシンプルにします。このコードはどのサイトでも動きます

さっそくコード

void
(function bootstrap(func,a,b){
    var script = document.createElement('script');
    script.src = '//code.jquery.com/jquery-3.2.1.min.js';
    script.onload = function(){
        var $ = jQuery.noConflict(true);
        func($,a,b);
    };
    document.body.appendChild(script);
}(
    function($,a,b){
        console.log('jQuery: ', $().jquery);

        //イベントハンドラから使う変数
        var cnt = 0;
        var parama = a;
        var paramb = b;

        //HTMLに部品を追加する部分
        $('body').prepend(
            '<div style="margin:20px">'+
            '<button id="mybutton1">ボタンです</button><br>'+
            '<input type="checkbox" id="mycheck1">画像を隠す</input>'+
            '<input type="checkbox" id="mycheck2">iframeを隠す</input>'+
            '</div>'
        );

        //ボタンが押されたときの動作を定義
        $('#mybutton1').on('click', function(){
            cnt++;
            alert('button click:'+ cnt);
            console.log('param=%s, %s', parama,paramb);
        });

        //チェックボックスがクリックされたときの動作を定義
        $('#mycheck1').on('click', function(e){
            console.log('check click');
            console.log(e);
            if( $(this).is(':checked')){
                $("img").hide();
            }else{
                $("img").show();
            }
        });
        $('#mycheck2').on('click', function(e){
            if( $(this).is(':checked')){
                $("iframe").hide();
            }else{
                $("iframe").show();
            }
        });

    }
    ,'parameter-A'
    ,'parameter-B'
)
);

解説１

今回のコードでは、ブックマークレットの外側から起動用のパラメータ（文字列のparameter-Aとparameter-B）を受け取るようにしました。APIのキーなどをコード内に埋め込むと修正するのが難しくなるので、一番外側に置くようにしています。

コードは長いですが、構造だけわかるように省略して書くと、こうなります。

function bootstrap(func,a,b){
    var $ = jQuery.noConflict(true);
    func($,a,b);
}(
    function($,a,b){/*メインのコード*/}, //bootstrapの第1引数
    'parameter-A',                      //bootstrapの第2引数
    'parameter-B'                       //bootstrapの第3引数
)

3つの引数を受け取るbootstrap関数を定義する
bootstrap関数の中では
1. jQueryを使える状態にする
2. bootstrap関数が第一引数で受け取った関数を呼び出す。このときに$=jQueryを渡す
最後に、bootstrap関数を実行するために()で括り、
第1引数に実行したい関数を渡す

説明になってるような、なってないような。

解説２

この部分がメインのコードです。
この関数はブックマークレットが起動したときに1回だけ動きます。変数を3つ用意しパラメータaとbを失なわないために代入しておきます。

    function($,a,b){
        console.log('jQuery: ', $().jquery);

        var cnt = 0;
        var parama = a;
        var paramb = b;

解説３

画面にHTMLを突っ込むところです。HTMLを文字列として書き出すのは仕方ないですね。

        //HTMLに部品を追加する部分
        $('body').prepend(
            '<div style="margin:20px">'+
            '<button id="mybutton1">ボタンです</button><br>'+
            '<input type="checkbox" id="mycheck1">画像を隠す</input>'+
            '<input type="checkbox" id="mycheck2">iframeを隠す</input>'+
            '</div>'
        );

解説４

イベントハンドラの定義と登録は、まったく普通のjQueryのコードです。ブックマークレットを実行したときに、HTMLのIDを指定してイベントを追加するだけで動きます。特に難しいことはやってないです。

ボタンが押されたら、カウンター値をインクリメントして表示するだけです。イベントハンドラの外の変数を使っています。

        //ボタンが押されたときの動作を定義
        $('#mybutton1').on('click', function(){
            cnt++;
            alert('button click:'+ cnt);
            console.log('param=%s, %s', parama,paramb);
        });

チェックボックスのチェック状態を見ながら、画面全体の画像の表示と非表示を切り替える

        //チェックボックスがクリックされたときの動作を定義
        $('#mycheck1').on('click', function(e){
            console.log('check click');
            console.log(e);
            if( $(this).is(':checked')){
                $("img").hide();
            }else{
                $("img").show();
            }
        });

まとめ

今までのブックマークレットは、アドレスバーから実行したときに必要な処理を全て終わらせるようなものでしたが、ボタンを置いてブックマークレットの利用者が好きなタイミングでコードを実行できるようにしてみました。
jQueryが使える環境であれば、そんなに難しいコードを書かなくても、画面上のデータを操作することが可能です。

画面にボタンを置いて実行するブックマークレット

使うもの

やっていること

さっそくコード

解説１

解説２

解説３

解説４

まとめ