WebExtension.Fragen()

Hier geht es um Fragen und Probleme mit Themes und Erweiterungen für den Firefox.
EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

WebExtension.Fragen()

#1

Beitrag von EffPeh Themen-Starter » Mo, 14. Mai 2018 18:48

Wie ich schon in Sörens thread [PREVIEW] Enterprise Policy Generator geschrieben habe, beschäftige ich mich gerade mit meiner allerersten Extension.
Kurzer Umriss:
Die Extension erstellt eine Liste der Tabs und den kürzlich geschlossenen Tabs und zwar sowohl in der Sidebar als auch als PopUp (per Button-Aufruf).
Die erstellten Listeneinträge - also entsprechend den Tabs - können
- per linker Maustaste angewählt,
- per mittlerer Maustaste gelöscht,
- und per rechten Maustaste entladen und (in der Tabs-Leiste) verborgen werden.

Ich hänge die Extension mal gezippt an, damit man meine Problemchen nachvollziehen kann.
(Oder mir Tipps geben kann... :P )
extension.PNG
Kleiner Screenshot für alle, die sich das ZIP-File nicht herunterladen oder die Extension nicht installieren möchten:
Der Dateianhang extension.PNG existiert nicht mehr.
Soweit funktioniert das jedenfalls schon ganz gut.


Um die Liste zu aktualisieren, benutze ich entsprechende addListener, also

Code: Alles auswählen

browser.tabs.onRemoved.addListener( updateList );
und so weiter.
Aber genau der onRemoved.addListener macht mir bissel Probleme. Und eigentlich nur der.
Solange ich in der Liste selbst ein Tab entferne (mittlere Maustaste), ist alles schick.
Aber sobald ich ein Tab in der Tab-Leiste selbst lösche, wird der entsprechende Eintrag nicht sofort aus der Liste entfernt.
Erst nachdem sich die Liste durch eine andere Aktion wieder aktualisiert, ist auch der Eintrag verschwunden.
Ich könnte mir mit einer leichten Verzögerung durch setTimeout behelfen - das funktioniert. Aber ich denke, das kann es nicht sein und irgendwo mache ich einen Fehler.
Nur welchen? Lösungsvorschläge?


Banal, aber nervig: Ich habe in meiner popup.js vier Constanten jeweils Elemente aus popup.html zugewiesen.

Code: Alles auswählen

const createTab = document.getElementById( 'create-tab' );
Allerdings bekomme ich in der Konsole für genau diese eine Constante immer wieder diesen Fehler angezeigt:
TypeError: createTab is null
Was für mich völlig unverständlich und irritierend ist, denn das Element ist ja vorhanden und unterscheidet sich nicht von den anderen. Vor allem, weil es dann ja doch funktioniert, wie es soll. openOptions ist ebenfalls eine Constante und auch ein target eines addEventListener. Funktioniert ohne Fehleranzeige.
Auch ein Umbenennen von createTab hat nicht geholfen. Frage: Woran könnte dies liegen?


Ferner wird mir in der Konsole dieser Fehler vorgeworfen:
Sicherheitsfehler: Inhalt auf moz-extension://74cf95bb-dfe2-4c98-b098-9d37543c7c18/popup/popup.html darf chrome://mozapps/skin/extensions/extensionGeneric-16.svg nicht laden oder verlinken.
Direkt über meine Extension wird keine chrome-Grafik geladen. Ich könnte mir aber vorstellen, das diese Fehlermeldung mit dem Auslesen der Favicons-Adresse zu tun haben könnte.
Irgendjemand Ideen dazu?


Was als nächstes ansteht, sind Optionen. Fände ich nett. :)
Eine Optionsseite habe ich auch bereits angelegt und ich kann sie auch aufrufen.
Was mich nun interessiert: Welche Funktionen benötige ich bzw. sollte ich mir anschauen, um das zu realisieren.
Wie werden Optionen gespeichert? Wie rufe ich diese wieder ab? Usw.
Ich erwarte keine Komplett-Lösung, nur ein paar Anhaltspunkte, damit ich nicht völlig im Dunkel des MDN herumirre... :P
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

Re: WebExtension.Fragen()

#2

Beitrag von EffPeh Themen-Starter » Mo, 14. Mai 2018 18:57

Ging wohl verloren... :wink:
extension.zip
(40.15 KiB) 15-mal heruntergeladen
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Benutzeravatar
Speravir
Senior-Mitglied
Beiträge: 787
Registriert: Do, 15. Dez 2005 1:33
Wohnort: Potsdam

