Kā izveidot un pievienot pogu Firefox navigācijas rīkjoslā [Guide]

Šodien mēs piedāvājam Firefox ceļvediikviens var sekot, lai navigācijas rīkjoslā izveidotu pielāgotu pogu. Līdzās redzamām pogām navigācijas rīkjoslā ir arī saraksts ar citām pogām, kurām ir dažādas funkcijas Firefox, kuras var pievienot jebkur rīkjoslā un kuras var pielāgot atbilstoši jūsu vajadzībām. Tā kā pogas novietojumu un uzvedību var mainīt, nepieprasot nekādas papildu zināšanas, var viegli izveidot jaunu paplašinājumu, kas darbojas kā norādīts, sēž noteiktā pozīcijā, vienlaikus ir ļoti pielāgojams. Šajā rakstā ir aprakstīts, kā izveidot vienkāršu paplašinājumu - rīkjoslas pogu, kas nodrošinās vienkāršu funkcionalitāti.

Lai sāktu, vispirms jums tas ir jānoskaidro paplašinājumi mape (tāda, kas atrodas mapē Firefox Profili). Windows 7 un Windows Vista lietotāji šeit atradīs šo mapi;

Tomēr, ja jūs izmantojat Windows XP, ierakstiet %Aplikācijas dati% Windows palaišanas konsolē un nospiediet taustiņu Enter.

Reiz paplašinājumi Tiek atvērta mape, izveidojiet jaunu mapi ar nosaukumu [email protected] tajā.

Atveriet jaunizveidoto mapi un izveidojiet jaunu direktoriju hroms, kopā ar diviem failiem - hroms.manifests un install.rdf. Tagad mēs rediģēsim šos failus teksta redaktorā. Mēs domājam, ka jums vajadzētu izmantot jebkuru redaktoru ar utf-8 atbalstu, piemēram, - Windows iebūvēto Notepad.

Pirmkārt, atveriet hroms.manifests failu un ievietojiet šādas koda rindas. Tālāk sniegtais kods ir funkcionāls arī Thunderbird pastam, rakstīšanas un adrešu grāmatas logiem, kā arī Sunbird. Tomēr, ja jums ir jāizmanto poga tikai pārlūkprogrammā Firefox, Thunderbird un Sunbird koda līnijas var izslēgt.

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

Kad kods ir ievietots failā, pēc izmaiņu saglabāšanas to aizveriet. Tagad rediģēt install.rdf failu, jums jāievieto šādas koda rindiņastajā. Jūs varat mainīt pogas vispārīgo aprakstu, tekstu var pievienot koda 6., 7. un 8. rindā (jābūt ievietotam pēdiņās), varat ievadīt pogas vārdu, aprakstošo tekstu un veidotāja vārdu.

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

Kad esat mainījis aprakstu, saglabājiet izmaiņas un aizveriet failu. Atcerieties jaunizveidoto mapi (hroms), kurā mēs izveidosim 3 failus un ievietosim 2 attēlus. Vispirms izveidojiet 3 failus ar šādiem nosaukumiem;

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

Tagad pogai tiks piemērots stilsšeit nav nekas sarežģīts, mēs vienkārši pielietosim dažus pamata stilus virs pogas noformējuma (definējiet attēla izmērus un virziet uz pogas efektu). Ja esat pazīstams ar CSS faila (Cascading Style Sheet) noformēšanu, vērtību un efektu maiņa būs tīrais nieks, tomēr, ja tā vārdu dzirdat pirmo reizi, vienkārši ievietojiet šajā stila koda rindiņas button.css Pēc pabeigšanas saglabājiet izmaiņas un aizveriet to.

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

Tagad atveriet button.xul failu teksta redaktorā un ievietojiet šādas rindiņaskoda. Atcerieties, ka mēs piedāvājam kodu arī Thunderbird un Sunbird. Ja esat sekojis šai rokasgrāmatai tikai Firefox, varat izslēgt līnijas, kas saistītas ar Thunderbird un 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>

Tagad jums jāievieto divi attēlu faili ar nosaukumiem button-1.jpg un Icon.jpg ar izmēriem 40 × 48 un 48 × 48 attiecīgi līdziegūt labākos rezultātus. Tomēr jūs varat izveidot jebkura izmēra attēlus, kas nepārsniedz 48 pikseļu platumu un garumu. Zemāk varat redzēt pogu attēlus, kurus mēs izmantojam - button-1.jpg attēls ir paredzēts rīkjoslas pogai ar attiecīgajiem izmēriem (liels un mazs), un kursora rādīšanas efekts ir redzams zem abiem noklusējuma attēlu lielumiem. Icon.jpg attēls attiecas uz galvenās paplašinājuma ikonas attēlu (to, kuru redzēsit Firefox paplašinājumu galerijā)

button-1.jpg

Icon.jpg

Kad tas izveidots, pārejiet uz 5. failu - poga.js. Šim JavaScript failam ir liela nozīme,jo tā definēs pogas galveno funkcionalitāti. Varat pievienot skripta paraugu, kas mudina ziņojumu pārbaudīt funkcionalitāti, vai arī meklēt iepriekšējo skriptu, lai izdarītu visu, ko vēlaties. Turklāt ir daudz skriptu, kas īpaši izstrādāti, lai piepildītu prasības, šeit varat arī apskatīt dažus vienkāršus, bet noderīgus skriptus. Tā kā šī rokasgrāmata ir paredzēta pamata līmeņa lietotājiem, mēs izveidosim vienkāršu grāmatzīmju vienumu, kas atvērs norādīto vietni. Atveriet button.js failu un ievietojiet šādas koda rindiņas, lai izveidotu grāmatzīmju pogu (lai parādītu Firefox rīkjoslā).

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

Tagad jums ir labi doties, mēs domājam, ka jums jāpārbaudakodu, kuru esat ievietojis minētajos failos, un vēlreiz pārbaudiet attēla izmērus. Lai instalētu jaunizveidoto paplašinājumu, aizveriet visus palaistos Firefox gadījumus un pēc tam palaidiet to. Ja viss noritēja labi, jūs, iespējams, redzēsit jaunu papildinājumu instalēšanas uzvedni, norādot, ka paplašinājums ir veiksmīgi instalēts.

Lai jaunizveidotā poga parādītos navigācijas rīkjoslā, izvēlnes Skats apakšizvēlnē Rīkjoslas noklikšķiniet uz Pielāgot.

Parādīsies dialoglodziņš Pielāgot rīkjoslu, no kurienesjaunizveidotā poga jāpārvelk virs navigācijas rīkjoslas. Pēc ievietošanas varat mainīt arī tā pozīciju, velkot to visur, kur vēlaties.

Tagad vienkārši noklikšķiniet uz pogas, lai pārbaudītu JavaScript failā ievietoto funkcionalitāti.

Rezultātā iegūtās pogas funkcionalitāte irlietotāja definēts, tāpēc tas, cik daudz jūs varat kalibrēt tā funkcijas, ir atkarīgs no jūsu prasmēm. Iesācēju lietotāji var izveidot saīsnes, saistīt lietojumprogrammas, veidot grāmatzīmes, kamēr lietotāji, kas atrodas vidējā un ekspertu līmenī, noteikti var to vairāk izmantot un galvenajā JavaScript failā pievienot vajadzīgo funkcionalitāti.