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

Ma bemutatunk egy Firefox útmutatót, amelyet bárki követhet, és létrehozhat egy egyéni gombot a navigációs eszköztáron. A navigációs eszköztáron látható gombokkal együtt megtalálható egy sor más gomb is, amelyek különböznek egymástól a Firefoxban biztosított funkciók, amelyeket az eszköztár bárhová hozzáadhatunk, és amelyek testreszabhatók a szükségleteid. Mivel a gomb pozíciója és viselkedése megváltoztatható további tudás nélkül könnyen építhet egy új kiterjesztést, amely az utasítások szerint viselkedik, meghatározott pozícióban ül, miközben nagyon magas 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;

C: \ Users \ <> \ AppData \ Roaming \ Mozilla \ Firefox \ Profiles \ <> \ Bővítmények

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

Most nyissa meg a Firefox mappát, majd a Profilok -> elemet -> kiterjesztések mappa

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. Úgy gondoljuk, hogy bármilyen szerkesztőt használjon 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.

tartalom custombutton króm / stílus króm: //global/content/customizeToolbar.xul króm: //custombutton/content/button.css # Firefox overlay króm: //browser/content/browser.xul króm: //custombutton/content/button.xul # Thunderbird mail overlay króm: //messenger/content/messenger.xul króm: //custombutton/content/button.xul # Thunderbird komponál overlay krómot: //messenger/content/messengercompose/messengercompose.xul króm: //custombutton/content/button.xul # Thunderbird címjegyzék overlay króm: //messenger/content/addressbook/addressbook.xul króm: //custombutton/content/button.xul # Sunbird overlay króm: //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, be kell helyeznie a következő kódsorokat. 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őjelbe kell tenni), beírhatja a gomb nevét, leíró szövegét és alkotóját név.

1.0 Firefox  Thunderbird  Sunbird 

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 a stílusra alkalmazzuk a gombot, itt nincs semmi bonyolult, csak néhány alapvető stílussal alkalmazzuk a gomb kialakítását (határozzuk meg a kép méretét és mutassuk a gombot a gombra). Ha ismeri a CSS fájl (Cascading Style Sheet) megtervezését, akkor az értékek és effektusok megváltoztatása a cinch, ha azonban a nevét először hallja, csak illessze be a következő stílussorokat kód be button.css fájlt, ha kész, mentse el a módosításokat, és zárja be.

# egyedi gomb-1, # csomagoló-egyedi gomb-1 {list-style-image: url ("króm: //custombutton/content/button-1.jpg");} / * az összes egyedi stílus gombok * / .custombutton {-moz-image-region: rect (0px 24px 24px 0px);} .custombutton: hover {-moz-image-region: rect (24px 24px 48px 0px);} [iconize = "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ő sorokat. 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árhatjuk a Thunderbird és Sunbird kapcsolódó sorokat.

1.0UTF-8text / csschrome: //custombutton/content/button.css Firefox Thunderbird levelek Thunderbird komponálni Thunderbird címjegyzék Sunbird gomb részleteit 

Most be kell illesztenie két névfájlt button-1.jpg és Icon.jpg 40 × 48 és 48 × 48 méretekkel a legjobb eredmény elérése érdekében. 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 lát majd)

button-1.jpg

Icon.jpg

Miután létrehozta, 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ényeiket. Néhány egyszerű, de hasznos szkriptet is megnézhet itt. 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/" dokumentum .getElementById ("tartalom") .webNavigation .loadURI (url, 0, null, null, null)},}

Most már jó menni, úgy gondoljuk, hogy ellenőrizze a kó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.

Megjelenik az Eszköztár testreszabása párbeszédpanel, ahonnan az ú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 a 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, összekapcsolhatnak alkalmazásokat, tervezhetnek könyvjelzőket, miközben a felhasználók egymás között vannak Az átlagos és szakértői szint minden bizonnyal jobban kihasználhatja azt, és hozzáadhatja a szükséges funkcionalitást a JavaScript fő részéhez fájlt.