Re: WebExtension.Fragen()

#3

Beitrag von Speravir » Mo, 14. Mai 2018 19:05

EffPeh hat geschrieben:
Mo, 14. Mai 2018 18:57
Ging wohl verloren... :wink:
Bug in der genutzten phpBB-Version, vgl. Thead Probleme beim Hochladen von Bildern, besonders Sörens Antworten.
Steffen "Speravir"
---
Spiro, ergo sum.
Avatar: Vorlage Fox Head and Tail Tribal by Majykal-Melodi on DeviantArt, bearbeitet (Lizenz: CC by-sa 3.0)

Benutzeravatar
Sören Hentzschel
Administrator
Beiträge: 17956
Registriert: Mi, 23. Nov 2011 0:39
Wohnort: Salzburg
Kontaktdaten:

Re: WebExtension.Fragen()

#4

Beitrag von Sören Hentzschel » Mo, 14. Mai 2018 19:59

EffPeh hat geschrieben:
Mo, 14. Mai 2018 18:48
Die erstellten Listeneinträge - also entsprechend den Tabs - können
- per linker Maustaste angewählt,
- per mittlerer Maustaste gelöscht,
- und per rechten Maustaste entladen und (in der Tabs-Leiste) verborgen werden.
Eine alternative Bedienung wäre hilfreich - so etwas wie eine mittlere Maustaste existiert bei mir nicht. ;)

Ein weiteres Problem, welches mir aufgefallen ist: Unter "Kürzlich geschlossene Tabs" sind erwartungsgemäß die kürzlich geschlossenen Tabs zu finden. Schließe ich aber einen Tab und drücke dann Cmd + Shift + T, um den Tab wiederherzustellen, ist die Liste unter "Kürzlich geschlossene Tabs" plötzlich komplett leer.
EffPeh hat geschrieben:
Mo, 14. Mai 2018 18:48
Um die Liste zu aktualisieren, benutze ich entsprechende addListener, also

Code: Alles auswählen

browser.tabs.onRemoved.addListener( updateList );
und so weiter.
Aber genau der onRemoved.addListener macht mir bissel Probleme. Und eigentlich nur der.
Solange ich in der Liste selbst ein Tab entferne (mittlere Maustaste), ist alles schick.
Aber sobald ich ein Tab in der Tab-Leiste selbst lösche, wird der entsprechende Eintrag nicht sofort aus der Liste entfernt.
Erst nachdem sich die Liste durch eine andere Aktion wieder aktualisiert, ist auch der Eintrag verschwunden.
Ich könnte mir mit einer leichten Verzögerung durch setTimeout behelfen - das funktioniert. Aber ich denke, das kann es nicht sein und irgendwo mache ich einen Fehler.
Nur welchen? Lösungsvorschläge?
Das könnte https://bugzilla.mozilla.org/show_bug.cgi?id=1396758 sein - das Event wird abgefeuert, *bevor* die Aktion passiert. Insofern schätze ich, dass der Workaround mit dem Timeout das beste ist, was du momentan machen kannst.
EffPeh hat geschrieben:
Mo, 14. Mai 2018 18:48
Banal, aber nervig: Ich habe in meiner popup.js vier Constanten jeweils Elemente aus popup.html zugewiesen.

Code: Alles auswählen

const createTab = document.getElementById( 'create-tab' );
Allerdings bekomme ich in der Konsole für genau diese eine Constante immer wieder diesen Fehler angezeigt:
TypeError: createTab is null
Was für mich völlig unverständlich und irritierend ist, denn das Element ist ja vorhanden und unterscheidet sich nicht von den anderen. Vor allem, weil es dann ja doch funktioniert, wie es soll. openOptions ist ebenfalls eine Constante und auch ein target eines addEventListener. Funktioniert ohne Fehleranzeige.
Auch ein Umbenennen von createTab hat nicht geholfen. Frage: Woran könnte dies liegen?
Wann erhältst du den Fehler? Mir ist das jetzt noch nicht aufgefallen.
EffPeh hat geschrieben:
Mo, 14. Mai 2018 18:48
Ferner wird mir in der Konsole dieser Fehler vorgeworfen:
Sicherheitsfehler: Inhalt auf moz-extension://74cf95bb-dfe2-4c98-b098-9d37543c7c18/popup/popup.html darf chrome://mozapps/skin/extensions/extensionGeneric-16.svg nicht laden oder verlinken.
Direkt über meine Extension wird keine chrome-Grafik geladen. Ich könnte mir aber vorstellen, das diese Fehlermeldung mit dem Auslesen der Favicons-Adresse zu tun haben könnte.
Irgendjemand Ideen dazu?
Das lässt sich einfach prüfen: Erscheint der Fehler noch, wenn du den Teil mit den Favicons weglässt? ;)
EffPeh hat geschrieben:
Mo, 14. Mai 2018 18:48
Was als nächstes ansteht, sind Optionen. Fände ich nett. :)
Eine Optionsseite habe ich auch bereits angelegt und ich kann sie auch aufrufen.
Was mich nun interessiert: Welche Funktionen benötige ich bzw. sollte ich mir anschauen, um das zu realisieren.
Wie werden Optionen gespeichert? Wie rufe ich diese wieder ab? Usw.
Ich erwarte keine Komplett-Lösung, nur ein paar Anhaltspunkte, damit ich nicht völlig im Dunkel des MDN herumirre... :P
Üblicherweise verwendet man die browser.storage.local-API zum Speichern und Lesen von Optionen. Hier der Code für meine Erweiterung Bookmarks Organizer:

