10 Dinge, die sie Ihnen in der Firefox Extension School nie erzählen

Dies ist ein Follow-up-Artikel in meinem jüngsten eBook, erstellen Sie Ihre eigene Firefox-Erweiterung-eine zusätzliche Auswahl nützlicher Tipps, Tricks und Hacks, die ich aus meiner Erfahrung mit dem Erstellen von Erweiterungen für Firefox, einschließlich Codeburner, der SitePoint-Referenzerweiterung, gesammelt habe. Grundlegendes Wissen über das Erstellen einer Firefox -Erweiterung wird angenommen, sodass Sie zuerst Ihre KOSTENLOSE Kopie des E -Books erfassen möchten, wenn Sie dies noch tun.

Das meiste, was hier hier ist, ist im Mozilla Developer Center (MDC) nicht explizit dokumentiert, entweder weil es immer noch auf ihrer "To -Do" -Liste steht, oder weil ich es selbst erstellt habe. Einiges davon ist gut dokumentiert, aber es ist so nützlich, dass ich dachte, es lohnt sich trotzdem. Funktionen auf oberster Ebene (mit dem Schlüsselwort für Funktion). In der Praxis sollten Sie sie jedoch als Methoden Ihres Hauptweiterungsobjekts erstellen.

Key Takeaways

Verwenden Sie das "Listen-Stil-Image" zum Hinzufügen von Symbolen zu XUL-Elementen wie ``, `

` und `

` Da viele nicht `Hintergrund-Image" unterstützen.

• Machen Sie `` Elemente in Firefox für Mac OS X-Tastaturzugriff durch Hinzufügen eines `tabindex =“ 0 ″ ``, um die Navigation mithilfe von Pfeiltasten zu aktivieren. Zugriff auf das ursprüngliche Mausziel eines Kontextmenüereignisses in Firefox mit der Eigenschaft `popupnode`, die die Interaktion innerhalb der benutzerdefinierten Kontextmenüs vereinfacht.
• Verhindern Sie eine unerwünschte Vererbung des "Flex` -Attributs" in XUL -Layouts durch Verwendung eines Zwischen -Wrapper -Elements ohne "Flex" -attribut, um eine genauere Kontrolle über die Größe des untergeordneten Elements zu gewährleisten. Implementieren Sie plattformspezifische Stilblätter in Firefox-Erweiterungen, um verschiedene UI-Konventionen über Windows, Linux und Mac OS X zu berücksichtigen und die Benutzererfahrung durch Einhaltung nativer Schnittstellenstandards zu verbessern.
1. Fügen Sie Symbole mit Listen-Im-Image
Viele XUL-Elemente für die CSS-Hintergrund-Image-Eigenschaft ohne Unterstützung hinzu, aber viele von ihnen
• do
Support List-Stil-Image. Dies schließt , und ein. Sie können diese zum Hinzufügen des Symbols Ihrer Anwendung zu seinem Hauptmenüelement verwenden oder ein kleines Vergrößerungs -Glas -Symbol zu einem Textfeld für die Suche anstellen:

2. Machen Sie Elemente Tastaturen in Mac OS X

Sobald dies erledigt ist

3. Verweisen Sie auf das ursprüngliche Mausziel eines Kontextmenüereignisses

Wenn Sie in einem XUL-Kontextmenü auf ein Element klicken, ist die Ereigniszielreferenz auf die , auf die Sie geklickt haben. Aber was ist, wenn Sie einen Verweis auf das ursprüngliche Zielelement wünschen? Das heißt, das Element, auf das Sie mit der rechten Maustaste geklickt haben, um das Menü überhaupt zu erzeugen?
Dies ist unglaublich einfach, da Firefox eine Eigenschaft bietet, die genau diese Referenz enthält. Es heißt Popupnode und ist eine Eigenschaft des Dokuments. Der einfachste Weg, es zu verwenden, besteht darin, es durch das Befehlsereignis des Menüelements zu gelangen:

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

4. Das Verhindern eines Elements, Flex

zu erben, wenn Sie das Flex -Attribut zu den meisten XUL -Elementen hinzufügen, werden sie erweitert, um den verfügbaren Speicherplatz zu füllen. Aber Flex wird vererbt, daher werden seine Kinder auch erweitern, was in einigen Fällen sehr unerwünscht ist. Wenn das untergeordnete Element beispielsweise ein ist, möchten Sie, dass es genaue Dimensionen hat. Es gibt jedoch keine Möglichkeit, den geerbten Flex explizit zu negieren. Spawn einen Dialog aus dem Chrom-Lastereignis

