Hilfe beim Erstellen einer Webextension

Hi,

deine vier Punkte sind alle machbar, das ist nicht das Problem. Das Problem ist viel mehr, dass Lösungen für alles zu präsentieren im Endeffekt bedeutet, den größten Teil der Erweiterung zu entwickeln. Das wäre zeitlich für mich ein zu große Herausforderung in Anbetracht dessen, dass ich tausend andere Dinge zu erledigen habe, inklusive einem Umzug, der nächste Woche ansteht.

Daher versuche ich mal, zumindest ein paar Ansätze zu liefern. Schau mal, wie weit dich das bringt. Dann sehen wir weiter.

1. Grundsätzlich gibt es zwei Möglichkeiten für einen Button: Die browserAction-API erlaubt dir das Hinzufügen eines Buttons zur Symbolleiste. Ich denke, dass das genau das ist, was du im Sinn hattest. Die pageAction-API ist für das Hinzufügen eines Symbols zur Adressleiste beziehungsweise dem Menü hinter den drei Punkten in der Adressleiste. Sinnvoll wäre die browserAction-API für alles, was global wirkt, die pageAction-API für alles, was einen konkreten Bezug zu einer einzelnen Website hat. Das heißt, wenn du bei Klick auf den Button das Feature für alle Webseiten aktivieren möchtest und nicht möchtest, dass man das für jede Webseite neu anklicken muss, ist die browserAction-API rein von der Idee her die bessere Wahl. Technisch ist das egal. Du kannst nehmen, was du willst. Es ist nur eine Entscheidung für die sinnvollere Wahl.

Manifest: https://developer.mozilla.org/en-US/docs/Moz…/browser_action
JS-API: https://developer.mozilla.org/en-US/docs/Moz…I/browserAction

In der JS-API wird insbesondere browserAction.setIcon() interessant sein.

2. Kurze Antwort: browser.tabs.reload(), siehe https://developer.mozilla.org/en-US/docs/Moz…API/tabs/reload

3. Zum Speichern von Einstellungen benötigst du die storage-Berechtigung:
https://developer.mozilla.org/en-US/docs/Moz…son/permissions

options_ui zum Implementieren der Einstellungs-Oberfläche:
https://developer.mozilla.org/en-US/docs/Moz…json/options_ui

Laden und Speichern von Einstellung geht via browser.storage.local.get() respektive browser.storage.local.set():

https://developer.mozilla.org/en-US/docs/Moz…StorageArea/get
https://developer.mozilla.org/en-US/docs/Moz…StorageArea/set

4. Eine komma-separierte Liste von Domains ist kein schöner Ansatz, aber von der Implementierung sicher der Einfachste, weil man nicht viel Oberfläche zu bauen braucht. Letztlich hängt das mit Punkt 3 zusammen. Du musst Einstellungen auslesen sowie ausgeben und Einstellungen speichern. Und wenn es um die Anwendung deines Features geht, musst du die Einstellung auslesen, den Text-Inhalt in ein Array mit allen Domains umwandeln und dann schauen, ob die aktuelle Domain in dem Array drin ist und entsprechend deinen Code ausführen oder nicht ausführen.

Wenn du einen String wie den folgenden hast:

let whitelist = "example.com, camp-firefox.de, mozilla.de"

bekommst du so ein Array mit den Domains:

let domains = whitelist.split(',').map(function (domain) {
  return domain.trim();
});

Und kannst dann prüfen:

if (domains.includes(window.location.href)) {
  // URL ist in Liste, führe Code aus
}
else {
  // URL ist nicht in Liste, führe anderen Code aus
}

Ich werde versuchen, Fragen bestmöglich zu beantworten, sofern möglich.

Nur noch eine Ergänzung, weil ich mir vorhin die Beispiele nicht angesehen hatte:

Zitat von Zitronella

oder sie funktionieren nicht korrekt bei manchen Seiten wie https://addons.mozilla.org/de/firefox/addon/visibility/ die zb. auf dieser Seite http://daniemon.com/tech/webapps/page-visibility/ wenn ich dort das Video pausiere und dann den Tab wechsele, dann spielt es plötzlich im Hintergrund weiter.

Das ist kein Wunder, weil das Add-on mit der Page Visibility API überhaupt nichts zu tun hat. Das ist ein griechisches SEO-Tool.

Aber danke für die Gelegenheit zu prüfen, ob ich Griechisch noch lesen kann. Das klappt immer noch fließend. (Übersetzen nicht, ich hatte früher antike Texte übersetzt. Ganz andere Baustelle. )

