Jak utworzyć i dodać przycisk na pasku nawigacyjnym przeglądarki Firefox [Przewodnik]

Dzisiaj udostępniamy przewodnik po Firefoksiekażdy może śledzić, aby utworzyć niestandardowy przycisk na pasku narzędzi nawigacji. Wraz z widocznymi przyciskami na pasku narzędzi nawigacyjnych znajduje się lista innych przycisków o różnych funkcjach udostępnianych w Firefoksie, które można dodać w dowolnym miejscu paska narzędzi i dostosować do własnych potrzeb. Ponieważ pozycję i zachowanie przycisku można zmienić bez konieczności posiadania dodatkowej wiedzy, można łatwo zbudować nowe rozszerzenie, które zachowuje się zgodnie z zaleceniami, znajduje się w określonej pozycji, a jednocześnie jest wysoce konfigurowalne. W tym poście opisano, jak utworzyć proste rozszerzenie - przycisk paska narzędzi, który zapewni prostą funkcjonalność.

Aby rozpocząć, najpierw musisz się dowiedzieć rozszerzenia folder (taki, który znajduje się w folderze profili przeglądarki Firefox). Użytkownicy Windows 7 i Windows Vista znajdą ten folder tutaj;

Jeśli jednak używasz systemu Windows XP, wpisz %Dane aplikacji% w systemie Windows Uruchom konsolę i naciśnij Enter.

Kiedyś rozszerzenia folder jest otwarty, utwórz nowy folder o nazwie [email protected] w tym.

Otwórz nowo utworzony folder i utwórz nowy katalog, a mianowicie chrom, wraz z dwoma plikami - chrome.manifest i install.rdf. Teraz będziemy edytować te pliki w edytorze tekstu, uważamy, że możesz użyć dowolnego edytora z obsługą utf-8, takiego jak - wbudowany Notatnik Windows.

Po pierwsze, otwórz chrome.manifest plik i wstaw następujące wiersze kodu init. Poniższy kod działa również w przypadku poczty Thunderbirda, tworzenia wiadomości i okien książki adresowej oraz Sunbird. Jeśli jednak musisz używać przycisku tylko w Firefoksie, można wykluczyć wiersze kodu dla Thunderbirda i Sunbirda.

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 wstawieniu kodu do pliku zamknij go po zapisaniu zmian. Teraz edytuj install.rdf plik, musisz wstawić następujące wiersze koduw tym. Możesz zmienić ogólny opis przycisku, tekst można dodać w 6, 7 i 8 wierszach kodu (musi być ujęty w cudzysłów), możesz wprowadzić nazwę przycisku, tekst opisowy i nazwę twórcy.

<?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 zmianie opisu zapisz zmiany i zamknij plik. Zapamiętaj nowo utworzony folder (chrom), w którym utworzymy 3 pliki i wstawimy 2 obrazy. Najpierw utwórz 3 pliki o następujących nazwach;

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

Teraz zastosujemy stylizację przyciskunie jest tutaj niczym skomplikowanym, po prostu zastosujemy podstawową stylizację nad projektem przycisku (zdefiniuj wymiary obrazu i efekt najechania przyciskiem). Jeśli znasz się na projektowaniu pliku CSS (Kaskadowy arkusz stylów), zmiana wartości i efektów będzie łatwa, jednak jeśli słyszysz jego nazwę po raz pierwszy, po prostu wstaw następujące wiersze kodu stylu w button.css plik, po zakończeniu zapisz zmiany i zamknij go.

#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 otwórz button.xul plik w edytorze tekstu i wstaw następujące wierszekodu. Pamiętaj, że zapewniamy również kod dla Thunderbirda i Sunbirda. Jeśli postępujesz zgodnie z tym przewodnikiem tylko dla Firefoksa, możesz wykluczyć wiersze związane z Thunderbirdem i Sunbirdem.

<?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 musisz wstawić dwa pliki obrazów o nazwach button-1.jpg i Icon.jpg o wymiarach odpowiednio 40 × 48 i 48 × 48uzyskać najlepsze wyniki. Można jednak tworzyć obrazy o dowolnym rozmiarze nieprzekraczającym 48 pikseli szerokości i długości. Poniżej znajdują się obrazy przycisków, których używamy - button-1.jpg obraz dotyczy przycisku paska narzędzi o odpowiednich rozmiarach (duży i mały), a efekt najechania można zobaczyć poniżej obu domyślnych rozmiarów obrazów. Icon.jpg obraz odnosi się do obrazu głównego ikony rozszerzenia (tego, który zobaczysz w galerii rozszerzeń przeglądarki Firefox)

button-1.jpg

Icon.jpg

Po utworzeniu przejdź do 5. pliku - button.js. Ten plik JavaScript ma duże znaczenie,ponieważ określi główną funkcjonalność przycisku. Możesz dodać przykładowy skrypt, który monituje komunikat o przetestowanie funkcjonalności lub przejść do skryptu zaawansowanego, aby zrobić co chcesz. Istnieje również wiele skryptów zaprojektowanych specjalnie w celu spełnienia własnych wymagań, możesz też sprawdzić tutaj proste, ale przydatne skrypty. Ponieważ ten przewodnik jest przeznaczony dla użytkowników na poziomie podstawowym, stworzymy prosty element zakładki, który otworzy określoną stronę internetową. Otworzyć button.js plik i wstaw następujące wiersze kodu, aby utworzyć przycisk zakładki (do wyświetlenia na pasku narzędzi Firefox).

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

Teraz możesz już iść, uważamy, że sprawdziszkod wstawiony we wspomnianych plikach i ponownie sprawdź wymiary obrazu. Aby zainstalować nowo utworzone rozszerzenie, zamknij wszystkie działające instancje Firefoksa, a następnie uruchom je. Jeśli wszystko poszło dobrze, prawdopodobnie pojawi się monit o instalację nowego dodatku, co oznacza, że ​​rozszerzenie zostało pomyślnie zainstalowane.

Aby nowo utworzony przycisk pojawił się na pasku narzędzi nawigacyjnych, w menu Widok w podmenu Paski narzędzi kliknij Dostosuj.

Pojawi się okno dialogowe Dostosuj pasek narzędzimusisz przeciągnąć nowo utworzony przycisk na pasek narzędzi nawigacyjnych. Po włożeniu możesz także zmienić jego położenie, przeciągając go w dowolne miejsce.

Teraz wystarczy kliknąć przycisk, aby sprawdzić funkcjonalność wstawioną do pliku JavaScript.

Wynikowa funkcja przycisku tozdefiniowane przez użytkownika, więc to od twoich umiejętności zależy, ile możesz skalibrować jego funkcji. Początkujący użytkownicy mogą tworzyć skróty, łączyć aplikacje, projektować zakładki, natomiast użytkownicy znajdujący się w stanie zawieszenia pomiędzy poziomem średnim a ekspertem z pewnością mogą z niego lepiej korzystać i dodawać wymagane funkcje do głównego pliku JavaScript.