Wenn Sie das Fenster verwenden. Operieren Sie, um einen Dialog mit den Modal- und Centorscreen-Funktionen aus dem Chrom-Last-Ereignis zu leiten Dies liegt daran, dass der Dialog vor der festgelegten Größe des Fensters positioniert ist, sodass die Immobilie des Zentrens nicht wie erwartet funktioniert. Das gleiche Problem tritt bei der Warnungsfunktion auf, die ein Problem sein kann, wenn Sie es als schnelles und schmutziges Debugging -Tool verwenden. Dies stellt sicher, dass das Hauptfenster vor dem Dialogfeldgröße dimensioniert ist. Daher wird es richtig positioniert:

6. Fügen Sie benutzerdefinierte Dialog -Symbole für Windows und Linux

<tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:

hinzu, um einem Dialogfeld ein benutzerdefiniertes Symbol hinzuzufügen. Erstellen Sie zunächst einen Ordner mit dem Namen "Icons im Chrome -Verzeichnis Ihrer Erweiterung". Erstellen Sie dann im Ordner der Symbole einen weiteren Ordner mit dem Namen Standard. Speichern Sie im Standardordner ein Symbol mit demselben Namen wie die ID

-Elements. In der MDC-Dokumentation werden XPM-Bilder für Linux verwendet, aber es fehlt ihnen keine Unterstützung für die Transparenz von Alpha-Kanal. PNG -Dateien bieten Unterstützung und sie funktionieren ebenfalls.

In Windows wird das Symbol auch in der Taskleiste angezeigt:

Ein benutzerdefiniertes Dialog -Symbol in Windows XP

<tab label="About" tabindex="0"/>

Dies unterscheidet sich zu Mac OS X, da die Dialoge ohne Symbole angezeigt werden.

7. Erhalten Sie einen Verweis auf das zuletzt geöffnete Fenster

Sie können die Fenstermediator -Schnittstelle von Firefox verwenden, um einen Verweis auf das zuletzt geöffnete Browserfenster zu erhalten. Dies ist möglicherweise nützlich, wenn Sie einen Weblink aus einem externen Dialogfeld öffnen möchten und zuverlässiger als Windows.opener. Holen Sie sich die URL jeder offenen Registerkarte

Aus dem vorherigen Tipp können wir alle aktuell Browserfenster öffnen, ihre URLs extrahieren und in ein hierarchisches Array verpacken (zuerst nach Fenster gruppiert, dann nach Registerkarte). Jedes Mitglied der endgültigen Matrix ist selbst ein Array, das die URL der Registerkarte und ein boolescher Flag (ausgewählt) enthält, um anzuzeigen, ob es sich um die aktuell ausgewählte Registerkarte in diesem Fenster handelt:

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

9. Lassen Sie Ihre Schnittstelle auf Fensterfokus ändert

Die meisten Mac-Fenster ändern ihr Erscheinungsbild, wenn das Fenster den Fokus verliert: hellere Hintergründe, Fensterdekorationen oder graute Schaltflächen beispielsweise. Um diesen Effekt auf Ihre eigenen Schnittstellensteuerungen zu implementieren, müssen Sie wissen, wann das Fenster gewinnt und den Fokus verliert. Wenn sich der Anwendungsfokus beispielsweise in einem Dokument in einem eingebetteten in das Hauptfenster -Blur -Ereignis bewegt, wird das Fenster immer noch das fokussierte. Dies liegt daran, dass das -Element selbst nicht mehr den Anwendungsfokus hat. Obwohl dieses Verhalten logisch ist, kann es auch unerwartet sein. Die gute Nachricht ist, dass das Hauptfenster von Firefox über ein aktives Attribut verfügt, das sich von treu zu "" (einer leeren Zeichenfolge) ändert, wenn das Fenster wirklich den Fokus verliert. Sie können dieses Attribut mit einem Dom -Mutation -Ereignis -Hörer ansehen und es als Auslöser für alles verwenden, was Sie tun müssen:

