इसलिए,
फ़ायरफ़ॉक्स को संस्करण
19 में अपडेट करने के बाद, प्रिय Yandex.Bar एक्सटेंशन पूरी तरह से बंद हो गया। मैं यह याद रखना नहीं
भूलूंगा कि Yandex.Bar को
Yandex.Items ने बदल दिया था, जिसे किसी की तुलना में थोड़ा अधिक पसंद किया गया था, और इसलिए उन्हें
5 गेंदों में से 2 अच्छी तरह से योग्य मिले।
आपको यह पसंद क्यों नहीं आया? पता बार को बदल दिया गया, यह मेल को देखने के लिए असुविधाजनक हो गया, बुकमार्क को बदल दिया और पता बार करेक्टर को हटा दिया (पुंटो स्विचर को स्थापित करने के बहाने, जो एक साधारण कर्मचारी के लिए अच्छा हो सकता है, लेकिन प्रोग्रामर के लिए नहीं। इसलिए, इसे स्थापित करते ही लगभग तुरंत हटा दिया गया। यदि यह अनुकूलित किया जा सकता है, तो सभी समान इच्छा समाप्त हो गई थी)।
थोड़ी देर बाद, उनका अपना समान एक्सटेंशन बनाने का निर्णय लिया गया, जिसमें मेल और एड्रेस बार करेक्टर देखने जैसे बन्स शामिल होंगे। ठीक है, यदि आप नहीं, तो दूसरा कौन है?
सबसे पहले, यह तय किया गया कि अपनी बाइक न बनाएं और Yandex.Bar को फिर से जीवित करें, जो ब्राउज़र के संस्करण 19 में काम नहीं करना चाहता था। इंटरनेट पर, उन्होंने सुझाव दिया कि विस्तार एक नियमित ज़िप संग्रह है। उन्होंने खोला, देखा, भयभीत थे और बंद हो गए। पुनर्जीवित होना संभव नहीं था, यहां तक कि सभी इच्छा के साथ।
फिर हम डेवलपर के केंद्र पर जाते हैं:
बिल्डर ।addons.mozilla.org । मैंने वेब संपादक का उपयोग करना पसंद किया, हालांकि कुछ स्थानों पर कभी-कभी यह बहुत आसानी से काम नहीं करता था। अन्य एक्सटेंशन को देखने के बाद, कोड को उधार लेना और डिवाइस को बोने के पूरे बिंदु की थोड़ी समझ, सब कुछ पहले एक दीवार-लटका मशीन के साथ शुरू हुआ और एक फ़ाइल के साथ समाप्त हो गया।
बिल्डर में 3 खंड शामिल हैं: यह स्क्रिप्ट (लीब) के साथ एक अनुभाग है, डाउनलोड करने योग्य सामग्री (चित्र, शैली और स्क्रिप्ट) के साथ एक खंड और तैयार पुस्तकालयों (पुस्तकालय) के साथ एक खंड
वैसे, यहाँ प्रलेखन है:
addons.mozilla.org/en-US/developers/docs/sdk/latest , अच्छी तरह से लिखा गया है।
एक्सटेंशन
main.js फ़ाइल लोड करके शुरू होता है।
फ़ंक्शन को कहा जाता है:
Export.main ।
उदाहरण main.js फ़ाइल:
const tabs = require("tabs"); exports.main = function (options) { tabs.on("ready", function(tab){ tab.attach({ contentScript: "document.addEventListener('click', function(e) { \ var target = e.target; \ if(target.tagName == 'A') { \ var mail_to = target.href.match(/^mailto:(.*)/i); \ if(mail_to != null) { \ e.preventDefault(); \ var form = document.createElement('form'); \ form.setAttribute('action','http://mail.yandex.ru/neo2/#compose/mailto=' + mail_to[1]); \ form.setAttribute('target','_blank'); \ document.getElementsByTagName('body')[0].appendChild(form); \ form.submit(); \ form.parentNode.removeChild(form); \ } \ } \ }, false);" }); }); }
इस कोड में किस तरह का जादू होता है?
पहला कदम
टैब मॉड्यूल को कनेक्ट करना है।
इस स्थिति में, यह आपके जावास्क्रिप्ट कोड को ब्राउज़र पेज में जोड़ने का काम करता है।
यानी हमारे पास क्या है: जब एक पहले से ही दस्तावेज़ घटना होती है, तो दस्तावेज़ के शरीर में कोई जावास्क्रिप्ट कोड जोड़ा जाता है। यह उदाहरण एक लिंक हैंडलर जोड़ता है जिसका पता
mailto से शुरू होता है।
ठीक है, चलो कुछ और अधिक जटिल है। अपने बटन को शीर्ष बार में जोड़ें!
फिर से, हमने साइकिल का निर्माण नहीं किया, लेकिन स्पष्ट विवेक के साथ, हम तैयार
टूलबार बटन कम्प्लीट लाइब्रेरी ले लेंगे।
इसमें एक ब्राउज़र बार में एक बटन जोड़ने का एक उदाहरण है। मुझे लगता है कि आपको इसे यहां नहीं फेंकना चाहिए, क्योंकि बहुत कोड है।
तो, एक बटन है, एक आइकन सेट किया गया है, सब कुछ ठीक लग रहा है, लेकिन बहुत नहीं। यह Yandex.Bar में कैसे था? अरे हाँ, आइकन के विपरीत, अपठित संदेशों का एक काउंटर भी था।
यहाँ मुझे एक काउंटर जोड़ने के कई तरीके मिले:
- सार्वभौमिक लेकिन हल्का (शैलियों का उपयोग करके)
- बहुत सार्वभौमिक नहीं है, लेकिन पहले की तरह सरल नहीं है (कैनवास का उपयोग करके)
हालाँकि, दूसरा तरीका इंटरनेट पर टाइप करके पाया गया था। लेकिन मैंने पहली बार लिया।
हम जानते हैं कि शीर्ष बार उनके वर्गों, पहचानकर्ताओं, गुणों और उनके साथ काम करने के तरीकों के साथ तत्वों का एक ही सेट है।
टाइप करके:
for(var val in document.getElementById('yandex-menu')) { console.log(val); }
यह पाया गया कि विधियां उन लोगों के साथ बिल्कुल मेल खाती हैं जिनका उपयोग हम आमतौर पर साइट तत्वों के साथ काम करते समय करते हैं। लेकिन मैं ध्यान देता हूं कि मानक द्वारा ब्राउज़र को पता नहीं है कि
दस्तावेज़ या
विंडो एक्सटेंशन में क्या
है (और अभी भी मतभेद हैं)।
उदाहरण समाधान:
var wuntils = require('sdk/window/utils'); var window = wuntils.getMostRecentBrowserWindow(); var document = window.document;
मैं ध्यान देता हूं कि बिल्डर का विकास अभी भी खड़ा नहीं है और अगर पहले से सक्रिय खिड़की प्राप्त करने का तरीका
इस तरह था :
var winUtils = require("window-utils"); for (window in winUtils.windowIterator()) { if ("chrome://browser/content/browser.xul" != window.location) return; console.log("An open window! " + window.location); }
अब सब कुछ बहुत आसान है (मैंने ऊपर एक उदाहरण दिया)।
खैर, सुविधाओं के बारे में थोड़ी बात करने के बाद, मैं बटन के लिए एक काउंटर जोड़ने पर लौटूंगा।
स्मार्ट लोगों ने सुझाव दिया कि मानक रूप से एक बटन के
लेबल फ़ील्ड की शैली
प्रदर्शित होती है: कोई नहीं; , इसलिए किसी तरह मुझे अपने
सीएसएस कोड को एक बार में इंजेक्ट करने की आवश्यकता थी। समाधान, जैसा कि यह निकला, जटिल नहीं है (मैं आपको इसे एक फ़ाइल में लपेटने की सलाह देता हूं जिसे आवश्यकतानुसार शामिल किया जाएगा):
const { Cc, Ci } = require('chrome'); const { when: unload } = require('sdk/system/unload'); var ios = Cc['@mozilla.org/network/io-service;1'].getService(Ci.nsIIOService); exports.addXULStylesheet = function addXULStylesheet(url) { var uri = newURI(url); var sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService); sss.loadAndRegisterSheet(uri, sss.USER_SHEET); unload(function () { if (sss.sheetRegistered(uri, sss.USER_SHEET)) { sss.unregisterSheet(uri, sss.USER_SHEET); } }); return sss; }; function newURI(uriStr, base) { try { var baseURI = base ? ios.newURI(base, null, null) : null; return ios.newURI(uriStr, null, baseURI); } catch (e) { if (e.result === chrome.Cr.NS_ERROR_MALFORMED_URI) { throw new Error("malformed URI: " + uriStr); } else if (e.result === chrome.Cr.NS_ERROR_FAILURE || e.result === chrome.Cr.NS_ERROR_ILLEGAL_VALUE) { throw new Error("invalid URI: " + uriStr); } } return null; }
और
exprorts.main फ़ंक्शन की तरह कुछ जोड़ें (हालांकि आप इसे कहीं भी जोड़ सकते हैं):
stylesheet.addXULStylesheet(data.url("stylesheet.css"));
सामग्री में
स्टाइलशीट.एससी फ़ाइल बनाना न भूलें।
मेरी फ़ाइल में निम्न जैसा कुछ है:
#yandex-mail { min-width: 16px; } #yandex-mail .toolbarbutton-text { float: right !important; display: inline-block !important; font-size: 13px; padding-left:20px; background: url(data:image/png;base64,iVB.............OCYII=) no-repeat left center; } #yandex-mail .toolbarbutton-icon { display: none; }
हम आइकन क्यों छिपाते हैं और पृष्ठभूमि को क्यों जोड़ते हैं? ऐसा इसलिए है क्योंकि अगर ऐसा नहीं किया जाता है, तो ब्लॉक को हमेशा
डिस्प्ले के रूप में
प्रदर्शित किया जाता
है: ब्लॉक , कोई फर्क नहीं पड़ता कि मैं क्या मूल्य निर्धारित करता हूं (वैसे, इस विषय पर कोई भी जान सकता है?) इसलिए, आपको इतना चालाक होना चाहिए।
अन्य साइटों से सामग्री डाउनलोड करने और xml पार्स करने के मुद्दे का भी सामना करना पड़ा।
उसने जल्दी से पहले वाले का पता लगा लिया, दूर जाने की कोई ज़रूरत नहीं:
अनुरोधलेकिन दूसरे को टिंकर करना पड़ा।
जैसा कि हम जानते हैं, आप कई कार्यों का उपयोग करते हुए दस्तावेज़ के
डोम xml प्राप्त कर सकते हैं:
- XMLHttpRequest - क्योंकि गिरा दिया एक क्रॉस-डोमेन अनुरोध त्रुटि दी (शायद मैंने कुछ गलत किया?)
- DOMParser - लेकिन यहां भी, टिंकर करना पड़ा
वास्तविक उपद्रव क्या है: जैसा कि
खिड़की से मिलता है , यहाँ है:
var {Cc, Ci} = require("chrome"); var parser = Cc["@mozilla.org/xmlextras/domparser;1"].createInstance(Ci.nsIDOMParser); var dom = parser.parseFromString(xmlPrepare (text), "application/xml");
यह है कि फ़ायरफ़ॉक्स के लिए एक्सटेंशन बनाना jQuery के लिए प्लगइन्स बनाने से अलग नहीं है :)
वैसे, इस दिन के लिए अंतिम निर्माण:
CustomYandexBar , अभी भी परीक्षण किया जा रहा है।
सूत्र , उनके पास बहुत सारी उपयोगी चीजें हैं।
अगर कोई ऐसा नहीं करता है, तो मैं "उनके" चित्रों, ब्रांड या इस तरह का उपयोग करता हूं। - लिखो।