Vandaag brengen we een Firefox-gids meeiedereen kan volgen om een aangepaste knop in de navigatiewerkbalk te maken. Samen met zichtbare knoppen in de navigatiewerkbalk, is er een lijst met andere knoppen met verschillende functionaliteiten in Firefox die overal op de werkbalk kunnen worden toegevoegd en naar wens kunnen worden aangepast. Aangezien de positie en het gedrag van de knop kunnen worden gewijzigd zonder extra kennis te vereisen, kan men eenvoudig een nieuwe extensie bouwen die zich gedraagt zoals aangegeven, in een gedefinieerde positie zit, terwijl hij in hoge mate aanpasbaar is. Dit bericht behandelt het maken van een eenvoudige extensie - een werkbalkknop die een eenvoudige functionaliteit biedt.
Om te beginnen, moet je er eerst achter komen extensies map (die zich in de map Firefox-profielen bevindt). Gebruikers van Windows 7 en Windows Vista vinden deze map hier;
C: Gebruikers << gebruikersnaam >> AppDataRoamingMozillaFirefoxProfiles << profielnaam >> extensies
Als u echter Windows XP gebruikt, typt u %App data% in Windows Run-console en druk op Enter.
Open nu de map Firefox en vervolgens Profielen -> <Profielnaam> -> extensiemap
Zodra de extensies map wordt geopend, maak een nieuwe map aan met de naam van [email protected] in het.
Open de nieuw gemaakte map en maak een nieuwe map aan, namelijk chroom, samen met twee bestanden - chrome.manifest en install.rdf. Nu zullen we deze bestanden in de teksteditor bewerken, we raden u aan om elke editor met utf-8-ondersteuning te gebruiken, zoals - Windows ingebouwd Kladblok.
Open eerst chrome.manifest bestand en plaats de volgende regels code init. De onderstaande code is ook functioneel voor Thunderbird-mail-, opstel- en adresboekvensters en voor Sunbird. Als u de knop echter alleen in Firefox moet gebruiken, kunnen coderegels voor Thunderbird en Sunbird worden uitgesloten.
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
Nadat de code in het bestand is ingevoegd, sluit u deze nadat u de wijzigingen hebt opgeslagen. Nu bewerken install.rdf bestand, moet u de volgende coderegels invoegenin het. U kunt de algemene beschrijving van de knop wijzigen, tekst kan worden toegevoegd in 6, 7 en 8e regels van de code (moet tussen dubbele aanhalingstekens worden geplaatst), u kunt de naam van de knop, de beschrijvende tekst en de naam van de maker invoeren.
<?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>
Nadat u de beschrijving heeft gewijzigd, slaat u de wijzigingen op en sluit u het bestand. Onthoud de nieuw gemaakte map (chroom), waar we 3 bestanden maken en 2 afbeeldingen invoegen. Maak eerst 3 bestanden met de volgende namen;
- button.css
- button.xul
- button.js
Nu zullen we styling op de knop toepassen, daaris hier niets ingewikkelds, we passen alleen een basisstijl toe op het knopontwerp (definieer afbeeldingsafmetingen en zweefeffect op de knop). Als u bekend bent met het ontwerpen van een CSS-bestand (Cascading Style Sheet), zijn het wijzigen van waarden en effecten een makkie, maar als u de naam voor het eerst hoort, plaatst u gewoon de volgende stijlregels in button.css sla het bestand op en sla het op.
#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);}Open nu de button.xul bestand in een teksteditor en voeg de volgende regels invan code. Houd er rekening mee dat we ook code voor Thunderbird en Sunbird bieden. Als u deze gids alleen voor Firefox hebt gevolgd, kunt u regels met betrekking tot Thunderbird en Sunbird uitsluiten.
<?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>
Nu moet u twee afbeeldingsbestanden met namen invoegen button-1.jpg en Icon.jpg met afmetingen 40 × 48 en 48 × 48 respectievelijkkrijg de beste resultaten. U kunt echter afbeeldingen van elke grootte maken met een breedte en lengte van maximaal 48 px. Hieronder ziet u de knopafbeeldingen die we gebruiken - button-1.jpg afbeelding is voor werkbalkknop met respectieve groottes (groot en klein) en zweven effect is te zien onder de formaten van beide standaardafbeeldingen. Icon.jpg afbeelding verwijst naar de afbeelding van het hoofdextensiepictogram (de afbeelding die u in de Firefox-extensiegalerij ziet)
button-1.jpg
Icon.jpg
Eenmaal gemaakt, ga naar het 5e bestand - button.js. Dit JavaScript-bestand is erg belangrijk,omdat dit de hoofdfunctionaliteit van de knop definieert. U kunt een voorbeeldscript toevoegen waarin een bericht wordt gevraagd om de functionaliteit te testen of gaan voor vooraf script om te doen wat u maar wilt. Er zijn ook veel scripts die speciaal zijn ontworpen om aan de vereisten te voldoen, je kunt hier ook enkele eenvoudige maar nuttige scripts bekijken. Omdat deze handleiding bedoeld is voor gebruikers op elementair niveau, maken we een eenvoudig bladwijzeritem dat de opgegeven website opent. Open de button.js bestand en voeg de volgende coderegels in om een bladwijzerknop te maken (voor weergave op de Firefox-werkbalk).
CustomButton = {
1: function () {
const url = "https://www.addictivetips.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
},
}Nu je klaar bent om te gaan, raden we je aan om de te controlerencode die u in de genoemde bestanden hebt ingevoegd en controleer de afbeeldingsafmetingen opnieuw. Om de nieuw gecreëerde extensie te installeren, sluit u alle actieve exemplaren van Firefox en start u deze. Als alles goed is gegaan, ziet u waarschijnlijk een nieuwe prompt voor de installatie van een add-on die aangeeft dat de extensie met succes is geïnstalleerd.
Als u een nieuw gemaakte knop op de navigatiewerkbalk wilt weergeven, klikt u in het menu Beeld onder het submenu Werkbalken op Aanpassen.
Werkbalk aanpassen dialoogvenster zal verschijnen, van waaru moet de nieuw gemaakte knop over de navigatiewerkbalk slepen. Eenmaal ingevoegd, kunt u de positie ook wijzigen door deze naar elke gewenste locatie te slepen.
Klik nu op de knop om de functionaliteit te verifiëren die in het JavaScript-bestand is ingevoegd.
De functionaliteit van de resulterende knop isdoor de gebruiker gedefinieerd, dus het is aan uw vaardigheden hoeveel u de functies kunt kalibreren. Beginnende gebruikers kunnen snelkoppelingen maken, toepassingen koppelen, bladwijzers ontwerpen, terwijl gebruikers in limbo tussen gemiddeld en expertniveau er zeker meer gebruik van kunnen maken en de vereiste functionaliteit in het hoofd JavaScript-bestand kunnen toevoegen.
Comments