Achten Sie darauf, wie Sie dies verwenden. Wenn Sie es beispielsweise verwendet haben, um einen modalen Dialog wie Alarm auszulösen, würde die Wirkung des Laichen des Dialogs dazu führen, dass das Fenster den Fokus verliert. Wenn Sie es abweisen, würde Sie den Fokus wiedererlangen, der den Dialog erneut ausströscht! Zum Beispiel um ein Symbol zwischen seinen normalen und behinderten Zuständen zu wechseln:

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

10. Implementieren Sie plattformspezifische Stilblätter

Firefox ist auf mehreren Plattformen verfügbar, und jeder dieser hat seine eigenen Konventionen in Bezug auf das Erscheinungsbild und sogar die Platzierung von Schnittstellenkomponenten. Ein gutes Beispiel hierfür sind die Tasten OK und Abbrechen in einem Alarmdialog: Unter Windows und Linux befindet sich die OK -Taste links neben der Abbrechen -Taste, während es unter Mac OS umgekehrt ist. Das Erscheinungsbild der Schließ- und Minimierung der Fensterschaltflächen ist eine weitere Instanz, da sie sich für jede Plattform unterscheiden. Auf diese Weise können Sie Variationen wie alternative Symbole für Schaltflächen, verschiedene Schriftarten für benutzerdefinierte Schnittstellensteuerungen usw. implementieren. Der Plattformordner der obersten Ebene im folgenden Diagramm sollte in den Root-Ordner Ihrer Erweiterung auf dem gleichen Niveau wie der Chromordner gehen. Alle Ordneramen und Dateinamen müssen genau wie hier gezeigt sein (sie sind auch Fallempfindlichkeit), mit Ausnahme des Namens des Stylesheets selbst. Dies kann alles sein, was Sie mögen, aber natürlich muss es für die Kopie jeder Plattform gleich sein. Jedes dieser Chrome.manifest-Dateien sollte diese identische Registerkartenzeile enthalten (ersetzen Sie „myextension“ durch den Namen Ihrer Erweiterung):

Um die Stilblätter zu Ihrer Schnittstelle hinzuzufügen, fügen Sie einfach einen XML-Stylheet-Verarbeitungsanweis mit dem folgenden URL-Muster hinzu:

Sehen Sie, wie alles, was Sie tun müssen, auf das Hautverzeichnis verweisen, und Firefox wird herausfinden, welcher spezifische Stileblatt zum Einbeziehung der Plattform, auf der sie läuft. Sie können das Prinzip mit so vielen verschiedenen Stilblättern erweitern, wie Sie möchten: Erstellen Sie einfach eine Version in den einzelnen Plattformordnern und fügen Sie sie dann mit demselben URL -Muster einem XUL -Dokument hinzu.

11. Fügen Sie der Geschichte des Browsers eine URL hinzu Hier finden Sie einen zusätzlichen Bonuspipp. In der XUL-Referenz bei MDC werden Sie mitgeteilt, wie Sie ein Textfeld mit automatischer Vervollständigung erstellen. Leider kann es Ihnen nicht sagen, wie Sie der Geschichte neue URLs hinzufügen können. Daher musste ich dies auf die harte Tour ausarbeiten, indem ich den Quellcode von Firefox durch den Quellcode von Firefox schleppt. Die Methode, die ich hier zeigen werde, fügt URLs hinzu, holt Favicons ab und rettet und enthält die grundlegende Geschichte, die automatisch in das Schnäppchen ist!

Ein Textfeld mit automatisch-komplettem Menü, das die Einträge zeigt, die wir programmatisch hinzugefügt haben. Im folgenden Code-Beispiel kann der Funktionsname addurltoHistory alles sein, was Sie wollen, und das Flex-Attribut ist optional, aber alles andere muss genau wie gezeigt sein:

Der Typ und die automatischen Vervollständigungsprüfungen sind das, was das primäre automatische Verhalten auslöst. Das ordnungsgemäße Attribut fürLectedIndex ist so, dass bei der Auswahl eines Elements aus dem Menü automatisch ein Element ausgewählt wird, der Wert automatisch in das Textfeld geschrieben wird. Auf diese Weise können Sie die Eingabetaste sofort drücken, um die Befehlsfunktion zu feuern. Das Newlines -Attribut ist einfach so, dass wir vermeiden können, den Wert von unerwünschtem Whitespace (wie Leit- oder Hinterräume) manuell zu analysieren. Das liegt daran, dass dem Element ein On -Command -Ereignis fehlt. Die Ereignisse, die normalerweise dafür verwendet werden, sind auf dem Einsatz (abgefeuert, wenn der angezeigbare Text eingegeben wird) und onchange (abgefeuert, wenn sich der Wert ändert). Da sich der Wert häufig als Reaktion auf automatische Vorschläge ändert, von denen die meisten unerwünschten Werte sind, verschieben wir die Befehlsaktion, bis die Eingabetaste gedrückt wird. Sie können Text eingeben oder in das Textfeld einfügen, und ein Dropdown-Menü wird mit Ihrem Verlauf angezeigt, der gemäß den Eingängen gefiltert wird. Sie können dann aus diesem Menü auswählen, und Ihre Auswahl wird in das Textfeld geschrieben. In der Praxis würden Sie danach eine weitere Aufgabe ausführen (z. B. das Laden der angegebenen URL in einen ), aber ich werde mich nur darauf konzentrieren, wie man sie der Geschichte hinzufügt. Ich zeige Ihnen zuerst den Code und gehe dann Stück für Stück durch:

In erster Linie führen wir ein wenig Validierung durch und fügen ein Protokoll hinzu, wenn die URL ohne einen ist (so dass der Benutzer einfach „www“ eingeben kann) und dann die [modifizierte] URL zurück zum Textfeld schreibt. Wenn es dann irgendwelche Leerzeichen oder mehrere Punkte als in CGI -Parametern enthält, werfen wir eine Warnung über die missgebildete Syntax und beenden die Funktion. Dies ist die gesamte Validierung, die wir wirklich brauchen, um Firefox vom Ersticken zu verhindern. Möglicherweise bevorzugen Sie den Fehler anmutiger, indem Sie den Fehler in die Konsole werfen oder eine benutzerdefinierte Methode implementieren, um den Benutzer darüber aufmerksam zu machen, dass ein Fehler aufgetreten ist.

Als nächstes machen wir das Geschäft, das die URL der Geschichte tatsächlich hinzufügt. Der History -Service akzeptiert keine einfache URI -Zeichenfolge, daher müssen wir sogenannte IURI erstellen. Dies ist ein URI -Objekt, das eine Vielzahl von Metadaten enthält, einschließlich seines Gastgebers, das später nützlich sein wird. Wir erstellen das IURI -Objekt mit dem IO -Dienst und übergeben dies dann an den Global History -Service, um es in die Geschichte des Browsers hinzuzufügen. Erstens, so dass ein Fehler nicht geworfen wird, wenn das Favicon aus irgendeinem Grund nicht an der erwarteten URL liegt, und zweitens, weil er nur in Firefox 3.5 oder später funktioniert. Also initialisieren wir zuerst den Favicon -Dienst und erstellen dann ein IURI -Objekt für die Adresse des Favicon (unter Verwendung des Hostnamens vom ursprünglichen IURI). Wir übergeben dann das Favicon Iuri -Objekt an den Favicon -Dienst, um das Favicon zu laden und zu retten.

Und da haben wir es! Wenn wir das nächste Mal dieselbe Adresse in das Textfeld eingeben, wird es zusammen mit dem Favicon im automatischen Menü angezeigt.

Beachten Sie, dass der Favicon-Prozess asynchron ist. Wenn Sie es sofort im Textfeld anzeigen möchten, müssen Sie eine SetInterval -Schleife ausführen, um kontinuierlich zu überprüfen, ob es noch existiert. Sie können dies mit einem solchen Code tun:

Dieser Code ist etwas schwierig: Alle 500 Millisekunden (der zweite Parameter für SetInterval), wir fragen den Favicon -Service für das Favicon der Seite. Es wird eine URI-Formatierung zurückgeben, die entweder mit dem Moz-Anno: Favicon: Protokoll (wenn das Favicon heruntergeladen wurde) oder mit dem Chrom: Protokoll (wenn es das Standardbild zurückgibt) oder mit dem Chrom: Protokoll) zurückgegeben wird. Wenn wir 20 Mal versucht haben (insgesamt 10 Sekunden) oder wenn wir ein Favicon für die Seite erfolgreich heruntergeladen haben-wie von Moz-Anno: Favicon: Im URI angegeben-, setzen wir es als Listen-im-Image-URL für das Textfeld. Wenn Sie dies noch nicht getan haben, laden Sie mein E -Book -Erstellen Sie Ihre eigene Firefox -Erweiterung herunter, die mit der Codeburner -Erweiterung kostenlos ausgestattet ist.

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

