👨🏼‍🔧 💨 🧝🏾 हम Google Chrome के लिए एक्सटेंशन लिखते हैं (और इसे प्रकाशित करें) 🥜 🤰🏼 😲

देवियों और सज्जनों! आज हम Google Chrome के लिए एक्सटेंशन लिखने और प्रकाशित करने का प्रयास करेंगे। यह अंग्रेजी से उपयोगकर्ता द्वारा दर्ज किए गए पाठ का रूसी में अनुवाद करेगा और इसके विपरीत।

राजा ने एक घोषणापत्र जारी किया ...

(मैं आपको एक निर्देशिका बनाने की सलाह देता हूं ताकि फाइलें खो न जाएं।)
तो विस्तार कहाँ से शुरू होता है? हां, घोषणापत्र से (क्या आपने ऐसा कहा?)। मैनिफ़ेस्ट JSON प्रारूप में स्वरूपित एक फ़ाइल है, जिसमें सभी एप्लिकेशन संसाधन या एक्सटेंशन इंगित किए जाते हैं, विभिन्न अनुमतियाँ (चूंकि अनुमतियाँ अनुवादित हैं? क्या मैं अपने अनुवादक पर जाऊंगा ...), नाम, विवरण, आदि। अब आप हमारे आवेदन का प्रकटन देखेंगे, और फिर हम उसका विश्लेषण करेंगे। इस मेनिफ़ेस्ट को नाम दें ।json फ़ाइल।

01{ 02 "manifest_version": 2, 03 04 "name": " ", 05 "version": "1.0", 06 07 "icons": { 08 "16": "16x16.png", 09 "32": "32x32.png", 10 "48": "48x48.png", 11 "128": "128x128.png" 12 }, 13 131 "permissions": [ 132 "http://translate.yandex.net/*" 133 ], 134 14 "browser_action": { 15 "default_title": " ", 16 "default_icon": "48x48.png", 17 "default_popup": "popup.html" 18 } 19 }

तो:
2. प्रकट के संस्करण को निर्दिष्ट करें (वर्तमान में 2 - नवीनतम संस्करण, 1 - अब समर्थित नहीं है)
4. आवेदन प्रदर्शन नाम
5. आवेदन का संस्करण (इसमें अक्षर, केवल संख्याएं और बिंदु शामिल नहीं हैं। आप किसी भी प्रारूप को चुनने के लिए स्वतंत्र हैं। 1 और 1.1, और 1.0.0.1 - सब कुछ सही है)
7-12। हम एप्लिकेशन में उपयोग किए गए आइकन का वर्णन करते हैं। सभी निश्चित रूप से निर्दिष्ट निर्देशिका में होना चाहिए। "16" का अर्थ है कि आइकन का आकार 16x16 है। मैंने iconsearch.ru से आइकन लिया, लेकिन आप किसी अन्य को ले सकते हैं।
UPD: 131-133 - हम ट्रांसफर एड्रेस को एक्सेस करने की अनुमति मांगते हैं। यह शुरू में लेख में नहीं था, क्योंकि यह इसके बिना काम करता था। सबसे अधिक संभावना है - यह एक बग है, इसलिए आपको अनुमति का उपयोग करने के लिए खुद को आदी करने की आवश्यकता है, क्योंकि कहीं न कहीं यह काम कर सकता है (जैसा कि इस मामले में), लेकिन कहीं नहीं।
14. इस पंक्ति में, हम इंगित करते हैं कि हमारा एप्लिकेशन एक एक्सटेंशन है और इसमें एड्रेस बार के बगल में एक आइकन है।
15. जब आप आइकन पर होवर करते हैं तो टूलटिप का पाठ।
16. मानक आइकन। इसका आकार 49x49 होना चाहिए, लेकिन चूंकि यह बहुत विशिष्ट है, इसलिए इस आकार के आइकन को ढूंढना मुश्किल है, मैं 48x48 आइकन का उपयोग करता हूं और क्रोम स्वयं इसका आकार बदल देगा। महान, सही?
17. यहां हम संकेत देते हैं कि बटन पर क्लिक करने पर कौन सा HTML दस्तावेज़ पॉप अप होगा।

इसलिए, प्रकट रूप से, html लिखने का समय आ गया है

आइए क्षेत्र को चिह्नित करें ...

हमारा दस्तावेज़ बहुत सरल होगा। पाठ दर्ज करने के लिए एक क्षेत्र, एक सबमिट बटन और पाठ के आउटपुट के लिए एक ब्लॉक। दुर्भाग्य से, html का अध्ययन करना हमारी समीक्षा के दायरे से परे है, लेकिन मुझे लगता है कि मेरे कई पाठक पहले से ही इससे परिचित हैं। यदि आप उनमें से एक नहीं हैं, तो बस चीनी पत्र की इस सामग्री को अपनी परियोजना में कॉपी करें। इस फाइल को popup.html नाम दें

 <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script src="popup.js"></script> <title></title> </head> <body> <textarea id="input"></textarea><br> <input id="btn_submit" type="submit"><br> <div id="result"></div> </body> </html>

अन्तरक्रियाशीलता के बारे में क्या?

