So erstellen Sie eine Schaltfläche in der Firefox-Navigationssymbolleiste und fügen sie hinzu [Anleitung]

Heute bringen wir eine Firefox-Anleitung dazuJeder kann folgen, um eine benutzerdefinierte Schaltfläche in der Navigationssymbolleiste zu erstellen. Neben den sichtbaren Schaltflächen in der Navigationssymbolleiste gibt es in Firefox eine Liste weiterer Schaltflächen mit unterschiedlichen Funktionen, die an einer beliebigen Stelle in der Symbolleiste hinzugefügt und an Ihre Bedürfnisse angepasst werden können. Da die Position und das Verhalten der Schaltfläche geändert werden können, ohne dass zusätzliche Kenntnisse erforderlich sind, kann auf einfache Weise eine neue Erweiterung erstellt werden, die sich wie angewiesen verhält, sich an einer definierten Position befindet und in hohem Maße anpassbar ist. In diesem Beitrag erfahren Sie, wie Sie eine einfache Erweiterung erstellen - eine Symbolleistenschaltfläche, die eine einfache Funktionalität bietet.

Zuerst müssen Sie es herausfinden Erweiterungen Ordner (einer, der sich im Ordner Firefox-Profile befindet). Benutzer von Windows 7 und Windows Vista finden diesen Ordner hier.

Wenn Sie jedoch Windows XP verwenden, geben Sie ein %Anwendungsdaten% in der Windows-Konsole ausführen und die Eingabetaste drücken.

Sobald die Erweiterungen Ordner geöffnet ist, erstellen Sie einen neuen Ordner mit dem Namen [email protected] drin.

Öffnen Sie den neu erstellten Ordner und erstellen Sie ein neues Verzeichnis Chrom, zusammen mit zwei Dateien - chrome.manifest und install.rdf. Jetzt werden wir diese Dateien im Texteditor bearbeiten. Wir gehen davon aus, dass Sie einen beliebigen Editor mit UTF-8-Unterstützung verwenden, z. B. Windows-Editor.

Erstens öffnen chrome.manifest Datei und füge folgende Codezeilen ein init. Der unten angegebene Code funktioniert auch für Thunderbird Mail-, Compose- und Adressbuchfenster sowie für Sunbird. Wenn Sie die Schaltfläche jedoch nur in Firefox verwenden müssen, können Codezeilen für Thunderbird und Sunbird ausgeschlossen werden.

content custombutton chrome/
style chrome://global/content/customizeToolbar.xul chrome://custombutton/content/button.css
# Firefox
overlay    chrome://browser/content/browser.xul chrome://custombutton/content/button.xul
# Thunderbird mail
overlay    chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul
# Thunderbird compose
overlay    chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul
# Thunderbird address book
overlay    chrome://messenger/content/addressbook/addressbook.xul chrome://custombutton/content/button.xul
# Sunbird
overlay    chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul

Schließen Sie den Code nach dem Einfügen in die Datei, nachdem Sie die Änderungen gespeichert haben. Bearbeiten Sie jetzt install.rdf Datei, müssen Sie folgende Codezeilen einfügendrin. Sie können die allgemeine Beschreibung der Schaltfläche ändern. Der Text kann in den Zeilen 6, 7 und 8 des Codes hinzugefügt werden (muss in doppelte Anführungszeichen eingeschlossen sein). Sie können den Namen der Schaltfläche, den beschreibenden Text und den Namen des Erstellers eingeben.

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest"
em:name="AT"
em:description="AddictiveTips"
em:creator="Usman"
em:id="[email protected]"
em:version="1.0"
em:homepageURL="http://developer.mozilla.org/en/docs/Custom_Toolbar_Button"
em:iconURL="chrome://custombutton/content/icon.jpg" >
<em:targetApplication><!-- Firefox -->
<Description
em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
em:minVersion="1.4"
em:maxVersion="99" />
</em:targetApplication>
<em:targetApplication><!-- Thunderbird -->
<Description
em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}"
em:minVersion="1.4"
em:maxVersion="99" />
</em:targetApplication>
<em:targetApplication><!-- Sunbird -->
<Description
em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}"
em:minVersion="0.2.9"
em:maxVersion="99" />
</em:targetApplication>
<em:file>
<Description
about="urn:mozilla:extension:custombutton"
em:package="content/custombutton/" />
</em:file>
</Description>
</RDF>

Wenn Sie die Beschreibung geändert haben, speichern Sie die Änderungen und schließen Sie die Datei. Merken Sie sich den neu erstellten Ordner (Chrom), wo wir 3 Dateien erstellen und 2 Bilder einfügen. Erstellen Sie zunächst 3 Dateien mit folgenden Namen.

• button.css
• button.xul
• button.js

Jetzt werden wir den Button dort stylenist hier nicht kompliziert, wir werden lediglich einige grundlegende Stile auf das Schaltflächendesign anwenden (Bildabmessungen und Hover-Effekt auf der Schaltfläche definieren). Wenn Sie mit dem Entwerfen einer CSS-Datei (Cascading Style Sheet) vertraut sind, ist das Ändern von Werten und Effekten ein Kinderspiel. Wenn Sie den Namen jedoch zum ersten Mal hören, fügen Sie einfach die folgenden Codezeilen ein button.css Wenn Sie fertig sind, speichern Sie die Änderungen und schließen Sie sie.

