TamperMonkey-Rätsel gelöst: So können Sie Vars über eine UI speichern!

Willkommen zu dieser ausführlichen Anleitung, in der wir uns mit der oft gestellten Frage beschäftigen, wie man Variablen in Tampermonkey über eine benutzerfreundliche Oberfläche (UI) speichert. Tampermonkey ist ein mächtiges Werkzeug für die Anpassung von Webseiten, aber die Verwaltung von Daten, die über Sitzungen hinweg persistent sein sollen, kann eine Herausforderung sein. Keine Sorge, wir werden das gemeinsam meistern!

Warum Variablen in Tampermonkey speichern?

Bevor wir uns in die technische Umsetzung stürzen, wollen wir kurz erläutern, warum es überhaupt sinnvoll ist, Variablen in Tampermonkey zu speichern. Hier sind einige Anwendungsfälle:

• Konfigurationseinstellungen: Benutzer können Optionen wie Themen, Layouts oder Funktions-Flags anpassen, die über Besuche hinweg gespeichert werden sollen.
• Benutzerdaten: Speichern von Informationen wie Namen, Präferenzen oder Fortschritt in Spielen, die durch das Skript gesteuert werden.
• Skriptstatus: Verfolgen des Status bestimmter Aktionen, die das Skript ausführt, z. B. ob ein Prozess abgeschlossen wurde oder nicht.
• Temporäre Daten: Zwischenspeichern von Daten, um unnötige API-Aufrufe oder Berechnungen zu vermeiden.

Die Herausforderung: Datenpersistenz in Tampermonkey

Das Hauptproblem bei der Datenpersistenz in Tampermonkey ist, dass globale Variablen bei jedem Neuladen der Seite zurückgesetzt werden. Um dieses Problem zu lösen, müssen wir Mechanismen nutzen, die es uns ermöglichen, Daten über Sitzungen hinweg zu speichern und abzurufen.

Die Lösung: GM_setValue und GM_getValue

Tampermonkey bietet eine Reihe von Funktionen, die uns bei der Lösung dieses Problems helfen. Die wichtigsten sind GM_setValue und GM_getValue. Diese Funktionen ermöglichen es uns, Daten im lokalen Speicher des Browsers zu speichern, der für das Skript spezifisch ist.

GM_setValue(name, value): Speichert einen Wert unter einem bestimmten Namen. Der Name ist ein String, und der Wert kann ein String, eine Zahl, ein Boolean oder ein Objekt sein (das automatisch serialisiert wird).

GM_getValue(name, defaultValue): Ruft einen Wert anhand seines Namens ab. Wenn der Wert nicht existiert, wird der optionale defaultValue zurückgegeben.

Eine einfache Beispiel: Speichern eines Namens

Hier ist ein einfaches Beispiel, das demonstriert, wie man einen Namen mithilfe von GM_setValue und GM_getValue speichert und abruft:

// ==UserScript==
// @name         Namensspeicherung
// @match        *://example.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    let name = GM_getValue('userName', 'Gast'); // Versuche, den Namen abzurufen, ansonsten 'Gast'

    // Gib den Namen auf der Seite aus (nur als Beispiel)
    let heading = document.createElement('h1');
    heading.textContent = 'Hallo, ' + name + '!';
    document.body.prepend(heading);

    // Speichern des Namens (normalerweise nach einer Benutzeraktion)
    function saveName(newName) {
        GM_setValue('userName', newName);
        alert('Name gespeichert!');
    }

    // Hier wäre eine Möglichkeit, den Namen vom Benutzer abzufragen (vereinfacht)
    let newName = prompt('Bitte gib deinen Namen ein:', name);
    if (newName) {
        saveName(newName);
    }

})();

Erklärung:

1. Wir deklarieren @grant GM_setValue und @grant GM_getValue, um dem Skript die Berechtigung zum Verwenden dieser Funktionen zu geben.
2. Wir versuchen, den Namen mit GM_getValue('userName', 'Gast') abzurufen. Wenn kein Name gespeichert ist, wird standardmäßig ‘Gast’ verwendet.
3. Wir zeigen den Namen auf der Seite an.
4. Wir definieren eine Funktion saveName, die den Namen mit GM_setValue speichert.
5. Wir verwenden prompt, um den Benutzer nach einem neuen Namen zu fragen. (In der Praxis würden Sie eine schönere UI erstellen, wie wir später sehen werden).

Erstellen einer UI zur Variablenspeicherung

Die Verwendung von prompt ist nicht ideal für eine benutzerfreundliche Erfahrung. Lassen Sie uns eine einfachere Benutzeroberfläche (UI) erstellen, um die Variable zu verwalten. Wir werden ein Eingabefeld und einen Speicher-Button erstellen.