Achten Sie auf einen weiteren Artikel über den Aufbau von Firefox -Erweiterungen sowie einige neue Ergänzungen für die Codeburner -Familie, die bald kommen!

häufig gestellte Fragen (FAQs) zu Firefox -Erweiterungen

Wie kann ich Firefox -Erweiterungen installieren?

Die Installation von Firefox -Erweiterungen ist ein einfacher Prozess. Öffnen Sie zunächst Ihren Firefox -Browser und klicken Sie auf die Menüschaltfläche, die in der oberen rechten Ecke durch drei horizontale Linien dargestellt wird. Wählen Sie im Dropdown-Menü "Add-Ons". Dadurch wird die Registerkarte "Add-Ons Manager" geöffnet. Geben Sie in der Suchleiste den Namen der Erweiterung ein, die Sie installieren möchten, und drücken Sie die Eingabetaste. Klicken Sie neben der Erweiterung, die Sie installieren möchten, auf die Schaltfläche "Zu Firefox hinzufügen". Ein Pop-up erscheint um die Erlaubnis, die Erweiterung hinzuzufügen. Klicken Sie auf "Hinzufügen" und die Erweiterung wird installiert.

Warum funktionieren meine Firefox -Erweiterungen nicht? Es könnte auf eine veraltete Version von Firefox, Konflikten mit anderen Erweiterungen oder auf Probleme mit der Erweiterung selbst zurückzuführen sein. Versuchen Sie, Firefox auf die neueste Version zu aktualisieren, andere Erweiterungen zu deaktivieren, um Konflikte zu überprüfen oder die problematische Erweiterung neu zu installieren. Wenn das Problem weiterhin besteht, wenden Sie sich an den Erweiterungsentwickler, um Unterstützung zu erhalten.

Wie kann ich meine Firefox-Erweiterungen verwalten? Dadurch wird die Registerkarte "Add-Ons Manager" geöffnet. Hier können Sie Erweiterungen aktivieren oder deaktivieren, Erweiterungen entfernen oder auf die Optionen für jede Erweiterung zugreifen.

Können Firefox -Erweiterungen meinen Browser verlangsamen? Jede Erweiterung verwendet eine gewisse Menge an Systemressourcen, und zu viele können Ihren Browser verlangsamen. Wenn Sie bemerken, dass Ihr Browser langsam läuft, deaktivieren Sie einige Erweiterungen, um festzustellen, ob sich er verbessert. Wie bei jeder Software können sie jedoch möglicherweise von böswilligen Schauspielern ausgenutzt werden. Um Ihre Sicherheit zu gewährleisten, installieren Sie nur Erweiterungen aus vertrauenswürdigen Quellen, halten Sie Ihre Erweiterungen auf dem neuesten Stand und überprüfen Sie regelmäßig die Berechtigungen, die Ihre Erweiterungen haben.

Wie kann ich meine Firefox -Erweiterungen aktualisieren? Sie können jedoch auch manuell nach Updates überprüfen, indem Sie das Firefox-Menü öffnen, "Add-Ons" auswählen und dann auf das Zahnradsymbol klicken und "nach Updates’ auswählen ".

Kann ich Firefox-Erweiterungen auf Mobilgeräten verwenden. Um zu überprüfen, ob eine Erweiterung für Mobilgeräte verfügbar ist, besuchen Sie die Seite der Erweiterung auf der Firefox-Add-On-Website und suchen Sie nach dem Label „verfügbar für Android“.

Wie kann ich meine eigene Firefox-Erweiterung entwickeln? Mozilla bietet einen umfassenden Leitfaden zur Entwicklung von Firefox -Erweiterungen auf ihrer Entwicklerwebsite.

Was sind die besten Firefox -Erweiterungen? Einige beliebte Erweiterungen umfassen Ublock -Ursprung für die Anzeigenblockierung, die LastPass für die Kennwortverwaltung und den Dunklen Leser für den Dunklen Modus.

Kann ich Chromverlängerungen auf Firefox verwenden? Allerdings funktionieren nicht alle Chromverlängerungen auf Firefox, da die beiden Browser mit Erweiterungen umgehen.

Das obige ist der detaillierte Inhalt von10 Dinge, die sie Ihnen in der Firefox Extension School nie erzählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!