फ़ायरफ़ॉक्स ऐड-ऑन डेवलपमेंट में त्वरित शुरुआत

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


मुझे लगता है कि हर कोई जानता है कि फ़ायरफ़ॉक्स ऐड-ऑन को एक्सपीआई फ़ाइलों के रूप में वितरित किया जाता है। एक xpi फ़ाइल एक ज़िप संग्रह है, जिसके अंदर एक निश्चित संख्या में फाइलें और निर्देशिकाएं होती हैं। फाइलें js, css, xul, इमेज फाइलें हो सकती हैं और ऐसा लगता है, यहां तक ​​कि जार भी। निर्देशिकाएँ आमतौर पर मानक नाम दिए गए हैं, लेकिन कोई सख्त आवश्यकताएं नहीं हैं।

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

मुझे लगता है कि आपके लिए उसी रास्ते से जाना दिलचस्प नहीं होगा, जो मैंने "हैलो, वर्ल्ड" बनाने के लिए किया था, और आप संचित जानकारी ले सकते हैं और तुरंत आगे बढ़ सकते हैं।

काम की तैयारी


मुझे यह पसंद है जब यह काम करने के लिए सुविधाजनक है। इसलिए, मैं अपनी सामान्य कार्यशैली के लिए उपयुक्त साधनों की खोज से हैरान था। मैं विंडोज 7 के तहत काम करता हूं, और मैं इसके बारे में लिखता हूं।

एक अलग फ़ायरफ़ॉक्स प्रोफ़ाइल बनाएँ:
फ़ायरफ़ॉक्स को बंद करें, win + r दबाएं और फ़ायरफ़ॉक्स पीए पर अमल करें
प्रोफ़ाइल बनाते समय, आपको एक ऐसे फ़ोल्डर का चयन करना होगा, जो आसानी से सुलभ हो, उदाहरण के लिए:
D: \ प्रयोगों \ firefox
मेरे टेम्प्लेट प्रोजेक्ट helloworld.xpi को डाउनलोड और इंस्टॉल करें । निर्देशिका के अंदर स्थापना के बाद

D: \ प्रयोगों \ firefox \ एक्सटेंशन

नाम के साथ एक फ़ोल्डर

helloworld@ru.wikiversity.org.xpi

हो सकता है कि समुदाय ने मुझे माफ़ कर दिया हो, मेरी उपलब्धियों की जानकारी पहली बार विकीवर्सिटी पर दिखाई दी। लेकिन यह लेख एक कॉपी-पेस्ट नहीं है, और, मुझे आशा है, थोड़ा अलग अर्थ सम्वेदना है।

Helloworld.xpi संग्रह की सामग्री


मुझे यह अच्छी तरह से पता नहीं है कि प्रत्येक फ़ाइल का उद्देश्य क्या है और इससे भी अधिक हर शब्द। मैंने केवल उन्हीं पलों को बाहर किया, जिन पर उन्होंने खुद ध्यान आकर्षित किया था।

सामग्री \ overlay.xul

<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://helloworld/skin/overlay.css" type="text/css"?> <!DOCTYPE overlay SYSTEM "chrome://helloworld/locale/overlay.dtd"> <overlay id="helloworld-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="helloButton" label="&helloworld;" oncommand="alert('Hello, World!');"/> </toolbarpalette> </overlay> 

यह मुख्य फाइल है, यह कहता है कि बटन को BrowserToolbarPalette में जोड़ा जाना चाहिए। कहीं मैंने देखा कि सभी पैनलों में पहचानकर्ता हैं। ऐसी फ़ाइल में, आप न केवल एक बटन बना सकते हैं, बल्कि अपना खुद का पैनल भी बना सकते हैं। कोड XUL में लिखा है।

एक्सयूएल में जावास्क्रिप्ट हो सकता है, या बाहरी फ़ाइलों से जावास्क्रिप्ट को शामिल किया जा सकता है।
 <script> function showHello(){ alert('hello!'); } </script> ... <toolbarbutton id="helloButton" label="&helloworld;" oncommand="showHello();"/> 