#custom-button-1,
#wrapper-custom-button-1
{list-style-image: url("chrome://custombutton/content/button-1.jpg");}
/* common style for all custom buttons */
.custombutton                    {-moz-image-region: rect( 0px 24px 24px  0px);}
.custombutton:hover       {-moz-image-region: rect(24px 24px 48px  0px);}
[iconsize="small"] .custombutton
{-moz-image-region: rect( 0px 40px 16px 24px);}
[iconsize="small"] .custombutton:hover
{-moz-image-region: rect(24px 40px 40px 24px);}

Jetzt öffne die button.xul Datei in einem Texteditor und fügen Sie folgende Zeilen einvon Code. Denken Sie daran, dass wir auch Code für Thunderbird & Sunbird bereitstellen. Wenn Sie diesen Leitfaden nur für Firefox befolgt haben, können Sie Zeilen ausschließen, die sich auf Thunderbird & Sunbird beziehen.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css"
href="chrome://custombutton/content/button.css"?>
<!DOCTYPE overlay >
<overlay id="custombutton-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript"
src="chrome://custombutton/content/button.js"/>
<!-- Firefox -->
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Thunderbird mail -->
<toolbarpalette id="MailToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Thunderbird compose -->
<toolbarpalette id="MsgComposeToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Thunderbird address book -->
<toolbarpalette id="AddressBookToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Sunbird -->
<toolbarpalette id="calendarToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- button details -->
<toolbarbutton id="custom-button-1"
label="Custom"
tooltiptext="My custom toolbar button"
oncommand="CustomButton[1]()"
class="toolbarbutton-1 chromeclass-toolbar-additional custombutton"
/>
</overlay>

Nun müssen Sie zwei Bilddateien mit Namen einfügen button-1.jpg und Icon.jpg mit den Abmessungen 40 × 48 bzw. 48 × 48 bisErzielen Sie die besten Ergebnisse. Sie können jedoch Bilder mit einer Größe von maximal 48 Pixel Breite und Länge erstellen. Unten sehen Sie die von uns verwendeten Schaltflächenbilder. button-1.jpg Das Bild ist für die Symbolleistenschaltfläche mit den entsprechenden Größen (groß und klein). Der Hover-Effekt wird unter den beiden Standardbildgrößen angezeigt. Icon.jpg Bild bezieht sich auf das Hauptsymbol der Erweiterung (das in der Firefox-Erweiterungsgalerie angezeigt wird)

button-1.jpg

Icon.jpg

Einmal erstellt, gehe zur 5. Datei - button.js. Diese JavaScript-Datei ist sehr wichtig,Hiermit wird die Hauptfunktionalität der Schaltfläche definiert. Sie können ein Beispielskript hinzufügen, das eine Nachricht zum Testen der Funktionalität auffordert, oder ein erweitertes Skript ausführen, um die gewünschten Aktionen auszuführen. Es gibt auch viele Skripte, die speziell dafür entwickelt wurden, die eigenen Anforderungen zu erfüllen. Sie können hier auch einige einfache, aber nützliche Skripte ausprobieren. Da dieses Handbuch für Benutzer mit Vorkenntnissen gedacht ist, erstellen wir ein einfaches Lesezeichen, mit dem die angegebene Website geöffnet wird. Öffne das button.js Datei und fügen Sie die folgenden Codezeilen ein, um eine Lesezeichen-Schaltfläche zu erstellen (zur Anzeige in der Firefox-Symbolleiste).

CustomButton = {
1: function () {
const url = "https://www.addictivetips.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
},
}

Jetzt können Sie loslegen. Wir empfehlen Ihnen, das zu überprüfenCode, den Sie in die genannten Dateien eingefügt haben, und überprüfen Sie die Bildabmessungen erneut. Um die neu erstellte Erweiterung zu installieren, schließen Sie alle laufenden Instanzen von Firefox und starten Sie sie. Wenn alles geklappt hat, wird möglicherweise eine neue Eingabeaufforderung für die Add-On-Installation angezeigt, die darauf hinweist, dass die Erweiterung erfolgreich installiert wurde.

Um die neu erstellte Schaltfläche in der Navigationssymbolleiste anzuzeigen, klicken Sie im Menü Ansicht im Untermenü Symbolleisten auf Anpassen.

Das Dialogfeld "Symbolleiste anpassen" wird angezeigtSie müssen die neu erstellte Schaltfläche über die Navigationssymbolleiste ziehen. Nach dem Einfügen können Sie die Position auch ändern, indem Sie sie an eine beliebige Stelle ziehen.

Klicken Sie nun einfach auf die Schaltfläche, um die in die JavaScript-Datei eingefügte Funktionalität zu überprüfen.

Die resultierende Schaltfläche hat folgende Funktionalität:Es liegt also an Ihren Fähigkeiten, wie stark Sie die Funktionen kalibrieren können. Anfänger können Verknüpfungen erstellen, Anwendungen verknüpfen und Lesezeichen erstellen, während Benutzer, die sich in einer Schwebe zwischen Durchschnitts- und Expertenstufe befinden, diese sicherlich stärker nutzen und die erforderliche Funktionalität in die JavaScript-Hauptdatei einfügen können.