https://github.com/cadeyrn/bookmarks-or ... options.js

Hier werden im Script die Optionen genutzt:

https://github.com/cadeyrn/bookmarks-or ... #L384-L387


Relaunch Q3|2018 ;)

Migo
Mitglied
Beiträge: 119
Registriert: Mi, 25. Aug 2010 9:12

Re: WebExtension.Fragen()

#5

Beitrag von Migo » Mo, 14. Mai 2018 20:02

Hi EffPeh,

auch wenn ich Dir leider nicht helfen kann... so möchte ich Dich doch voll unterstützen Deine "TabsListe" weiterzuentwickeln und asap dann auch zu veröffentlichen - nach Fehlerbereinigung!!

Ich suche immer nach guten Tabs-WebExtensions - Deine kann echt ein Favorit von mir werden (Tab-PopUpliste sollte schließen beim Öffnen des ausgesuchten Tabs).

Weiter so!!

Gruß,
Migo

EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

Re: WebExtension.Fragen()

#6

Beitrag von EffPeh Themen-Starter » Mo, 14. Mai 2018 21:08

Ich danke euch für das Feedback. :)
Sören Hentzschel hat geschrieben:
Mo, 14. Mai 2018 19:59
Eine alternative Bedienung wäre hilfreich - so etwas wie eine mittlere Maustaste existiert bei mir nicht. ;)
Ja, ich habe gehört, das es solche Mäuschen geben soll. :P
Gut, dass da oben in der Leiste noch Platz für weitere Funktionen ist. ;)
Oder vielleicht doch so ein kleines PopUp-Menü mit Funktionsicons? Hm...
Sören Hentzschel hat geschrieben:
Mo, 14. Mai 2018 19:59
Ein weiteres Problem, welches mir aufgefallen ist: Unter "Kürzlich geschlossene Tabs" sind erwartungsgemäß die kürzlich geschlossenen Tabs zu finden. Schließe ich aber einen Tab und drücke dann Cmd + Shift + T, um den Tab wiederherzustellen, ist die Liste unter "Kürzlich geschlossene Tabs" plötzlich komplett leer.
Kann ich hier jetzt nicht nachvollziehen, alles gut. Habe ich bisher nicht beobachtet. Aber ich sitze hier vor einem Windows.
Ich werde es auf jeden im Auge behalten.
Sören Hentzschel hat geschrieben:
Mo, 14. Mai 2018 19:59
Das könnte https://bugzilla.mozilla.org/show_bug.cgi?id=1396758 sein - das Event wird abgefeuert, *bevor* die Aktion passiert. Insofern schätze ich, dass der Workaround mit dem Timeout das beste ist, was du momentan machen kannst.
Ja, das klingt genau nach dem, was mich stört.
Okay, dann doch mit dem Workaround. In der Praxis merkt man die Verzögerung eh kaum.
Sören Hentzschel hat geschrieben:
Mo, 14. Mai 2018 19:59
Wann erhältst du den Fehler? Mir ist das jetzt noch nicht aufgefallen.
Direkt nach dem Laden. Es ist auch immer nur diese eine Constante. :-??
Sören Hentzschel hat geschrieben:
Mo, 14. Mai 2018 19:59
Das lässt sich einfach prüfen: Erscheint der Fehler noch, wenn du den Teil mit den Favicons weglässt?
Öhm, ja, hätte ich auch selbst drauf kommen können, nüch... :roll:
Auf jeden auch ein Dankeschön für die Links. Das gibt mir wieder einiges zu denken... :P
async? What is it goody for? I'll think about... :D
Migo hat geschrieben:
Mo, 14. Mai 2018 20:02
[...]Tab-PopUpliste sollte schließen beim Öffnen des ausgesuchten Tabs)[...]
Ja, schauen wir mal... ;)
Ist zwar mein Erstlingswerk, aber ich denke schon, das ich es dann veröffentliche.
Das kann aber noch bissel dauern, weil ich noch ein paar Ideen habe und auch viel ausprobiere.
Dein Post hat mir übrigens schon geholfen, denn die Anmerkung mit dem Schliessen des PopUps ist eine weitere Frage, - die mir aber wieder entfallen war - , auf die ich noch keine Antwort habe.
Das nervt nämlich schon ein wenig, wenn es nicht von selbst schliesst bzw. erst, wenn es den Fokus verliert.
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Benutzeravatar
Sören Hentzschel
Administrator
Beiträge: 17956
Registriert: Mi, 23. Nov 2011 0:39
Wohnort: Salzburg
Kontaktdaten:

