Gomb létrehozása és hozzáadása a Firefox navigációs eszköztárán [Útmutató]

Ma bemutatunk egy Firefox útmutatótbárki követheti, hogy hozzon létre egy egyedi gombot a navigációs eszköztáron. A navigációs eszköztár látható gombjaival együtt a Firefoxban más funkciókkal ellátott gombok listája is található, amelyeket bárhol fel lehet venni az eszköztáron, és testreszabhatók az Ön igényei szerint. Mivel a gomb pozíciója és viselkedése további tudás nélkül megváltoztatható, könnyen felépíthető egy új kiterjesztés, amely az utasítások szerint viselkedik, meghatározott pozícióba ül, miközben nagymértékben testreszabható. Ez a bejegyzés ismerteti, hogyan lehet létrehozni egy egyszerű kiterjesztést - egy eszköztárgombot, amely egyszerű funkciókat biztosít.

A kezdéshez először meg kell tudnia bővítmények mappa (amely a Firefox Profiles mappában található). A Windows 7 és a Windows Vista felhasználók itt találják ezt a mappát;

Ha azonban Windows XP-t használ, írja be %App adatok% a Windows Run konzolon, és nyomja meg az Enter billentyűt.

Egyszer a bővítmények A mappa megnyílik, hozzon létre egy új mappát a [email protected] benne.

Nyissa meg az újonnan létrehozott mappát, és hozzon létre egy új könyvtárat króm, két fájl mellett - chrome.manifest és install.rdf. Most szerkeszteni fogjuk ezeket a fájlokat a szövegszerkesztőben. Arra számítunk, hogy bármilyen szerkesztőt használhatunk utf-8 támogatással, például - a Windows beépített Jegyzettömbjét.

Először nyisd ki chrome.manifest fájlba, és illessze be az init következő kódsorokat. Az alábbiakban megadott kód a Thunderbird levelezési, összeállítási és címjegyzék ablakaira, valamint a Sunbird számára is használható. Ha azonban csak a Firefoxban kell használni a gombot, akkor a Thunderbird és a Sunbird kódsorai kizárhatók.

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

Miután beillesztette a kódot a fájlba, zárja be azt a módosítások mentése után. Most szerkesztés install.rdf fájlt, a következő sorokat kell beilleszteniebenne. Megváltoztathatja a gomb általános leírását, a szöveg hozzáadható a kód 6., 7. és 8. sorába (idézőjelekbe kell helyezni), megadhatja a gomb nevét, leíró szövegét és az alkotó nevét.

<?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>

Miután megváltoztatta a leírást, mentse el a módosításokat, és zárja be a fájlt. Emlékezzen az újonnan létrehozott mappára (króm), ahol 3 fájlt készítünk és 2 képet szúrunk be. Először hozzon létre 3 fájlt a következő nevekkel;

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

Most stílusot alkalmazunk a gombra isitt nincs semmi bonyolult, csak néhány alapvető stílust alkalmazunk a gomb kialakításánál (meghatározzuk a kép méretét és a gomb lebegő hatását). Ha ismeri a CSS fájl (Cascading Style Sheet) megtervezését, akkor az értékek és effektusok megváltoztatása megkönnyíti a jelentést, azonban ha a nevét először hallja, csak illessze be a következő stílussort a button.css fájl, ha kész, mentse el a módosításokat, és zárja be.

#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);}

Most nyissa meg a button.xul írja be a szövegszerkesztőbe, és illessze be a következő sorokata kód. Ne feledje, hogy a Thunderbird és Sunbird kódot is megadjuk, ha ezt az útmutatót csak a Firefox számára követtük, akkor kizárhatja a Thunderbird és Sunbird kapcsolódó sorokat.

<?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>

Most be kell illesztenie két névfájlt button-1.jpg és Icon.jpg méretei 40 × 48 és 48 × 48,a legjobb eredményt érheti el. Bármely méretű képet elkészíthet, amely nem haladhatja meg a 48 képpont szélességet és hosszúságot. Az alábbiakban láthatja a gombképeket, amelyeket használunk - button-1.jpg A kép az eszköztár gombjának megfelelő méretű (nagy és kicsi), és a lebegő effektus a két alapértelmezett kép alatt látható. Icon.jpg A kép a fő kiterjesztésű ikonra vonatkozik (amelyet a Firefox kiterjesztési galériában fog látni)

button-1.jpg

Icon.jpg

A létrehozás után lépjen az 5. fájlra - button.js. Ez a JavaScript fájl nagyon fontos,mivel meghatározza a gomb fő funkcióját. Hozzáadhat egy minta szkriptet, amely felszólít egy üzenetre, hogy tesztelje a funkcionalitást, vagy felkeresheti az előzetes szkriptet, hogy bármit megtehessen. Számos olyan szkript van, amelyek elsősorban azért vannak kitöltve, hogy teljesítsék az igényeket, itt megnézhet néhány egyszerű, de hasznos szkriptet is. Mivel ez az útmutató általános szintű felhasználóknak szól, elkészítünk egy egyszerű könyvjelző elemet, amely megnyitja a megadott weboldalt. Nyissa meg a button.js írja be és illessze be a következő sorokat a könyvjelző gomb létrehozásához (hogy megjelenjen a Firefox eszköztáron).

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

Most már jól megy, úgy gondoljuk, hogy ellenőrizze akódot, amelyet beillesztett az említett fájlokba, és ellenőrizze újra a kép méretét. Az újonnan létrehozott kiterjesztés telepítéséhez zárja be a futó Firefox összes példányát, majd indítsa el. Ha minden jól ment, akkor valószínűleg új bővítmény telepítési parancsát látja, jelezve, hogy a bővítmény sikeresen telepítve lett.

Ahhoz, hogy az újonnan létrehozott gomb megjelenjen a navigációs eszköztáron, a Nézet menü Eszköztárak almenüjében kattintson a Testreszabás elemre.

Az Eszköztár testreszabása párbeszédpanel jelenik meg, ahonnanaz újonnan létrehozott gombot húzza a navigációs eszköztár fölé. Miután behelyezte, megváltoztathatja a helyzetét, bárhová húzhatja.

Most csak kattintson a gombra, hogy ellenőrizze a JavaScript fájlba beillesztett funkcionalitást.

Az eredményül kapott gomb funkciója:felhasználó által definiált, tehát a készségeidön múlik, hogy mennyire tudja kalibrálni a funkcióit. A kezdő felhasználók hivatkozásokat hozhatnak létre, hivatkozási programokat hozhatnak létre, könyvjelzőket készíthetnek, míg az átlag és a szakértő szintje alatt álló felhasználók minden bizonnyal jobban kihasználhatják azt, és hozzáadhatják a szükséges funkciókat a fő JavaScript fájlhoz.