Bookmarklets Grundgerüst

JavaScript für BookmarkletsDezember 2020

Hat der alte Hexenmeister 
Sich doch einmal wegbegeben! 
Und nun sollen seine Geister 
Auch nach meinem Willen leben. 
Seine Wort und Werke 
Merkt ich und den Brauch,
Und mit Geistesstärke 
Tu ich Wunder auch.

Bisweilen möchte man etwas mit einem Boorkmarklet im Browser fernsteuern.
Hier hilft das folgende grundlegende Framework um Dinge zu finden und zur Interaktion.

hxEnter(text, value): Fügt value im nächsten Textfeld hinter dem Text text ein.

hxClickEvent(text) oder hxClick(text): Klickt das Element mit dem Text text an.

hxClickClass(text, classpart): Klickt das Element mit dem Text text an, dessen Klasse classpart enthält.

hxClickButtonValue(text): Klickt das Element mit dem value text an. Ist schon sehr speziell.

formatDate(): Erzeugt einen String mit dem Datum bis zur Sekunde, von groß nach klein.

Einfach die Befehle unten an das Framework dranhängen, und ab damit ins Bookmarklet. Klappt mit den Ende 2020er Versionen von Firefox und Chrome.

javascript:
    function hxEnter(text, value){
        var n= document.evaluate('//*[contains(text(),"'+text+'")]/following::input', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
        if (n){
            hxEnterText(n, value);
        } else {console.log('nicht gefunden: '+text)}
    };
    function hxEnterText(n, text){
        n.value="";
        text.split('').forEach(function(c){
            hxEnterValue(n, c);
        });
    }
    function hxEnterValue(n, key){
        var event = null;
        n.focus();
        n.value= n.value + key;
    
        document.dispatchEvent(new KeyboardEvent('keydown',{'key':key,'bubbles':true}));
        n.dispatchEvent(new KeyboardEvent('keydown',{'key':key,'bubbles':true}));
        event = new Event('beforeinput', { 'bubbles': true });
        n.dispatchEvent(event);
        document.dispatchEvent(new KeyboardEvent('keypress',{'key':key,'bubbles':true}));
        n.dispatchEvent(new KeyboardEvent('keypress',{'key':key,'bubbles':true}));
        event = new Event('input', { 'bubbles': true });
        n.dispatchEvent(event);
        event = new Event('change', { 'bubbles': true });
        n.dispatchEvent(event);
        document.dispatchEvent(new KeyboardEvent('keyup',{'key':key,'bubbles':true}));
        n.dispatchEvent(new KeyboardEvent('keyup',{'key':key, 'bubbles':true}));
        event = new Event('beforeinput', { 'bubbles': true });
        n.dispatchEvent(event);
        n.blur();
    }
    function hxFireEvent(n) {
      var evt = new MouseEvent("mousedown", {
              view: window,
              bubbles: true,
              cancelable: true,
              clientX: 20
          });
          n.dispatchEvent(evt);
          evt = new MouseEvent("mouseup", {
              view: window,
              bubbles: true,
              cancelable: true,
              clientX: 20
          });
          n.dispatchEvent(evt);
    };
    function hxClickEvent(text) {
        var n = document.evaluate('//*[contains(text(), "' + text + '")]',document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
        if (n){
            hxFireEvent(n);
        } else {console.log('nicht gefunden: '+text)}
    };
    function hxClick(text) {
        var n = document.evaluate('//*[contains(text(), "' + text + '")]',document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
        if (n){
            n.click();
        } else {console.log('nicht gefunden: '+text)}
    };
    function hxClickClass(text, classpart) {
        var n = document.evaluate('//*[contains(text(), "' + text + '") and contains(@class, "'+classpart+'")]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
        if (n){
            n.click();
        } else {console.log('nicht gefunden: '+text)}
    };
    function hxClickButtonValue(text) {
        var n = document.evaluate('//*[contains(@value, "' + text + '")]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
        if (n){
            n.click();
        } else {console.log('nicht gefunden: '+text)}
    };
    function hxFindByPlaceHolder(text){
        var inputs = document.getElementsByTagName('input');
        if (inputs && inputs.length > 0){
            /** inputs is HTMLCollection, convert to array */
            var inputA = Array.prototype.slice.call(inputs);
            var n = inputA.find(function(val){
                return text === val.placeholder;
            });
            return n;
        }
    }
    function zweistellig(x){
        if (x < 10){
            return "0"+x;
        }
        return ""+x;
    }
    function formatDate(){
        var d = new Date();
        return (""+d.getFullYear())+zweistellig(1+d.getMonth())+zweistellig(d.getDate())+zweistellig(d.getHours())+zweistellig(d.getMinutes())+zweistellig(d.getSeconds());
    }
    void(0);