Extensionizr - क्रोम ऐड-ऑन टेम्पलेट इंजन

हाय हब्र्वाचें!
कंपनी Zfort Group ( यहां ) के ब्लॉग में मेरे प्रोजेक्ट को देखने के बाद, मैंने आपके साथ प्रोजेक्ट का अवलोकन और इसके कार्यान्वयन को साझा करने का निर्णय लिया।

विचार: जल्दी से क्रोम ऐड-ऑन के लिए एक बुनियादी टेम्प्लेट बनाएं, जिसमें मेनिफेस्ट में शामिल है। संदेश।
Extensionizr.com एक वेब एप्लिकेशन के रूप में बनाया गया है और आउटपुट पर एक ज़िप संग्रह बनाता है।
सब कुछ क्लाइंट साइड पर होता है, जिसमें जावास्क्रिप्ट का उपयोग करते हैं, जिसमें आर्काइविंग भी शामिल है।

यदि नहीं, तो निर्माण करें:

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

प्रकाश चालू है!

और फिर यह मुझ पर हावी हो गया कि अगर जॉनाटन वेर्रेचिया की ओर से Initializr.com जैसी परियोजना थी जो मुझे क्रोम एक्सटेंशन के लिए एक टेम्पलेट प्राप्त करने में मदद करने के लिए थी, तो मुझे शुरुआत से ही सब कुछ नहीं लिखना होगा।
12 घंटे बाद, मेरा प्रोजेक्ट तैयार था!

प्रक्रिया है

सबसे पहले मैंने क्रोम एक्सटेंशन के लिए एक डिज़ाइन टेम्पलेट खोजने की कोशिश की, और मुझे वास्तव में एक जोड़ी मिली, यहाँ और यहाँ ।
मुझे याद आया कि Initializr.com एक ओपन सोर्स प्रोजेक्ट है, और मुझे एहसास हुआ कि मैं इस पर अपने विचार को आधार बना सकता हूं, और मैं अन्वेषण के लिए गया।
जैसा कि यह पता चला है, Initializr इतना आसान नहीं है, साइट के अलावा, इसमें जावा में सर्वर-साइड कोड है!
मुझे जावा पता नहीं है, इसलिए मैंने यह देखने की कोशिश भी नहीं की कि वहां क्या हो रहा था, इसके बजाय, क्लाइंट-साइड उत्साही के रूप में, मैं यह सोचने लगा कि क्या यह केवल HTML और जावास्क्रिप्ट का उपयोग करके बनाया जा सकता है।
अंत में, यह 2012 है, और मैं IE के बारे में एक लानत दे सकता हूं, क्योंकि मैं केवल यह मान सकता हूं कि जो लोग क्रोम के लिए एक्सटेंशन का निर्माण करना चाहते हैं, उनके पास क्रोम स्थापित होगा।

Google I / O और Zip.js

मुझे एरिक बिडेलमैन का भाषण " html5 कैन" याद आया, जहां फाइल सिस्टम (फाइलसिस्टम एपीआई) के साथ काम करने का एक डेमो था, जिसमें आप जावास्क्रिप्ट का उपयोग करके फाइल बना और डाउनलोड कर सकते थे।
दुर्भाग्य से, उसकी परियोजना में आप फ़ाइलों को डाउनलोड नहीं कर सकते हैं, लेकिन केवल डाउनलोड करें और बनाएं। और पीढ़ी के अंत में मुझे एक ज़िप संग्रह की आवश्यकता थी।
सौभाग्य से, सुपर-प्रतिभाशाली गिल्डस लोर्मेउ ने ZIP.js पुस्तकालय लिखा, जो वास्तव में मुझे चाहिए था!
पुस्तकालय के 2 मुख्य भाग हैं। ZIP.js और ZIP-fs.js, बाद वाले को एक संग्रह के भीतर फ़ाइलों और निर्देशिकाओं की संरचना के माध्यम से चलने के लिए उपयोग किया जाता है।

वह सब छोड़ दिया गया था जो एपीआई के आधार को सीखने के लिए था (डेमो बहुत उपयोगी थे, जैसा कि ज़िप फ़ाइल के अंदर परीक्षण फाइलें थीं), बाकी आसान था।

यह सब कैसे काम करता है

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

function importZip(callback){ zipFs.importHttpContent("ext.zip", false, function() { ... }); }, onerror); }; 

उपयोगकर्ता कई विकल्पों का चयन करने के बाद, Extensionizr संग्रह से जोड़ने और हटाने के लिए गुणों की एक सूची बनाता है।

सभी मापदंडों को एकत्र किए जाने के बाद, और उपयोगकर्ता डाउनलोड फ़ाइल बटन पर क्लिक करता है, Extensionizr संग्रह को संपादित करता है, अब आवश्यक फ़ाइलों को नहीं हटाता है और मैनिफ़ैक्शन .json को संपादित करता है, और उसके बाद इस संग्रह के Base64 को उत्पन्न करता है और इसे <a> टैग के href पैरामीटर में सम्मिलित करता है।

 zipFs.exportData64URI(function (data) { var clickEvent = document.createEvent("MouseEvent"); clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); downloadButton.href = data; downloadButton.download = 'extensionizr_custom' + Date.now() + '.zip'; downloadButton.dispatchEvent(clickEvent); event.preventDefault(); return false; }); 

डाउनलोड संवाद आरंभ करने के लिए, क्रोम में एक पैरामीटर है
?

?
12 , ( , , .)

, , , .

Github, , , , .

, .


?

?
12 , ( , , .)

, , , .

Github, , , , .

, .


?

?
12 , ( , , .)

, , , .

Github, , , , .

, .