हम फ़ायरफ़ॉक्स में एक घंटे में आवश्यक जोड़ते हैं

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

कम शुरुआत

मैं तुरंत एक आरक्षण करना चाहता हूं: निम्नलिखित सभी एफएफ 4 में ही काम करेंगे। मोज़िला के सहयोगियों ने एपीआई को इस तरह से फिर से डिजाइन किया है कि ब्राउज़र के दोनों संस्करणों के लिए दो एक्सटेंशन बनाने में आसान है, जैसे कि फॉर्म appversion>=4.0 के अनुशंसित नूडल्स लिखना।
So.
शुरुआत के लिए, हमारे भविष्य के विस्तार का कंकाल बनाएं। उन्होंने हमारा ख्याल रखा, इसलिए बस मदद माँगें । हम एक साधारण मोल्ड में भरते हैं - और समाप्त कंकाल डाउनलोड करते हैं। हमारे उदाहरण के लिए, हमने सेटअप डायलॉग के बिना एक्सटेंशन को चुना, टूलबार पर केवल एक बटन के साथ। यहाँ जनरेटर हमारे लिए क्या किया है:



मुझे पता नहीं है कि आइकन कैसे बनाए जाते हैं, इसलिए हम इसे एक ऐसी सेवा से उधार लेंगे जो हमारे लिए मुख्य काम करेगी (ऊपर दिए गए स्क्रीनशॉट में, मैंने इसे पहले ही skin फ़ोल्डर में जोड़ दिया है)। तो फ़ाइलों के इस सेट के साथ आगे क्या करना है?
सबसे पहले, हम बटन शिलालेख और /chrome/locale/en-US/overlay.dtd फ़ाइल में टूलटिप को ठीक करेंगे:

 <!ENTITY typographToolbarButton.label "Typo!"> <!ENTITY typographToolbarButton.tooltip "Proceed typography of selected text against Lebedev's tool"> 

फिर हमारे आइकन को डिफ़ॉल्ट रूप से रोल करने वाले के लिए प्रतिस्थापित करें:

 pushd chrome/skin && mv favicon.png toolbar-button.png && popd 

अब यह केवल दबाने की प्रतिक्रिया को फिर से लिखना है।

कुछ कोड

टाइपोग्राफ का उपयोग करना मेरे लिए सुविधाजनक है: यदि इनपुट क्षेत्र ( textarea ) में ध्यान केंद्रित किया गया है और पाठ का एक टुकड़ा वहां हाइलाइट किया गया है, तो हम इसे टाइप textarea । यदि पाठ चयनित नहीं है, तो हम क्लिपबोर्ड की सामग्री टाइप करते हैं। ठीक है, अगर ध्यान कहीं और है - हम कुछ नहीं करते :-)। इसलिए, हमें यह सीखने की ज़रूरत है कि क्लिपबोर्ड के साथ कैसे काम किया जाए (यह सबसे गैर-तुच्छ हिस्सा है)।
अच्छा, चलिए शुरू करते हैं। ये सभी संपादन /chrome/content/overlay.js फ़ाइल पर जाएंगे।
मैंने इस जादू को कहीं कहीं MDN के कटोरे में खोदा:

 var getClipboard = function (flavor) { if (!flavor || flavor == "") flavor = "text/unicode"; var trans = Components.classes["@mozilla.org/widget/transferable;1"] .createInstance(Components.interfaces.nsITransferable); var clip = Components.classes["@mozilla.org/widget/clipboard;1"] .getService(Components.interfaces.nsIClipboard); if (!clip || !trans) return ''; trans.addDataFlavor(flavor); clip.getData(trans, clip.kGlobalClipboard); var str = new Object(); var strLength = new Object(); try { trans.getTransferData(flavor, str, strLength); if (str) str = str.value.QueryInterface(Components.interfaces.nsISupportsString); } catch (e) { // it's OK, skipping str = null; } return str ? str.data.substring(0, strLength.value / 2) : ''; } 

हम क्लिपबोर्ड की सामग्री, या एक खाली स्ट्रिंग लौटाते हैं। लगता है यहाँ पर टिप्पणी करने के लिए कुछ भी नहीं है।
हमें इनपुट फ़ोकस को भी पकड़ने की ज़रूरत है (यह कोड, इसकी तुच्छता के कारण, मैं पर्दे के पीछे छोड़ दूँगा)।
और अंत में, पाठ को मुद्रण सेवा में भेजा जाना चाहिए:

 typo : function () { var focused = document.commandDispatcher.focusedElement; if (!focused || focused.tagName.toLowerCase() != 'textarea') { return; } if (focused.selectionStart != focused.selectionEnd ) { text = focused.value.substring(focused.selectionStart, focused.selectionEnd); } else { text = getClipboard(); } text = text.replace (/&/g, '&'); text = text.replace (/</g, '<'); text = text.replace (/>/g, '>'); var xmlRequest = '<?xml version="1.0" encoding="UTF-8"?>' + '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' + 'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' + 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">' + '<soap:Body>' + '<ProcessText xmlns="http://typograf.artlebedev.ru/webservices/">' + '<text>' + text + '</text>' + '<entityType>' + 3 + '</entityType>' + '<useBr>' + 0 + '</useBr>' + '<useP>' + 0 + '</useP>' + '</ProcessText>' + '</soap:Body>' + '</soap:Envelope>'; var req = new XMLHttpRequest(); req.open('POST', 'http://typograf.artlebedev.ru/webservices/typograf.asmx', true); req.onreadystatechange = function (aEvt) { if (req.readyState == 4) { if (req.status == 200) { var response = req.responseText; var re = /<ProcessTextResult>\s*((.|\n)*?)\s*<\/ProcessTextResult>/m; response = re.exec (response); response = RegExp.$1; response = response.replace (/>/g, '>'); response = response.replace (/</g, '<'); response = response.replace (/&/g, '&'); insertText(response, focused); } else { // smth went wrong — just skip it } } }; req.send(xmlRequest); } 

वह, वास्तव में, सब है। यह बटन दबाए गए ईवेंट हैंडलर से typo फ़ंक्शन को कॉल करने के लिए रहता है:

 onToolbarButtonCommand: function(e) { typograph.typo(); } 

और हमारे सभी कबाड़ को संग्रह में पैक करें:

 #!/bin/bash if [ -e build ]; then rm -rf build; fi mkdir -p build cp -r install.rdf chrome.manifest chrome defaults build pushd build/chrome >/dev/null && zip -r typograph.jar content/* skin/* locale/* && popd >/dev/null || echo 'Unable to produce jar :-(\n' pushd build && zip -r typograph-4.0.xpi install.rdf chrome.manifest chrome/* defaults/* && popd >/dev/null || echo 'Unable to produce .xpi :-(\n' if [ -e dist ]; then rm -rf dist; fi mkdir -p dist cp build/typograph-4.0.xpi dist/ 

संपूर्ण उदाहरण कोड और परिणामी विस्तार लोगों पर लिया जा सकता है। XPI एक एक्सटेंशन फ़ाइल है, यदि आप इसे ज़िप से अनज़िप करते हैं, तो कोड स्वयं अंदर होगा।