Як створити та додати кнопку на панелі навігації Firefox [Керівництво]

Сьогодні ми пропонуємо посібник з Firefox про цебудь-хто може слідувати, щоб створити спеціальну кнопку на панелі навігації. Поряд із видимими кнопками на панелі інструментів навігації, є список інших кнопок, що мають різні функціональні можливості, передбачені у Firefox, які можна додавати в будь-якому місці на панелі інструментів і їх можна налаштувати відповідно до ваших потреб. Оскільки положення та поведінку кнопки можна змінити, не вимагаючи додаткових знань, можна легко створити нове розширення, яке веде себе за вказівкою, сидить у визначеному положенні, при цьому дуже настроюється. У цій публікації описано, як створити просте розширення - кнопку панелі інструментів, яка забезпечить просту функціональність.

Для початку спочатку потрібно з’ясувати розширення папку (та знаходиться в папці Профілі Firefox). Користувачі Windows 7 та Windows Vista знайдуть цю папку тут;

Однак, якщо ви використовуєте Windows XP, введіть %Дані програми% у консолі Windows Run та натисніть клавішу Enter.

Як тільки розширення папку відкрито, створіть нову папку за назвою [email protected] в цьому.

Відкрийте новостворену папку та створіть новий каталог саме хром, разом з двома файлами - хром.маніфест і install.rdf. Тепер ми будемо редагувати ці файли в текстовому редакторі, ми вважатимемо вас використовувати будь-який редактор із підтримкою utf-8, наприклад - вбудований Блокнот Windows.

По-перше, відкрити хром.маніфест файл і вставити наступні рядки коду init. Наведений нижче код також функціонує як для пошти Thunderbird, складання та адресної книги, так і для Sunbird. Однак якщо вам потрібно використовувати кнопку лише у Firefox, рядки коду для Thunderbird та 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

Після того, як код буде вставлений у файл, закрийте його після збереження змін. Тепер редагуйте 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

Тепер ми застосуємо стайлінг до кнопки, тамтут нічого складного, ми просто застосуємо основні стилі над дизайном кнопок (визначимо розміри зображення та наведіть на нього курсор). Якщо ви знайомі з розробкою CSS-файлу (Cascading Style Sheet), зміна значень та ефектів буде чинником, однак, якщо ви чуєте його ім’я вперше, просто вставте наступні рядки стилів коду в 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 файл у текстовому редакторі та вставити наступні рядкикоду. Пам'ятайте, що ми надаємо код і для Thunderbird & Sunbird, якщо ви дотримуєтесь цього посібника лише для Firefox, ви можете виключати рядки, пов’язані з 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>

Тепер вам потрібно вставити два файли зображень, що мають імена button-1.jpg і Icon.jpg з розмірами 40 × 48 і 48 × 48 відповідно доотримати найкращі результати. Однак ви можете створювати зображення будь-якого розміру, що не перевищує 48 пікселів по ширині та довжині. Нижче ви можете побачити зображення кнопок, які ми використовуємо - button-1.jpg зображення призначене для кнопки на панелі інструментів відповідних розмірів (великих і малих), і ефект наведення можна побачити під розмірами обох зображень за замовчуванням. Icon.jpg зображення стосується головного зображення значка розширення (того, яке ви побачите в галереї розширень Firefox)

button-1.jpg

Icon.jpg

Після створення перейдіть до 5-го файлу - button.js. Цей файл JavaScript має велике значення,оскільки це визначить основну функціональність кнопки. Ви можете додати зразок сценарію, який вимагає повідомлення для перевірки функціональності, або перейти до попереднього сценарію, щоб зробити все, що завгодно. Також є багато сценаріїв, створених спеціально для того, щоб виконати свої вимоги, тут також можна ознайомитись з простими, але корисними сценаріями. Оскільки цей посібник призначений для користувачів початкового рівня, ми створимо простий елемент закладок, який відкриє вказаний веб-сайт. Відкрийте button.js файл та вставте наступні рядки коду, щоб створити кнопку закладок (показувати на панелі інструментів Firefox).

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

Тепер вам добре піти, ми вважаємо вас перевіритикод, який ви вставили у згадані файли та ще раз перевірте розміри зображення. Щоб встановити новостворене розширення, закрийте всі запущені екземпляри Firefox та запустіть його. Якщо все пішло добре, ви, мабуть, побачили нове запит про встановлення додатка, що вказує на те, що розширення успішно встановлено

Щоб новостворена кнопка з’явилася на панелі навігації, у меню Перегляд у підменю Панелі інструментів натисніть кнопку Налаштувати.

Звідки з’явиться діалогове вікно Налаштувати панель інструментівви повинні перетягнути новостворену кнопку через панель навігації. Після вставлення ви також можете змінити його положення, перетягнувши його куди завгодно.

Тепер просто натисніть кнопку, щоб перевірити функціональність, вставлену у файл JavaScript.

Отримана функція кнопки євизначений користувачем, тому саме від ваших навичок залежить те, наскільки ви можете відкалібрувати його функції. Новачки можуть створювати ярлики, зв’язувати програми, створювати закладки, тоді як користувачі, які знаходяться на рівні між середнім та експертним рівнем, безумовно, можуть більше використовувати його та додати необхідну функціональність у головному файлі JavaScript.