Hilfe beim Erstellen einer Webextension

  • Ich habe zwar eine ganzes Stück geschafft heute, aber nun bin ich mit meinem Latein am Ende ||

    Ich muss zugeben, dass ich mir andere Webextensions angesehen habe um bessere Anhaltspunkte zu haben. Dies habe ich dann nach meiner Vorstellung umgemodelt.

    Bisher habe ich zusätzlich eine

    1. Einstellungsseite gemacht in die Black/Whitelist eingetragen werden kann (index.js und index.html)

    2. _locales geschrieben

    Was es bisher tut:

    Beim Rechtsklick auf das Icon -->Erweiterung verwalten ruft es diese Einstellungsseite auf.

    Die beiden Haken für "Aktuelle Seite Neu Laden" per default gesetzt für den Wechsel.

    Der Button Speichern, speichert auch die eingetragene Domain.

    Woran ich aber komplett scheitere ist, wie ich beides zusammenfüge. Also damit auch wirklich diese background.js (content.js?) dort wirkt

    Sören Hentzschel ich wäre dir sehr dankbar wenn du es dir mal ansehen könntest, und mir vielleicht den entscheidenden Tipp geben könntest wie ich das bewerkstelligen kann. Ich schicke die das .zip aber diesmal lieber per PN. Antworten kannst du trotzdem hier, wenn du Zeit und Lust hast.

    Was auch nicht so schön ist momentan ist, dass beim Klick auf das Icon auch about:addons Seiten usw. neu geladen werden. Das sollte so natürlich nicht sein.

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden ;)

  • Zunächst einmal solltest du alle Vorkommen von chrome.* durch browser.* ersetzen, da chrome.* in Firefox nur aus Kompatibilitätsgründen zu Google Chrome existiert, aber browser.* der korrekte browserunabhängige Weg ist.

    Nun zum eigentlichen Problem, wie du beides miteinander verbinden kannst: In der Datei index.js speicherst und liest du Einstellungen aus, storage.local.get und storage.local.set. In der Datei background.js hatte ich auch Code zum Speichern und Lesen von Einstellungen eingefügt. Das heißt, du hast bereits ein Beispiel, wie du auf die Einstellungen zugreifen kannst. In der Datei background.js steht (verkürzt):

    JavaScript
    const options = await browser.storage.local.get();
    
    if (options.enabled) {
        // code…
    }

    Du liest die Einstellungen aus und wenn die Einstellung "enabled" auf aktiv ist, wird Code ausgeführt. Wenn du also beispielsweise die Zeile browser.tabs.reload(); abhängig von einer Option "foo" deiner Einstellungsoberfläche machen willst, musst du das in einen entsprechenden if-Block geben:

    JavaScript
    if (options.foo) {
        browser.tabs.reload();
    }

    Wie du dann die Whitelist/Blacklist berücksichtigen kannst, siehe Ende von Beitrag #2:

    JavaScript
    if (options.whitelist.includes(window.location.href)) {
      // URL ist in Liste, führe Code aus
    }

    Oder wenn eine URL nicht in der Liste sein soll eben durch ein ! negieren:

    JavaScript
    if (!options.whitelist.includes(window.location.href)) {
      // URL ist in Liste, führe Code aus
    }

    Mit der Blacklist das gleiche Prinzip.

    Allerdings ist das jetzt allgemein gesprochen. Ich habe das nicht getestet, ob window.location.href hier tatsächlich der korrekte Ansatz ist. Bitte melden, wenn das nicht geht. Meine komplette Antwort basiert nur auf der Ansicht des Codes, ich habe den Code nicht angepasst und ausprobiert.

    Den Code solltest du ganz entfernen:

    Denn der Code ist komplett ungenutzt und sorgt jedes Mal beim Laden der Oberfläche für einen Fehler, der in der Konsole geloggt wird, weil du auf ein Element zugreifst, welches nicht existiert.

    In der Datei index.html nutzt du außerdem übersetzte Inhalte, in der Datei index.js hast du aber alle Texte auf Englisch fix im Code.

    Ersetze beispielsweise:

    JavaScript
    toast.textContent = 'Options saved.';

    durch:

    JavaScript
    toast.textContent = browser.i18n.getMessage('name_deiner_sprachvariablen');

    Und vielleicht überarbeitest du auch die deutschen Texte noch ein wenig. "Weiße Liste" und "Schwarze Liste" habe ich im Deutschen noch nie gehört, hier ist auch eher Whitelist und Blacklist üblich. Auch Domain ist in diesem Kontext im deutschsprachigen Raum sehr viel üblicher als Domäne. Bei den beiden Einstellungen mit der Checkbox weiß ich nicht, was das "Aktiviert" respektive "Deaktiviert" am Ende soll und das "ist" meint vermutlich eher "wird". Und ganz allgemein: Unter "Seiten-Sichtbarkeitsstatus" kann ich mir nichts vorstellen. Ich käme da nie darauf, was die Erweiterung eigentlich umstellt. ;)

  • Danke erstmal, ich werde heute (und wahrscheinlich die nächsten Tage) noch nicht dazu kommen mich näher damit zu beschäftigen. Aber wenn es soweit ist, dann werde ich hier sicherlich aufschlagen.

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden ;)