कैसे बनाएँ और फ़ायरफ़ॉक्स नेविगेशन टूलबार में बटन जोड़ें [गाइड]

आज, हम एक फ़ायरफ़ॉक्स गाइड ला रहे हैं जोकोई भी नेविगेशन टूलबार में एक कस्टम बटन बनाने के लिए अनुसरण कर सकता है। नेविगेशन टूलबार में दृश्यमान बटनों के साथ, फ़ायरफ़ॉक्स में उपलब्ध विभिन्न फ़ंक्शंस वाले अन्य बटनों की एक सूची है, जिन्हें टूलबार पर कहीं भी जोड़ा जा सकता है और आपकी आवश्यकताओं के अनुसार अनुकूलित किया जा सकता है। चूँकि किसी अतिरिक्त ज्ञान की आवश्यकता के बिना बटन की स्थिति और व्यवहार को बदला जा सकता है, इसलिए कोई भी ऐसा नया एक्सटेंशन आसानी से बना सकता है, जो अत्यधिक अनुकूलन योग्य होते हुए भी निर्देशित स्थिति में व्यवहार करता हो। यह पोस्ट कवर करता है कि एक साधारण एक्सटेंशन कैसे बनाया जाए - एक टूलबार बटन जो एक सरल कार्यक्षमता प्रदान करेगा।

शुरू करने के लिए, पहले आपको यह पता लगाना होगा एक्सटेंशन फ़ोल्डर (जो फ़ायरफ़ॉक्स प्रोफाइल फ़ोल्डर में रहता है)। विंडोज 7 और विंडोज विस्टा यूजर्स को यह फोल्डर यहां मिलेगा;

हालाँकि, यदि आप Windows XP का उपयोग कर रहे हैं, तो टाइप करें %एप्लिकेशन आंकड़ा% विंडोज रन कंसोल में और एंटर दबाएं।

एक बार एक्सटेंशन फ़ोल्डर खोला जाता है, के नाम से एक नया फ़ोल्डर बनाएँ [email protected] इस में।

नए बनाए गए फ़ोल्डर को खोलें, और एक नई निर्देशिका बनाएं क्रोम, दो फाइलों के साथ - chrome.manifest तथा install.rdf. अब हम इन फ़ाइलों को टेक्स्ट एडिटर में एडिट करेंगे, हम आपको utf-8 सपोर्ट वाले किसी भी एडिटर का उपयोग करने के लिए कहते हैं, जैसे - विंडोज बिल्ड-इन नोटपैड।

सबसे पहले, खोलें chrome.manifest फ़ाइल और कोड init के बाद लाइनों डालें। नीचे दिया गया कोड थंडरबर्ड मेल, कंपोज़ और एड्रेस बुक विंडो के लिए और सनबर्ड के लिए भी कार्यात्मक है। हालाँकि, यदि आपको केवल फ़ायरफ़ॉक्स में बटन का उपयोग करने की आवश्यकता है, तो थंडरबर्ड और सनबर्ड के लिए कोड की पंक्तियों को बाहर रखा जा सकता है।

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 फ़ाइल (कैस्केडिंग स्टाइल शीट) डिज़ाइन करने से परिचित हैं, तो मूल्यों और प्रभावों को बदलना एक चिंच होगा, हालांकि, यदि आप इसका नाम पहली बार सुन रहे हैं, तो कोड की निम्नलिखित शैली लाइनें डालें 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 आयामों के साथसबसे अच्छा परिणाम प्राप्त करें। हालाँकि, आप किसी भी आकार की छवियां बना सकते हैं जो 48px से अधिक चौड़ाई और लंबाई के अनुसार नहीं है। नीचे आप वह बटन चित्र देख सकते हैं जिसका हम उपयोग कर रहे हैं - button-1.jpg छवि संबंधित आकार (बड़े और छोटे) के साथ टूलबार बटन के लिए है और दोनों डिफ़ॉल्ट छवियों के आकार के नीचे मँडरा प्रभाव देखा जा सकता है। Icon.jpg छवि मुख्य एक्सटेंशन आइकन छवि को संदर्भित करती है (जिसे आप फ़ायरफ़ॉक्स एक्सटेंशन गैलरी में देखेंगे)

button-1.jpg

Icon.jpg

एक बार बनाने के बाद, 5 वीं फ़ाइल पर जाएँ - button.js। यह जावास्क्रिप्ट फ़ाइल बहुत अधिक महत्व रखती है,क्योंकि यह बटन की मुख्य कार्यक्षमता को परिभाषित करेगा। आप एक नमूना स्क्रिप्ट जोड़ सकते हैं जो संदेश को कार्यक्षमता का परीक्षण करने या जो कुछ भी आप चाहते हैं करने के लिए अग्रिम स्क्रिप्ट के लिए जाने का संकेत देता है। विशेष रूप से किसी की आवश्यकताओं को पूरा करने के लिए विशेष रूप से वंचित कई स्क्रिप्ट हैं, आप यहां कुछ सरल लेकिन उपयोगी स्क्रिप्ट भी देख सकते हैं। चूंकि यह मार्गदर्शिका प्राथमिक स्तर के उपयोगकर्ताओं के लिए है, इसलिए हम एक साधारण बुकमार्क आइटम बनाएंगे जो निर्दिष्ट वेबसाइट खोलेगा। को खोलो button.js एक बुकमार्क बटन (फ़ायरफ़ॉक्स टूलबार पर दिखाने के लिए) बनाने के लिए कोड की पंक्तियों का अनुसरण करें।

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

अब आप जाने के लिए अच्छे हैं, हम आपको जाँचने के लिए कहते हैंआपको बताई गई फ़ाइलों में कोड डाला गया है और फिर से छवि आयामों को सत्यापित करें। नव निर्मित एक्सटेंशन को स्थापित करने के लिए, फ़ायरफ़ॉक्स के सभी चल रहे इंस्टेंस को बंद करें और फिर इसे लॉन्च करें। यदि सबकुछ ठीक हो जाता है, तो आप संभवतः नया ऐड-ऑन इंस्टालेशन देख रहे हैं, यह दर्शाता है कि एक्सटेंशन सफलतापूर्वक इंस्टॉल हो गया है।

नेविगेशन टूलबार में नव निर्मित बटन दिखाई देने के लिए, दृश्य मेनू से, टूलबार उप-मेनू के तहत, अनुकूलित करें पर क्लिक करें।

टूलबार कस्टमाइज़ करें संवाद कहाँ से दिखाई देगाआपको नेविगेशन टूलबार पर नए बने बटन को खींचना होगा। एक बार डालने के बाद, आप इसे अपनी पसंद के अनुसार कहीं भी खींचकर इसकी स्थिति बदल सकते हैं।

अब केवल जावास्क्रिप्ट फ़ाइल में डाली गई कार्यक्षमता को सत्यापित करने के लिए बटन पर क्लिक करें।

परिणामी बटन की कार्यक्षमता हैउपयोगकर्ता-परिभाषित, इसलिए यह आपके कौशल पर निर्भर है कि आप इसके कार्यों को कितना कैलिब्रेट कर सकते हैं। नौसिखिए उपयोगकर्ता शॉर्टकट, लिंक एप्लिकेशन, डिज़ाइन बुकमार्क बना सकते हैं, जबकि औसत और विशेषज्ञ स्तर के बीच के उपयोगकर्ता निश्चित रूप से इसका अधिक उपयोग कर सकते हैं और मुख्य जावास्क्रिप्ट फ़ाइल में आवश्यक कार्यक्षमता जोड़ सकते हैं।