Ako vytvoriť a pridať tlačidlo na paneli nástrojov navigácie Firefox [Sprievodca]

Dnes prinášame sprievodcu prehliadačom FirefoxKaždý môže sledovať vytvorenie vlastného tlačidla na paneli s nástrojmi navigácie. Spolu s viditeľnými tlačidlami na paneli s nástrojmi navigácie je vo Firefoxe k dispozícii zoznam ďalších tlačidiel s rôznymi funkciami, ktoré je možné pridať kdekoľvek na paneli nástrojov a ktoré je možné prispôsobiť podľa vašich potrieb. Keďže pozíciu a správanie tlačidla možno zmeniť bez potreby akýchkoľvek ďalších vedomostí, je možné ľahko zostaviť nové rozšírenie, ktoré sa správa podľa pokynov, sedí na definovanej pozícii a je vysoko prispôsobiteľné. Tento príspevok sa venuje tomu, ako vytvoriť jednoduché rozšírenie - tlačidlo na paneli nástrojov, ktoré poskytne jednoduchú funkčnosť.

Najprv musíte zistiť rozšírenie (priečinok, ktorý sa nachádza v priečinku Profily Firefox). Používatelia systémov Windows 7 a Windows Vista tento priečinok nájdu tu;

Ak však používate systém Windows XP, napíšte %Dáta aplikácie% v konzole Windows Run a stlačte kláves Enter.

Raz rozšírenie priečinok sa otvorí, vytvorte nový priečinok s názvom [email protected] init.

Otvorte novovytvorený priečinok a vytvorte nový priečinok chróm, spolu s dvoma súbormi - chrome.manifest a install.rdf. Teraz tieto súbory upravujeme v textovom editore, predpokladáme, že budete používať akýkoľvek editor s podporou utf-8, napríklad - vstavaný Poznámkový blok systému Windows.

Najprv otvorené chrome.manifest súbor a vložte nasledujúce riadky kódu init. Nižšie uvedený kód je funkčný aj pre okná Thunderbird pre poštu, písanie správ a adresáre a pre Sunbird. Ak však potrebujete použiť tlačidlo iba v prehliadači Firefox, je možné vylúčiť riadky kódu pre Thunderbird a Sunbird.

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

Po vložení kódu do súboru ho po uložení zmien zatvorte. Teraz upravte install.rdf do súboru, musíte vložiť nasledujúce riadky kóduv tom. Môžete zmeniť všeobecný popis tlačidla, text môžete pridať do 6, 7 a 8 riadkov kódu (musí byť uzavretý do úvodzoviek), môžete zadať názov tlačidla, popisný text a meno tvorcu.

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

Po zmene popisu uložte zmeny a zatvorte súbor. Pamätajte na novovytvorený priečinok (chróm), kde vytvoríme 3 súbory a vložíme 2 obrázky. Najskôr vytvorte 3 súbory s nasledujúcimi menami;

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

Teraz tam aplikujeme stylingtu nie je nič zložité, na návrh tlačidla použijeme len niektoré základné štýly (definovať rozmery obrázka a efekt vznášania sa na tlačidlo). Ak ste oboznámení s navrhovaním súboru CSS (Cascading Style Sheet), meniace sa hodnoty a efekty budú iba v kine, ak však budete počuť jeho meno prvýkrát, jednoducho vložte nasledujúce štýlové riadky kódu do button.css po dokončení uložte zmeny a zatvorte ich.

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

Teraz otvorte button.xul do textového editora a vložte nasledujúce riadkykódu. Nezabudnite, že poskytujeme kód aj pre Thunderbird a Sunbird. Ak ste postupovali podľa tohto sprievodcu iba pre Firefox, môžete vylúčiť riadky týkajúce sa Thunderbird & Sunbird.

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

Teraz musíte vložiť dva obrazové súbory s menami button-1.jpg a Icon.jpg s rozmermi 40 × 48 a 48 × 48 ažzískať najlepšie výsledky. Môžete však vytvárať obrázky ľubovoľnej veľkosti, ktorá nepresahuje šírku a dĺžku 48 pixlov. Nižšie nájdete obrázky tlačidiel, ktoré používame - button-1.jpg Obrázok je pre tlačidlo na paneli s nástrojmi s príslušnými veľkosťami (veľký a malý) a efekt vznášania je možné vidieť pod predvolenými veľkosťami oboch obrázkov. Icon.jpg Obrázok odkazuje na hlavný obrázok ikony rozšírenia (ten, ktorý uvidíte v galérii rozšírení Firefoxu)

button-1.jpg

Icon.jpg

Po vytvorení prejdite do 5. súboru - button.js. Tento súbor JavaScript má veľký význam,pretože bude definovať hlavnú funkčnosť tlačidla. Môžete pridať ukážkový skript, ktorý vyzve správu, aby otestovala funkčnosť, alebo ísť na predbežný skript, aby urobil, čo chcete. Existuje tiež veľa skriptov, ktoré boli vyvinuté špeciálne na splnenie ich požiadaviek. Môžete tu tiež vyskúšať niektoré jednoduché, ale užitočné skripty. Keďže táto príručka je určená pre používateľov na základnej úrovni, vytvoríme jednoduchú záložku, ktorá otvorí zadanú webovú stránku. Otvor button.js súbor a vložte nasledujúce riadky kódu, aby ste vytvorili tlačidlo záložky (aby sa zobrazilo na paneli nástrojov Firefoxu).

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

Teraz je dobré ísť. Počítame s kontroloukód, ktorý ste vložili do uvedených súborov, a znova overte rozmery obrázka. Ak chcete nainštalovať novovytvorené rozšírenie, zatvorte všetky spustené inštancie prehliadača Firefox a potom ho spustite. Ak by všetko šlo dobre, pravdepodobne by sa vám zobrazila nová výzva na inštaláciu doplnku, čo naznačuje, že rozšírenie bolo úspešne nainštalované.

Ak chcete, aby sa novovytvorené tlačidlo zobrazilo na navigačnej lište nástrojov, v ponuke Zobraziť kliknite v podponuke Panely nástrojov na položku Prispôsobiť.

Zobrazí sa dialógové okno Prispôsobiť panel s nástrojmi, odkiaľmusíte novo vytvorené tlačidlo pretiahnuť cez panel s nástrojmi navigácie. Po vložení môžete tiež zmeniť jeho polohu potiahnutím kamkoľvek sa vám páči.

Teraz stačí kliknúť na tlačidlo a overiť funkčnosť vloženú do súboru JavaScript.

Funkčnosť výsledného tlačidla jeužívateľsky definovaný, takže záleží na vašich schopnostiach, koľko môžete kalibrovať jeho funkcie. Začínajúci používatelia môžu vytvárať odkazy, prepájať aplikácie, vytvárať záložky, zatiaľ čo používatelia v medziach medzi priemernou a odbornou úrovňou ich určite môžu lepšie využiť a pridať požadovanú funkčnosť do hlavného súboru JavaScript.