locale \ en-US \ overlay.dtd


 <!ENTITY helloworld "Hello World!"> 

यह केवल पाठ स्थिरांक का संदर्भ है।

त्वचा \ ...

इस फ़ोल्डर में बटन के लिए छवि और शैलियों के साथ फ़ाइल है

chrome.manifest

 content helloworld content/ overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul locale helloworld en-US locale/en-US/ skin helloworld classic/1.0 skin/ style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css 

जाहिर है, यह एक महत्वपूर्ण फ़ाइल है जो एप्लिकेशन को कॉन्फ़िगर करती है। मुझे अधिक विस्तार से समझ नहीं आया।

install.rdf

 <?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:id>helloworld@ru.wikiversity.org</em:id> <em:name>Hello World extension for Firefox</em:name> <em:version>1.0</em:version> <em:description>Demo Hello World extension.</em:description> <em:creator>Wikiversity student</em:creator> <em:unpack>true</em:unpack> <!--      --> <!-- Firefox --> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.6</em:minVersion> <em:maxVersion>8.0.*</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF> 

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

कार्य प्रक्रिया


मुझे लगता है कि अधिकांश जेएस डेवलपर्स के वर्कफ़्लो मेरे जैसे दिखते हैं: मैंने कुछ लाइनें लिखीं - मैंने देखा कि क्या हुआ। XUL में क्या बदल गया है, यह देखने के लिए, आपको फ़ायरफ़ॉक्स को रीबूट करना होगा। यह थोड़ा कष्टप्रद है ... बस थोड़ा सा। क्योंकि मैं समानांतर में इंटरनेट पर प्रलेखन पढ़ना चाहता हूं। और ओवरलोडिंग तेज नहीं है।

मुझे एक्सटेंशन डेवलपर ऐड-ऑन मिला। फ़ायरफ़ॉक्स नियंत्रण कक्ष पर स्थापित करने के बाद, आपको 'सभी क्रोम पुनः लोड करें' बटन को बाहर निकालना होगा। विकसित ऐड-ऑन के कोड में परिवर्तन बटन पर क्लिक करने के तुरंत बाद प्रभावी होंगे।

समारोह पढ़ें


फ़ाइल सिस्टम के साथ काम करने के संदर्भ में, मुझे एक फ़ंक्शन (ज्यादातर कहीं से कॉपी किया गया):
 function read(path) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { alert("Permission to read file was denied."); } var file = Components.classes["@mozilla.org/file/local;1"] .createInstance(Components.interfaces.nsILocalFile); file.initWithPath( path ); if ( file.exists() == false ) { alert("File does not exist"); } var is = Components.classes["@mozilla.org/network/file-input-stream;1"] .createInstance( Components.interfaces.nsIFileInputStream ); is.init( file, 0x01, 00004, null); var sis = Components.classes["@mozilla.org/scriptableinputstream;1"] .createInstance( Components.interfaces.nsIScriptableInputStream ); sis.init( is ); return sis.read( sis.available() ); } alert(read("D:\\1.txt")); 

जैसा कि मैं इसे समझता हूं, फ़ाइलों को लिखना भी संभव है, लेकिन अब इसे समझ में नहीं आया।

निष्कर्ष


फ़ायरफ़ॉक्स ऐड-ऑन के विकास के बारे में मूल रूप से यह सब कुछ है जो मैं कुछ दिनों (कई मुफ्त शाम) में सीख सकता था। मुझे उम्मीद है कि जो लोग पहली बार इस विषय पर आएंगे, उन्हें लेख उपयोगी लगेगा। मेरी राय में, आपके पास एक त्वरित शुरुआत के लिए सब कुछ है: प्रारंभिक जानकारी, उपकरण और एक प्रक्रिया।

मैं पाठकों से दृढ़ता से डांटने के लिए कहता हूं, मैं एक "जानने वाले" व्यक्ति की भूमिका का ढोंग नहीं करता, और मैं शायद ही अतिरिक्त प्रश्न पूछ सकता हूं।

Source: https://habr.com/ru/post/In132936/


All Articles