Πώς να δημιουργήσετε και να προσθέσετε ένα κουμπί στη γραμμή εργαλείων πλοήγησης του Firefox [Οδηγός]

Σήμερα, φέρνουμε έναν οδηγό Firefox πουο καθένας μπορεί να ακολουθήσει για να δημιουργήσει ένα προσαρμοσμένο κουμπί στη γραμμή εργαλείων πλοήγησης. Μαζί με τα ορατά κουμπιά στη γραμμή εργαλείων πλοήγησης, υπάρχει μια λίστα με άλλα κουμπιά που έχουν διαφορετικές λειτουργίες που παρέχονται στον Firefox και μπορούν να προστεθούν οπουδήποτε στη γραμμή εργαλείων και μπορούν να προσαρμοστούν ανάλογα με τις ανάγκες σας. Δεδομένου ότι η θέση και η συμπεριφορά του κουμπιού μπορούν να αλλάξουν χωρίς να απαιτούνται πρόσθετες γνώσεις, μπορεί κανείς εύκολα να δημιουργήσει μια νέα επέκταση που συμπεριφέρεται σύμφωνα με τις οδηγίες, κάθεται σε καθορισμένη θέση, ενώ μπορεί να προσαρμόζεται σε μεγάλο βαθμό. Αυτή η ανάρτηση καλύπτει τον τρόπο δημιουργίας μιας απλής επέκτασης - ένα κουμπί της γραμμής εργαλείων που θα παρέχει μια απλή λειτουργικότητα.

Για να ξεκινήσετε, πρώτα πρέπει να μάθετε επεκτάσεις φάκελο (ο οποίος διαμένει στο φάκελο Προφίλ του Firefox). Οι χρήστες Windows 7 και Windows Vista θα βρουν αυτόν τον φάκελο εδώ.

Ωστόσο, εάν χρησιμοποιείτε τα Windows XP, πληκτρολογήστε %Δεδομένα εφαρμογής% στην κονσόλα Εκτέλεση των Windows και πατήστε Enter.

Μόλις το επεκτάσεις , ανοίξτε το φάκελο, δημιουργήστε ένα νέο φάκελο με το όνομα του [email protected] μέσα σε αυτό.

Ανοίξτε το φάκελο που δημιουργήθηκε πρόσφατα και δημιουργήστε έναν νέο κατάλογο χρώμιο, μαζί με δύο αρχεία - chrome.manifest και install.rdf. Τώρα θα επεξεργαστούμε αυτά τα αρχεία στον επεξεργαστή κειμένων, σας συνιστούμε να χρησιμοποιήσετε οποιοδήποτε πρόγραμμα επεξεργασίας με υποστήριξη utf-8, όπως το ενσωματωμένο στο Notepad Windows.

Πρώτα, ανοίξτε chrome.manifest και εισαγάγετε τις ακόλουθες γραμμές κώδικα init. Ο κώδικας που παρέχεται παρακάτω είναι επίσης λειτουργικός για τα μηνύματα Thunderbird, τα compose και τα παράθυρα του βιβλίου διευθύνσεων και για το 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

Τώρα θα εφαρμόσουμε το στυλ στο κουμπί, εκείδεν είναι καθόλου περίπλοκο εδώ, θα εφαρμόσουμε απλώς ένα βασικό στυλ πάνω από το σχεδιασμό του κουμπιού (καθορίστε τις διαστάσεις της εικόνας και την επίδραση του hover στο κουμπί). Αν είστε εξοικειωμένοι με το σχεδιασμό ενός αρχείου CSS (Cascading Style Sheet), η αλλαγή των τιμών και των αποτελεσμάτων θα είναι ένα cinch, ωστόσο, εάν ακούτε το όνομά του για πρώτη φορά, απλά εισάγετε τις ακόλουθες γραμμές στυλ κώδικα 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 αντίστοιχανα έχετε τα καλύτερα αποτελέσματα. Ωστόσο, μπορείτε να δημιουργήσετε εικόνες οποιουδήποτε μεγέθους που δεν υπερβαίνει τα 48px πλάτος και μήκος. Παρακάτω μπορείτε να δείτε τις εικόνες κουμπιών που χρησιμοποιούμε - button-1.jpg η εικόνα είναι για το κουμπί της γραμμής εργαλείων με τα αντίστοιχα μεγέθη (μεγάλα και μικρά) και το εφέ κίνησης μπορεί να δει κάτω από τα μεγέθη των προεπιλεγμένων εικόνων. Icon.jpg η εικόνα αναφέρεται στην κύρια εικόνα εικονιδίου επέκτασης (αυτή που θα δείτε στο gallery επέκτασης του 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.