Данас доносимо Фирефок водич који то говорисвако може да следи да креира прилагођено дугме на траци са алаткама за навигацију. Поред видљивих тастера на траци са алаткама за навигацију, налази се листа осталих дугмића који имају различите функционалности које нуди Фирефок и које се могу додати било где на алатној траци и које се могу прилагодити вашим потребама. Пошто се положај и понашање дугмета могу мењати без потребе за додатним знањем, лако се може израдити нови наставак који се понаша према упутствима, седи у дефинисаној позицији, а притом је високо прилагодљив. Овај пост описује како креирати једноставно проширење - дугме са алатном траком која ће пружити једноставну функционалност.
За почетак прво морате сазнати екстензије директоријум (онај који се налази у фасцикли Фирефок Профилес). Корисници Виндовс 7 и Виндовс Виста ће овде пронаћи ову мапу;
Ц: Корисници << корисничко име >> АппДатаРоамингМозиллаФирефокПрофилес << име профила >> екстензије
Међутим, ако користите Виндовс КСП, упишите % АппДата% у Виндовс Рун конзоли и притисните Ентер.
Сада отворите фасциклу Фирефок, а затим Профили -> <Име профила> -> екстензије
Када се екстензије отвара се директоријум, креирајте нову фасциклу по имену цустом-тоолбар-буттон@екампле.цом у томе.
Отворите новостворену мапу и креирајте нови директориј, наиме хром, заједно са две датотеке - цхроме.манифест и install.rdf. Сада ћемо уређивати те датотеке у уређивачу текста, сматраћемо да користите било који уређивач са подршком утф-8, као што је - Виндовс уграђена бележница.
Прво, отворите цхроме.манифест датотеку и уметните следеће редове кода инит. Доле наведени код такође је функционалан за Тхундербирд пошту, састављање и адресе адресара и за Сунбирд. Међутим, ако требате користити дугме само у Фирефоку, линије кода за Тхундербирд и Сунбирд се могу искључити.
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
Након што се код убаци у датотеку, затворите га након што сте спремили промене. Сада измените install.rdf датотеке, морате да уметнете следеће редове кодау томе. Можете променити општи опис дугмета, текст се може додати у 6, 7 и 8. реда кода (мора бити приложен двоструким наводницима), можете да унесете име дугмета, описни текст и име ствараоца.
<?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>
Након што промените опис, сачувајте измене и затворите датотеку. Сетите се новостворене мапе (хром), где ћемо креирати 3 датотеке и уметнути 2 слике. Прво направите 3 датотеке са следећим именима;
- button.css
- button.xul
- button.js
Сада ћемо примијенити стајлинг на дугмеовде није ништа сложено, само ћемо применити неки основни стил преко дизајна дугмета (дефинисати димензије слике и задржати ефекат миша на дугме). Ако сте упознати са дизајнирањем ЦСС датотеке (Цасцадинг Стиле Схеет), промена вредности и ефеката биће цинцх, међутим, ако први пут чујете њено име, само убаците следеће стилске линије у код button.css датотеку, једном завршено, сачувајте промене и затворите је.
#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);}Сада отворите button.xul датотеку у уређивач текста и уметните следеће редовекода. Имајте на уму да пружамо код и за Тхундербирд & Сунбирд, ако пратите овај водич само за Фирефок, можете искључити линије повезане са Тхундербирд & Сунбирд.
<?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>
Сада морате да убаците две датотеке са именима button-1.jpg и Icon.jpg са димензијама 40 × 48 и 48 × 48 допостићи најбоље резултате. Међутим, можете да креирате слике било које величине која не прелази 48пк ширине и дужине. Испод можете видети слике гумба које користимо - button-1.jpg слика је за дугме са алаткама одговарајуће величине (велике и мале), а ефект показивача може се видети испод обе задате величине. Icon.jpg слика се односи на главну икону проширења (ону коју ћете видети у галерији додатака Фирефок)
button-1.jpg
Icon.jpg
Након креирања пређите на 5. датотеку - буттон.јс. Ова ЈаваСцрипт датотека има велику важност,јер ће дефинисати главну функцију дугмета. Можете додати пример скрипте која од вас захтева да тестирате функционалност или да кренете по унапред скрипту да бисте радили све што желите. Такође постоје многе скрипте које су осмишљене посебно да испуне нечије захтеве, овде можете проверити и неке једноставне, али корисне скрипте. Будући да је овај водич намењен корисницима основног нивоа, направићемо једноставну ставку са обележивачима која ће отворити наведену веб локацију. Отвори button.js датотеку и уметните следеће редове кода да бисте створили дугме са обележивачима (да се прикаже на траци са алаткама Фирефок).
CustomButton = {
1: function () {
const url = "https://www.addictivetips.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
},
}Сада је добро да кренемо, сматраћемо вас да проверитекод који сте уметнули у поменуте датотеке и поново проверили димензије слике. Да бисте инсталирали ново створено проширење, затворите све покренуте инстанце Фирефока и покрените га. Ако је све прошло добро, вероватно бисте видели нови промпт за инсталирање додатка, што указује да је проширење успешно инсталирано.
Да би се новостворено дугме појавило на траци са алаткама за навигацију, у менију Приказ, у подменију Алатне траке, кликните Прилагоди.
Одакле ће се приказати дијалог Прилагодивање алатне тракеморате да повучете новостворено дугме преко навигационе траке са алаткама. Након што га уметнете, такође можете променити његов положај тако што ћете га повући било где желите.
Сада само кликните дугме да бисте проверили функционалност уметнута у ЈаваСцрипт датотеку.
Функционалност дугмета јекориснички дефинисан, тако да је на вашим вештинама колико можете да калибрирате његове функције. Нови корисници могу да креирају пречице, повезују апликације, дизајнирају обележиваче, док корисници у удубини између просечног и стручног нивоа то сигурно могу више искористити и додати потребну функционалност у главну ЈаваСцрипт датотеку.
Коментари