Ich weiß noch nicht, ob ich heute dazu komme oder nicht, mir das anzusehen. Aber kannst du deinen aktuellen Stand irgendwo hochladen, so dass ich da einfach ansetzen kann, ohne mir alles zusammenkopieren zu müssen, sobald ich Zeit finde? Danke.

Zitat von Zitronella

klar, mache ich. Wobei ich _locales noch nicht angepasst habe, aber das bekomme ich wahrscheinlich alleine hin.

Dafür schon mal ein dickes Lob als Vorschusslorbeer. Leider halten es viele Add-on-Entwickler nicht für selbstverständlich Lokalisierbarkeit zu gewährleisten.

Versuche mal Folgendes:

manifest.json:

{
  "author": "Zitronella",
  "manifest_version": 2,
  "name": "__MSG_extensionName__",
  "default_locale": "en",
  "version": "1.0.2",
  "description": "__MSG_extensionDescription__",
  "icons": {
    "48": "icons/eye-48.svg",
    "96": "icons/eye-48.svg"
  },
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "browser_action": {
    "default_icon": "icons/eye-48.svg",
    "default_title": "__MSG_button_title__"
  },
  "permissions": [
    "*://*/*",
    "storage"
  ]
}

Den content_scripts-Part habe ich entfernt, weil wir das dynamisch zur Laufzeit setzen wollen. Außerdem habe ich die permissions geändert, da wir die  browserSettings-API nicht verwenden. Wir benötigen einmal eine passende Hosts-Permission, das ist *://*/*, entsprechend dem matches, was du vorher content_scripts hattest, und einmal storage, damit wir die Einstellung speichern können.

background.js:

let registered = null;

async function ToolbarButtonClicked() {
  const options = await browser.storage.local.get();
  browser.storage.local.set({ enabled : !options.enabled });

  await UpdateBadge();
}

async function UpdateBadge() {
  const options = await browser.storage.local.get();
  let badgeText;
  let badgeTitle;

  if (options.enabled) {
    registered = await browser.contentScripts.register({
      matches: ['*://*/*'], js: [{ file : 'content_script.js' }], runAt: 'document_start'
    });

    badgeText = 'X';
    badgeTitle = 'title_enabled';
  }
  else {
    badgeText = '';
    badgeTitle = 'title_disabled';

    if (registered) {
      registered.unregister();
    }
  }

  const title = browser.i18n.getMessage("button_title") + " (" + browser.i18n.getMessage(badgeTitle) + ")";

  browser.browserAction.setTitle({ title : title });
  browser.browserAction.setBadgeText({ text : badgeText });
}

// Set background color to a non-intrusive gray
browser.browserAction.setBadgeBackgroundColor({color: "#666666"});

// Register event listeners
browser.browserAction.onClicked.addListener(ToolbarButtonClicked);

// Update badge for the first time
UpdateBadge();

Hier verwende ich die contentScripts-API, da wir ja nicht mehr content_scripts im Manifest nutzen.

Funktionsweise: Wir lesen aus den gespeicherten Einstellungen aus, ob das Script aktiviert ist oder nicht, und speichern bei Klick auf den Button den umgekehrten Wert ab.

Wird die Funktion aktiviert, wird content_script.js registriert, wird die Funktion deaktiviert, wird das Script wieder "un-registriert". Titel und Badge wird wie im ursprünglichen Code bei Klick auf den Button angepasst.

Ich habe noch die Abfragen zwecks Android entfernt, weil Erweiterungen für Android derzeit eh kein spannendes Thema sind.

Zu beachten ist, dass du nach Klick auf den Button die Tabs neu laden musst, damit die Änderung wirkt, da das Script mit Laden des Tabs eingefügt wird (oder nicht eingefügt wird). Nur durch Klicken des Buttons ändert sich nicht, was bereits geladen ist.

Zitat von Zitronella

Danke. Aber ich bin ja auch kein Entwickler. Ich fummel nur rum und irgendwann mit viel Hilfe kommt vielleicht was brauchbares dabei raus

Macht nichts, der gute Wille zählt. Mir reicht es schon, wenn ich mir einbilden kann, dass du das extra für mich machst.

Schön, dass das funktioniert.

Zitat von Zitronella

Was mich wundert, ich habe mir bestimmt über 50 Erweiterungen angesehen und nichts vergleichbares gefunden. Meist bestanden sie (zumindest die kleineren) nur aus einer background.js Datei, in der dann alles drin stand.

Ich habe keine Ahnung, was es so an Erweiterungen gibt, weil ich eigentlich nie nach Erweiterungen suche. Vielleicht ist das kein so häufiger Anwendungsfall, Content-Scripts per Schaltfläche an- und abschaltbar zu machen. Die Erweiterung, welche du als Basis genommen hattest, war ja auch insofern anders, als dass diese kein Content-Script benötigte, sondern eine Firefox-Einstellung geändert hat.

Zitat von Zitronella

Keine einzige hatte was von let registered = null; drin stehen, auch nicht die Beispieldateien, die es dort im Paket gibt.

Im Endeffekt habe ich das angewendet, was hier in Prosa steht:

https://developer.mozilla.org/en-US/docs/Moz…/contentScripts

Man muss das Resultat von browser.contentScripts.register einer Variablen zuordnen, wenn man auf eben jenes Objekt später die unregister()-Methode anwenden will. Und die Variable hab ich ganz oben im Script deklariert, damit sie global verfügbar ist. Es soll ja bei jedem Klick auf die Schaltfläche das gleiche Objekt benutzt werden.

Zitat von Zitronella

In Verbindung mit async function ToolbarButtonClicked spuckt nicht mal Google was brauchbares dazu aus.

Das ist nicht verwunderlich. Dieses ToolbarButtonClicked() ist ja eine Funktion der Erweiterung, die hat er der Entwickler der Erweiterung so genannt und könnte auch HansPeter() heißen. Dazu wird man nicht viel finden. Und das async muss vor jedem function stehen, wenn await verwendet wird. Das wiederum ist also sehr allgemein.

Zitat von Zitronella

Das bedeutet also auch, dass man ähnliche Scripte in die content_script.js rein machen könnte wie das Originale und es würde wohl funktionieren?

Ja, nach dem Prinzip kannst du theoretisch jedes Script, welches auf Websites wirken soll, per Button ein- und ausschaltbar machen.

Zitat von Zitronella

Ist es sinnvoll auf Github dazu ein Projekt (oder wie man das nennt) zu starten um die ganze Code Klauerei zu dokumentieren? Dann könnte ich, wenn die Erweiterung irgendwann mal auf AMO ist auch auf die Github Seite verweisen für den Quelltext. Wobei wenn es wirklich zu Problemen kommt habe ich doch keine Ahnung wie man Fehler ausbügelt.

Letztlich musst du wissen, wie du deine Sachen organisierst. Für mich persönlich ist Git unverzichtbar, wenn es um Programmier-Arbeiten geht. Aber das erfordert halt auch wieder ein paar Kenntnisse darüber, wie man das verwendet. Das hängt also in erster Linie davon ab, ob du die Bereitschaft hast, dich damit auch noch zu befassen.

Ich denke nicht, dass bypassCache notwendig ist.

Wenn du browser.tabs.reload(); sowohl im if als auch im else verwendest, also tatsächlich immer, dann kannst du das aus diesem Konstrukt ganz herausziehen.

Sprich statt:

if (condition) {
    // other code…
    browser.tabs.reload();
}
else {
    // other code…
    browser.tabs.reload();
}

so:

if (condition) {
    // other code…
}
else {
    // other code…
}

browser.tabs.reload();

Zitat von Zitronella

Gibt es Nachteile wenn ich es nicht herausziehe aus dem Konstrukt? Für mich ist es als Laien übersichtlicher wenn es so wie ich oben postete 2x drin ist. Aber wenns falsch ist, und/oder irgendwelche Nachteile bringt dann mache ich es natürlich so wie du sagst.

Vom Code her macht es keinen Unterschied, nur von der Code-Qualität: Wir sprechen jetzt von einer einzelnen Zeile. Aber lass deinen Code wachsen und du hast plötzlich 15 Zeilen an dieser Stelle, die in beiden Fällen absolut identisch sind. Je mehr Code man dupliziert, desto unübersichtlicher und schwieriger zu warten wird es für dich.

Zitat von Zitronella

Wäre das dann so?

Korrekt.

Zitat von Zitronella

Weil wenn ich es eine Klammer vorher einfüge, lädt es nur nach else

Wäre es eine Klammer vorher, dann wäre es ja auch innerhalb des else-Blockes, deswegen würde es nur in dem Fall ausgeführt werden. Deswegen ist Code-Einrückung wichtig. Wenn sich öffnende und dazu passende schließende Klammer immer auf der gleichen Achse befinden, sieht man, was wozu gehört.