Painikkeen luominen ja lisääminen Firefox-navigointityökalurivillä [Opas]

Tänään tuomme Firefox-oppaankuka tahansa voi seurata luodaksesi mukautetun painikkeen navigointityökaluriville. Näkyvissä olevien painikkeiden lisäksi navigointityökalurivillä on luettelo muista painikkeista, joilla on erilaiset toiminnot, Firefoxissa, jotka voidaan lisätä mihin tahansa työkaluriviin ja joita voidaan mukauttaa tarpeidesi mukaan. Koska painikkeen sijainti ja käyttäytyminen voidaan muuttaa tarvitsematta ylimääräistä tietoa, voidaan helposti rakentaa uusi laajennus, joka toimii ohjeiden mukaan, istuu määritellyssä asennossa ja on samalla erittäin muokattavissa. Tämä viesti käsittelee kuinka luoda yksinkertainen laajennus - työkalurivin painike, joka tarjoaa yksinkertaisen toiminnon.

Aluksi sinun on ensin selvitettävä laajennukset -kansio (joka sijaitsee Firefox Profiles -kansiossa). Windows 7 ja Windows Vista -käyttäjät löytävät tämän kansion täältä;

Jos kuitenkin käytät Windows XP: tä, kirjoita %Sovellustiedot% Windows Suorita -konsolissa ja paina Enter.

Kerran laajennukset kansio avataan, luo uusi kansio nimellä [email protected] sen sisällä.

Avaa vasta luotu kansio ja luo uusi hakemisto nimittäin kromi, yhdessä kahden tiedoston kanssa - chrome.manifest ja install.rdf. Nyt muokkaamme näitä tiedostoja tekstieditorissa, luulemme, että voit käyttää mitä tahansa editoria, jolla on utf-8-tuki, kuten - Windowsin sisäänrakennettu muistio.

Ensin, avaa chrome.manifest tiedosto ja lisää seuraavat koodirivit init. Jäljempänä annettu koodi on toiminnallinen myös Thunderbird-posti-, kirjoitus- ja osoitekirjan ikkunoissa sekä Sunbirdissä. Jos painike on kuitenkin käytettävä vain Firefoxissa, Thunderbird- ja Sunbird-koodirivit voidaan sulkea pois.

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

Kun koodi on lisätty tiedostoon, sulje se tallentamalla muutokset. Muokkaa nyt install.rdf tiedosto, sinun on lisättävä seuraavat koodirivitsen sisällä. Voit muuttaa painikkeen yleistä kuvausta. Teksti voidaan lisätä koodin 6, 7 ja 8 riville (on lisättävä lainausmerkeihin), voit antaa painikkeen nimen, kuvailevan tekstin ja luojan nimen.

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

Kun olet muuttanut kuvausta, tallenna muutokset ja sulje tiedosto. Muista vastikään luotu kansio (kromi), jossa luomme 3 tiedostoa ja lisäämme 2 kuvaa. Luo ensin 3 tiedostoa, joilla on seuraavat nimet;

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

Nyt käytämme muotoilua painikkeeseenei ole täällä mikään monimutkainen, käytämme vain joitain perusmuotoiluja painikkeen suunnittelussa (määrittele kuvan mitat ja siirrä painike painikkeeseen). Jos olet perehtynyt CSS-tiedoston (Cascading Style Sheet) suunnitteluun, arvojen ja tehosteiden muuttaminen on yksinkertainen asia, mutta jos kuulet sen nimen ensimmäistä kertaa, lisää vain seuraavat tyylirivit koodiin button.css Kun olet valmis, tallenna muutokset ja sulje se.

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

Avaa nyt button.xul arkistoi tekstieditoriin ja lisää seuraavat rivitkoodista. Muista, että tarjoamme koodia myös Thunderbirdille ja Sunbirdille. Jos olet seurannut tätä opasta vain Firefoxille, voit sulkea pois linjat, jotka liittyvät Thunderbird & Sunbirdiin.

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

Nyt sinun on asetettava kaksi kuvatiedostoa, joilla on nimet button-1.jpg ja Icon.jpg mitat 40 × 48 ja 48 × 48, vastaavastisaat parhaat tulokset. Voit kuitenkin luoda kuvia, joiden koko on enintään 48 kuvapistettä leveys ja pituus. Alla näet käyttämämme painikekuvat - button-1.jpg kuva on työkalupalkin painikkeille, joilla on vastaavat koot (iso ja pieni), ja hover-efekti näkyy molempien oletuskuvien alla. Icon.jpg kuva viittaa päälaajennuskuvakekuvaan (se, jonka näet Firefox-laajennusgalleriassa)

button-1.jpg

Icon.jpg

Kun olet luonut, siirry viidenteen tiedostoon - button.js. Tämä JavaScript-tiedosto on erittäin tärkeä,koska se määrittelee painikkeen päätoiminnot. Voit lisätä näytekomentosarjan, joka kehottaa viestin testaamaan toiminnallisuuden, tai siirtyä etukäteen käsikirjoituksen tekemään mitä haluat. Lisäksi on olemassa monia skriptejä, jotka on haettu etenkin vaatimusten täyttämiseksi. Voit tarkistaa täältä myös joitain yksinkertaisia, mutta hyödyllisiä skriptejä. Koska tämä opas on tarkoitettu perustasolle, luomme yksinkertaisen kirjanmerkkikohdan, joka avaa määritetyn verkkosivuston. Avaa button.js tiedosto ja lisää seuraavat koodirivit luodaksesi kirjanmerkkipainikkeen (näkyy Firefox-työkalurivillä).

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

Nyt sinulla on hyvä mennä, luulemme sinun tarkastavankoodi, jonka olet lisännyt mainittuihin tiedostoihin, ja tarkista kuvan mitat uudelleen. Asentaaksesi vasta luodun laajennuksen sulkemalla kaikki käynnissä olevat Firefox-esiintymät ja käynnistämällä sen. Jos kaikki meni hyvin, saatat nähdä uuden lisäosan asennuskehotteen, joka osoittaa, että laajennus on asennettu onnistuneesti.

Jos haluat, että vastikään luotu painike ilmestyy navigointityökaluriville, napsauta Näytä-valikon Työkalurivit-alivalikon kohdassa Mukauta.

Mukauta työkalurivi -valintaikkuna tulee näkyviin, mistäVedä äskettäin luotu painike navigointityökalurivin päälle. Kun olet asettanut paikoilleen, voit myös muuttaa sen sijaintia vetämällä sitä minne haluat.

Napsauta nyt vain painiketta vahvistaaksesi JavaScript-tiedostoon lisätyn toiminnallisuuden.

Tuloksena olevan painikkeen toiminnallisuus onkäyttäjän määrittelemä, joten pätevyys päättää, kuinka paljon voit kalibroida sen toiminnot. Aloittelijat voivat luoda pikakuvakkeita, linkittää sovelluksia, suunnitella kirjanmerkkejä, kun taas keskimääräisen ja asiantuntijatason välillä olevat käyttäjät voivat varmasti hyödyntää sitä enemmän ja lisätä vaaditut toiminnot JavaScript-tiedostoon.