// ==UserScript==
// @name         UI Variablenspeicherung
// @match        *://example.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // CSS hinzufügen (für eine rudimentäre Formatierung)
    GM_addStyle(`
        #tampermonkey-ui {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: white;
            border: 1px solid black;
            padding: 10px;
            z-index: 1000; /* Stelle sicher, dass es über allem liegt */
        }
        #tampermonkey-ui input {
            margin-bottom: 5px;
        }
    `);

    // UI-Container erstellen
    let uiContainer = document.createElement('div');
    uiContainer.id = 'tampermonkey-ui';

    // Eingabefeld erstellen
    let nameInput = document.createElement('input');
    nameInput.type = 'text';
    nameInput.value = GM_getValue('userName', ''); // Wert aus dem Speicher laden
    uiContainer.appendChild(nameInput);

    // Speicher-Button erstellen
    let saveButton = document.createElement('button');
    saveButton.textContent = 'Name speichern';
    saveButton.addEventListener('click', function() {
        GM_setValue('userName', nameInput.value);
        alert('Name gespeichert!');
    });
    uiContainer.appendChild(saveButton);

    // UI der Seite hinzufügen
    document.body.appendChild(uiContainer);

})();

Erklärung:

1. Wir fügen @grant GM_addStyle hinzu, um CSS-Stile einzufügen.
2. Wir erstellen einen div-Container für unsere UI und geben ihm eine feste Position und ein grundlegendes Styling.
3. Wir erstellen ein input-Feld, laden den gespeicherten Wert (falls vorhanden) und fügen es dem Container hinzu.
4. Wir erstellen einen button und fügen einen Event Listener hinzu, der den Wert speichert, wenn der Button geklickt wird.
5. Wir fügen die UI dem body der Seite hinzu.

Fortgeschrittene Techniken

Hier sind einige fortgeschrittenere Techniken, die Sie bei der Verwendung von GM_setValue und GM_getValue berücksichtigen sollten:

• Objekte speichern: Sie können Objekte und Arrays problemlos speichern. GM_setValue serialisiert sie automatisch in Strings und GM_getValue deserialisiert sie zurück in Objekte/Arrays.
• Fehlerbehandlung: Überprüfen Sie auf Fehler beim Speichern oder Abrufen von Daten. Auch wenn es selten vorkommt, kann es zu Problemen mit dem lokalen Speicher kommen.
• Asynchrone Programmierung: Beachten Sie, dass GM_setValue und GM_getValue asynchron sind. Das bedeutet, dass die Ausführung des Skripts fortgesetzt wird, bevor die Daten tatsächlich gespeichert oder abgerufen wurden. In den meisten Fällen ist dies kein Problem, aber in bestimmten Szenarien (z.B. wenn Sie den gespeicherten Wert direkt nach dem Speichern verwenden müssen) müssen Sie möglicherweise GM.setValue verwenden, welches eine Promise zurückgibt (und @grant GM.setValue erfordert).
• Sicherheit: Speichern Sie keine sensiblen Informationen (z. B. Passwörter) im lokalen Speicher. Der lokale Speicher ist nicht verschlüsselt und kann von anderen Skripten oder Benutzern eingesehen werden.

Alternativen zu GM_setValue/GM_getValue

Obwohl GM_setValue und GM_getValue die gebräuchlichsten Optionen sind, gibt es einige Alternativen, die Sie in Betracht ziehen könnten:

• localStorage: Die Standard-Web-API für den lokalen Speicher. Funktioniert ähnlich wie GM_setValue/GM_getValue, ist aber nicht auf Tampermonkey beschränkt. Allerdings kann auf localStorage auch von anderen Skripten oder der Webseite selbst zugegriffen werden, was zu Konflikten führen kann.
• Cookies: Eine weitere Option, aber Cookies sind hauptsächlich für serverseitige Daten gedacht und haben Größenbeschränkungen. Sie sind für kleinere Datenmengen geeignet, aber für größere Datenmengen sind GM_setValue/GM_getValue oder localStorage besser geeignet.

Fazit

Die Speicherung von Variablen über eine UI in Tampermonkey ist ein erreichbares Ziel mit den richtigen Techniken. Durch die Nutzung von GM_setValue und GM_getValue (oder ihren asynchronen Pendants) können Sie benutzerdefinierte Konfigurationen, Benutzerdaten und Skriptstatus auf elegante und effiziente Weise verwalten. Experimentieren Sie mit den Beispielen, passen Sie sie an Ihre Bedürfnisse an und erstellen Sie beeindruckende browserbasierte Erweiterungen!