Re: WebExtension.Fragen()

#7

Beitrag von Sören Hentzschel » Mo, 14. Mai 2018 23:43

EffPeh hat geschrieben:
Mo, 14. Mai 2018 21:08
Ja, ich habe gehört, das es solche Mäuschen geben soll. :P
Ich besitze überhaupt keine Maus. ;)
EffPeh hat geschrieben:
Mo, 14. Mai 2018 21:08
async? What is it goody for? I'll think about... :D
Das "async" ist die Voraussetzung dafür, dass "await" in der Methode zur Verfügung steht. Das ist der moderne Weg, asynchrones JavaScript zu schreiben. Die Art, wie man JavaScript entwickelt, hat sich in den letzten Jahren verändert. Früher war alles sehr Callback-lastig. Dann wurden Promises eingeführt und damit das sogenannte Method Chaining mit den ganzen .then() und .catch()-Blöcken. Der aktuelle Stand ist die Verwendung von async/await, was uns EcmaScript 2017 gebracht hat. Das spart einem die blöde Verschachtelung von Code.

Mal ein gekürztes und vereinfachtes Beispiel aus dem Bookmarks Organizer. Alter Code:

Code: Alles auswählen

function handleResponse (response) {
  browser.bookmarks.update(response.bookmarkId, { }).then(() => {
    // irgendwelcher Code, der ausgeführt wird, wenn browser.bookmarks.update() ein Ergebnis geliefert hat
  });
}
Neuer Code:

Code: Alles auswählen

async function handleResponse (response) {
  await browser.bookmarks.update(response.bookmarkId, { });
  // irgendwelcher Code, der ausgeführt wird, wenn browser.bookmarks.update() ein Ergebnis geliefert hat
}


Relaunch Q3|2018 ;)

EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

Re: WebExtension.Fragen()

#8

Beitrag von EffPeh Themen-Starter » Di, 15. Mai 2018 11:57

Dankeschön für die Erklärung, Sören. :)
Ich merke schon: ich bin so was von oldskool... :P
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Benutzeravatar
Sören Hentzschel
Administrator
Beiträge: 17956
Registriert: Mi, 23. Nov 2011 0:39
Wohnort: Salzburg
Kontaktdaten:

Re: WebExtension.Fragen()

#9

Beitrag von Sören Hentzschel » Mi, 16. Mai 2018 10:48

Gibt es eigentlich ein GitHub-Repository, um sich Fortschritte am Code ansehen zu können? ;)


Relaunch Q3|2018 ;)

EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

Re: WebExtension.Fragen()

#10

Beitrag von EffPeh Themen-Starter » Mi, 16. Mai 2018 11:15

Sören Hentzschel hat geschrieben:
Mi, 16. Mai 2018 10:48
Gibt es eigentlich ein GitHub-Repository, um sich Fortschritte am Code ansehen zu können? ;)
Öööhm - Nö. :P
Ich hatte da zwar mal vor vielen Jahren einen Account - ich glaube, wegen einem jQuery-Plugin, das ich gescriptet hatte - aber da kenne ich die Zugangsdaten nicht mehr. Ich kenne mich aber eh mit GitHub nicht aus.
Ich will ja auch keine Wissenschaft aus der Sache machen. :)