अब चलिए आगे बढ़ते हैं कि हमारे विस्तार के बिना क्या मतलब नहीं होगा - जावास्क्रिप्ट पर आगे बढ़ें! मैं jQuery लाइब्रेरी का उपयोग करूंगा, इस तथ्य के बावजूद कि इस परियोजना में आप इसके बिना कर सकते थे। Jquery.com से jquery.js डाउनलोड करें और इसे हमारी परियोजना निर्देशिका में डालें (इसे jquery.js पर नाम बदलना मत भूलना!)।
तो, वास्तव में popup.js फ़ाइल का कोड ही हमारे एक्सटेंशन का दिल है।

 01 $(document).ready(function(){ 02 $('#btn_submit').click(function(e){ 03 e.preventDefault(); 04 05 var input = $('#input').val(); 06 07 var url = "http://translate.yandex.net/api/v1/tr.json/translate"; 08 09 var parent = /[-]/i; 10 11 var language = (parent.test(input))? 'ru-en':'en-ru'; 12 13 $.getJSON(url, {lang: language, text: input}, function(res){ 14 $('#result').text(""); 15 for (var i in res.text) { 16 $('#result').text($('#result').text() + res.text[i] + " "); 17 } 18 }); 19 }); 20 });

मैं हर चीज पर ध्यान नहीं दूंगा, क्योंकि जावास्क्रिप्ट सीखना अब हमारा लक्ष्य नहीं है। मैं केवल मुख्य पर ध्यान केन्द्रित करूंगा।
7. वेरिएबल में हम वह एड्रेस लिखते हैं, जिस पर हम ट्रांसलेशन का रुख कर सकते हैं। आप इसे यैंडेक्स एपीआई प्रलेखन में देख सकते हैं
9-11। RegExp में हमारे सभी ज्ञान का उपयोग करते हुए, हम एक स्ट्रिंग में रूसी अक्षरों की उपस्थिति निर्धारित करते हैं। यदि कोई है, तो हम पाठ पर विचार करते हैं रूसी।
13. हम भेजने के लिए JSON बनाते हैं। इसमें वास्तविक पाठ और इनपुट भाषा शामिल है।
14. आउटपुट ब्लॉक में टेक्स्ट को रीसेट करें। अचानक कुछ लिखा हुआ है?
15-17। आउटपुट के लिए, हमें एक लूप की आवश्यकता है, क्योंकि हम टेक्स्ट लाइनों की एक सरणी लौटाएंगे। यह डेटा एपीआई में भी जासूसी कर सकता है।

कोड भी समाप्त हो गया है। अब आप स्थानीय मशीन पर एक्सटेंशन की जांच कर सकते हैं। Chrome, मेनू -> टूल -> एक्सटेंशन खोलें। सबसे ऊपर, डेवलपर मोड के बगल में स्थित बॉक्स को चेक करें, अनपैक्ड एक्सटेंशन डाउनलोड करें पर क्लिक करें और हमारी निर्देशिका के लिए पथ निर्दिष्ट करें। देखा! आप इसका उपयोग कर सकते हैं! लेकिन कला के इस काम को जनता तक कैसे पहुँचाया जाए? ।।

वितरक आवश्यक है

विशेष रूप से हमारे लिए, Google Chrome वेब स्टोर और डेवलपर पैनल के साथ आया था। सभी ताकि हम सहज महसूस करें। सच है, सेवा के लिए आपको $ 5 का भुगतान करना होगा। कला के लिए बलिदान की आवश्यकता है ...
तो, डेवलपर टूलबार इस पते पर स्थित है। हम Google खाते में जाते हैं, और बड़े बटन पर क्लिक करके एक नया उत्पाद जोड़ें।

हम एक ज़िप फ़ाइल में हमारी निर्देशिका (इसका बहुत नाम, इसकी सामग्री नहीं) पैक करते हैं। हम इसे सर्वर पर भेजते हैं।
इससे पहले कि हम असाधारण सुंदरता का एक पृष्ठ प्रकट हो। खेतों में भरें, सभी सिफारिशें दाईं ओर दिखाई देती हैं। मैं केवल विज्ञापन छवियों के बारे में सलाह दूंगा। सबसे छोटी छवि को संभव बनाएं, क्योंकि जितनी अधिक छवियां हैं, उतना अधिक खोज और एक्सटेंशन वेब स्टोर पेज पर प्रदर्शित होंगे।

तो आप सभी को धन्यवाद। पर्दा!

ज्ञान प्राप्त किया

आज हमने क्रोम के लिए विकासशील एक्सटेंशन की मूल बातें सीखीं। यहाँ लिंक दिए गए हैं जो आपको इस मुश्किल काम में मदद करेंगे:

क्रोम एक्सटेंशन मदद
वेब स्टोर सहायता
Api सहायता का अनुवाद करें
जावास्क्रिप्ट ट्यूटोरियल

हम Google Chrome के लिए एक्सटेंशन लिखते हैं (और इसे प्रकाशित करें)

राजा ने एक घोषणापत्र जारी किया ...

आइए क्षेत्र को चिह्नित करें ...

अन्तरक्रियाशीलता के बारे में क्या?

वितरक आवश्यक है

ज्ञान प्राप्त किया

More articles: