理系学生日記

おまえはいつまで学生気分なのか

人生初の GreaseMonkey Script

とりあえず,JavaScript でなんか作らないと良く分かんないよなーと思いましたので,急遽 GreaseMonkey のスクリプトを作ってみた!!


xmlHttpRequest とか使ってみたかったんですが,まずは基本的なのを作らねばと,とりあえず見ているページに存在するのリンクをリストにして出力するやつを考えたりした.

'c' を押すとディスプレイの下部にリンク一覧が出力されて,'shift+c' を押すと消える感じ.実際には 'shift+c' でなくて 'C' を押すと消えるわけだけど,そういう細かいところは今のところ無視だ! evt.shiftKey とか無視!!!!!!!!
キーボードショートカットとか,修飾キーが来たときとかクソ複雑な感じで,shortcut.js とか使うと楽なんだと思います.
StyleSheet っていろんなことができるんだなーってのが今日の良き教訓.

追記

なんかソース貼っつけたらいきなし "Install this script" とか出てきて,突如インストールできるようになったっぽいんだけど,あんましお勧めしないし,へんなことになってもぼくは責任もたないし,ちょっとマジヤバい.だから,ヘッダ行を消して.インストールするリンクは表示されないようにしたった!

var shortcut = {
    map: {},  // stores shortcut mappings
    install: function( shortcut, callback, opt ) {
        var func = function( evt ) {
            var keys = shortcut.split( '+' );
            evt = evt || window.event;
            var c = String.fromCharCode( evt.charCode );

            var modifiers = {
                shift: { wanted: false, pressed: false },
            };
            if ( c.toLowerCase() != c ) {
                modifiers.shift.pressed = true;
                c = c.toLowerCase();
            }

            var kp = 0;
            for ( var i = 0; i < keys.length; ++i ) {
                var key = keys[i];
                if ( key == 'shift' ) { kp++; modifiers.shift.wanted = true; }
                else if ( c == key ) { kp++; }
            }

            if ( kp == keys.length
                 && modifiers.shift.pressed == modifiers.shift.wanted
               ) {
                callback( evt );
            }
            evt.stopPropagation();
        };

        window.addEventListener( 'keypress', func, false );
    },
};

var style = [
    'position: fixed',
    'bottom: 10px',
    'left: 50px',
    'right: 0',
    'border: 1px solid #000',
    'background: #000000',
    'color: #ffffff',
    'padding: 30px',
    'line-height: 140%',
    'max-height: 50%',
    'overflow: auto',
    'opacity: 0.6',
    'display: none'
].join( ';' );

    // creates list of links
    function listLinks( links ) {
        var ret;
        for ( var i = 0; i < links.length; ++i ) {
            ret += '<a href="' + links[i] + '">' + links[i].text + '</a><br>';
        }
        return ret;
    }

    var pane = document.createElement( "div" );
    pane.setAttribute( "style", style );
    document.body.appendChild( pane );
    pane.innerHTML = listLinks( document.links );

    shortcut.install( 'c', 
                      function(e) {
                          pane.style.display = "inherit";
                      } );
    shortcut.install( 'shift+c',
                      function(e) {
                          pane.style.display = "none";
                      } );