Gestern habe ich mir die async/await-Sache angeschaut. So richtig verstanden habe ich das immer noch nicht. Glaube ich. Aber ich habe mich stark an deinem Script orientiert und erfolgreich meine options.js (mit momentan nur einer Einstellung zum Testen) angelegt. :P

Ausserdem habe ich mein popup.js nochmal komplett überarbeitet und das so angelegt wie ich es bei dir gesehen habe.
Und ich habe chrome-Seiten beim Ermitteln der Favicons ausgeschlossen. Bisher kam diese Fehlermeldung auch nicht mehr. ;)

Ich hänge die aktuelle Version mal an. :)
extension.zip
(10.96 KiB) 7-mal heruntergeladen
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Benutzeravatar
Sören Hentzschel
Administrator
Beiträge: 17956
Registriert: Mi, 23. Nov 2011 0:39
Wohnort: Salzburg
Kontaktdaten:

Re: WebExtension.Fragen()

#11

Beitrag von Sören Hentzschel » Mi, 16. Mai 2018 11:23

Testen kann ich erst zuhause.
EffPeh hat geschrieben:
Mi, 16. Mai 2018 11:15
Gestern habe ich mir die async/await-Sache angeschaut. So richtig verstanden habe ich das immer noch nicht.
Ist eigentlich ganz einfach, wenn man die ganze Theorie weglässt und direkt mit einem Beispiel arbeitet. ;)

Code: Alles auswählen

function foo() {
  method1();
  method2();
}
Angenommen, method1() braucht fünf Sekunden, bis sie ein Ergebnis liefert. Die Funktion method2() wird direkt nach dem Start von method()1 ausgeführt, bevor das Ergebnis von method1() da ist. Wenn method2() nun vom Ergebnis von method1() abhängt, hast du ein Problem, weil das Ergebnis noch nicht da ist.

Nun bauen wir den Code so um:

Code: Alles auswählen

async function foo() {
  await method1();
  method2();
}
Jetzt stoppt das Script bei method1(), bis das Ergebnis da ist. Erst nach diesen fünf Sekunden, die method1() benötigt, geht es mit der Ausführung von method2() weiter. Damit ist garantiert, dass method2() mit dem Ergebnis von method1() arbeiten kann.


Relaunch Q3|2018 ;)

EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

Re: WebExtension.Fragen()

#12

Beitrag von EffPeh Themen-Starter » Mi, 16. Mai 2018 12:10

Na, dann bin ich ja doch noch lernfähig. Zumindest halbwegs. :P
So habe ich mir gestern dann - nach der async-Lektüre bei MDN - auch die entsprechende Funktion in der option.js erklärt.
Wobei ich da auch erst einmal kapieren musste, dass du dort für storage Defaultwerte vorgibst. Ist natürlich echt praktisch. So findet man das aber nicht in den storage-Beispielen auf MDN.
Das ist mein grosses Problem mit MDN. Es gibt zwar Beispiele, aber die sind oft abstrakt und theoretisch. Die Beispiele funktionieren. Aber in der Praxis und in der Anwendung stellen sich dann oft Fragen, zumindest für mich als Autodidakten. Das ging mir mit async dort auch so. Zumal Promise auch Neuland für mich ist. :)
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Benutzeravatar
Sören Hentzschel
Administrator
Beiträge: 17956
Registriert: Mi, 23. Nov 2011 0:39
Wohnort: Salzburg
Kontaktdaten:

Re: WebExtension.Fragen()

#13

Beitrag von Sören Hentzschel » Mi, 16. Mai 2018 12:15

Im MDN ist auch ein Beispiel dazu. ;)

https://developer.mozilla.org/en-US/Add ... geArea/get
unter dem Text "With an object with object names as keys and the default value as value:".


Relaunch Q3|2018 ;)

EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

Re: WebExtension.Fragen()

#14

Beitrag von EffPeh Themen-Starter » Mi, 16. Mai 2018 12:25

Ups. Da habe ich wohl nicht aufgepasst. :roll:
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

Re: WebExtension.Fragen()

#15

Beitrag von EffPeh Themen-Starter » Do, 17. Mai 2018 0:02

Die maximale Anzahl der kürzliche geschlossenen Tabs wird von browser.sessionstore.max_tabs_undo bestimmt.
Das lässt sich durch eine Webextension wohl nicht überschreiben?
Lässt sich der Wert des Schalters per Script ermitteln? :)
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Antworten

Wer ist online?

Mitglieder in diesem Forum: Glanni, grünerfuchs und 3 Gäste