🤾 👨‍👩‍👦‍👦 🌶️ Google Chrome के लिए अपना खुद का एक्सटेंशन बनाएं 💌 🎒 💲

हब पर क्रोम के लिए एक्सटेंशन बनाने के बारे में पहले से ही कई लेख हैं, मैं अपना अनुभव साझा करूंगा, मुख्य चीजों और स्थानों पर छूना जिसमें मुझे बहुत मुश्किलें हैं।
संक्षेप में विस्तार बनाने के लिए क्या आवश्यक है:
1) बुनियादी जावास्क्रिप्ट ज्ञान
2) मूल HTML ज्ञान
3) 5 $

मैं आपको दिखाऊंगा कि इंटरनेट पर "खोए हुए समय" की गणना के लिए, अपने स्वयं के उदाहरण का उपयोग करके क्रोम के लिए एक एक्सटेंशन कैसे बनाया जाए। यही है, यह विस्तार साइटों पर श्रेणियों द्वारा निर्धारित साइटों को निर्धारित करने की क्षमता के साथ बिताए समय को मानता है: अच्छा समय या खोया समय।

इसलिए, मैं एक्सटेंशन के फ़ोल्डर को स्वयं बनाकर एक्सटेंशन बनाना शुरू करता हूं, जिसमें हम उन सभी फाइलों को डाल देंगे जो हम बनाते हैं। मैं उसे "खो" कहूंगा। अगला, मैं एक मैनिफ़ेस्ट बनाता हूँ। फ़ाइल को इस तरह दिखता है:

manifest.json

{ "manifest_version": 2, "name": "Lost Time", "version": "1.0", "icons": { "128": "" }, "content_scripts": [ { "matches": [ "*://*/*" ], "js": [ "content.js" ] } ], "background": { "scripts": ["background.js"] }, "permissions": [ "http://losttime.su/*" ], "browser_action": { "default_title": "LostTime", "default_icon": "", "default_popup": "popup.html" } }

कुछ लाइनें सहज होनी चाहिए, लेकिन आपको क्या जानना चाहिए:
- मैनिफ़ेस्ट_version का मान आवश्यक रूप से "2" होना चाहिए;
- content_scripts में हम लिखते हैं कि किस स्क्रिप्ट को अलग-अलग सभी पेजों पर चलाया जाएगा;
- पृष्ठभूमि में, एक सामान्य स्क्रिप्ट (पृष्ठभूमि स्क्रिप्ट) लिखें जो ब्राउज़र शुरू होने पर चलती है;
- अनुमतियों में हम उस साइट का पता लिखते हैं जहां से जानकारी ली जाएगी।

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

एक्सटेंशन आइकॉन पर क्लिक करके आप जो विंडो देख सकते हैं, वह पेज: popup.html है।

यह मेरे लिए इस तरह दिखता है:

popup.html

 <!doctype html> <html> <head> <title>  LostTime</title> <script src="jquery.js" type="text/javascript"></script> <!--  jquery --> <link href="css.css" rel="stylesheet" type="text/css"/><!--  --> </head> <body> <div id="options"><!--  --> <a href="/popup.html"><img class='img' src="" Title = "   "></a> <a href="/options.html"><img class='img' src="images/options.png" Title=" "></a> <a href="/stat.html"><img class='img' src="images/stat.png" Title="   "></a> </div> <div id="dannie"></div> <!--      ,    --> <script src="popup.js"></script><!-- ,      --> </body> </html>

इसे स्पष्ट करने के लिए, मैंने HTML में ही कोड का विवरण डाला। मैं मेनू को बस व्यवस्थित करता हूं: मैंने चित्र पर आंतरिक विस्तार लिंक डाला।

चूँकि मैंने popup.html के बारे में शुरू किया था, इसलिए मैं आपको तुरंत popup.js के बारे में बताता हूँ

यह मेरे साथ बहुत सरल लगता है:

popup.js

 var xhr = new XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage['lostlogin'], true); //        xhr.onreadystatechange = function() { if (xhr.readyState == 4) //    , ,    { var dannie = document.getElementById('dannie'); dannie.innerHTML = xhr.responseText; //     id=dannie   } } xhr.send();

कोड विवरण भी डाला गया है।

यह ऊपर वर्णित डिज़ाइन है जो आपको अपनी ओर से सामग्री खींचने और प्रदर्शित करने की अनुमति देता है, और शायद आपकी साइट से नहीं। लेकिन, क्या जानना जरूरी है:
- घोषणापत्र फ़ाइल में, उस साइट का पता लिखना सुनिश्चित करें जहां से जानकारी को अनुमति क्षेत्र में ले जाया जाएगा।
- फ़ाइल popup.js बैकग्राउंड स्क्रिप्ट बैकग्राउंड के साथ जुड़ा हुआ है। js, क्योंकि पृष्ठभूमि पर स्थानीय भंडारण में संग्रहीत डेटा। js भी popup.js पर दिखाई देता है।

Background.js पृष्ठभूमि स्क्रिप्ट फ़ाइल को देखने से पहले, प्रत्येक फ़ाइल पर अलग से चलने वाली स्क्रिप्ट फ़ाइल पर विचार करें: content.js

यह मेरे लिए इस तरह दिखता है:

content.js

 function onBlur() { //    chrome.runtime.sendMessage({site:sait,time:localStorage[sait]}); //    background.js localStorage[sait] = '0'; } window.onblur = onBlur; //     function sec() //   { if(document.webkitVisibilityState == 'visible')//   { localStorage[sait] = parseInt(localStorage[sait],10) +1; //        } } var sait=location.hostname; //      localStorage[sait] = '0'; setInterval(sec, 1000);//

मेरी स्क्रिप्ट से सबसे दिलचस्प बिंदु, मुझे लगता है, होना चाहिए:
chrome.runtime.sendMessage({site:sait,time:localStorage[sait]});
यहाँ पृष्ठभूमि संदेश को स्क्रिप्ट में भेजा जाता है, अर्थात् दो चर: साइट: साइट - में उस साइट का पता होता है जिस पर स्क्रिप्ट है
समय: लोकलस्टोरेज [सैट] - इस स्क्रिप्ट पर जितना समय खर्च होता है।

इसके बाद, बैकग्राउंड स्क्रिप्ट बैकग्राउंड पर विचार करें। जहाँ डेटा प्राप्त होता है, वहां या उसके बजाय डेटा रिसेप्शन फ़ंक्शन पर विचार करें।

background.js

 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { var a = request.site; //    var b = request.time; //     //       . });

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

यह वह सब है जो मैं विस्तार के निर्माण के बारे में बताना चाहता था, लेकिन मैं एक और बिंदु पर स्पर्श करूंगा जिसमें मुझे कठिनाइयां थीं।

सेटिंग्स पृष्ठ पर, मुझे साइटों को विभिन्न स्तंभों में खींचने और छोड़ने का आयोजन करने की आवश्यकता थी।

क्योंकि इनरहेल्टमील का उपयोग करके डेटा डाला जाता है, फिर यह सुविधा वैसी की वैसी दिखाई नहीं देगी। यहाँ मुझे क्या व्यवस्थित करना है:

 $('#dannie').on('mouseover', '.sait', function( ) { $(this).css({'border':'3px solid #ffffff'}); }); $('#dannie').on('mouseout', '.sait', function( ) { $(this).css({'border':'3px solid black'}); }); $('#dannie').on('mousedown', '.sait', function( ) { $(this).css({'border':'3px solid black'}); }); $('#dannie').on('mouseover', '.sait', function( ) { $('.sait').draggable({ helper:'clone' }); });

सामान्य के बजाय:

 $('.sait').mouseover(function(){ $('#'+this.id).css({'border':'3px solid #ffffff'}); }); $('.sait').mouseout(function(){ $('#'+this.id).css({'border':'3px solid black'}); }); $('.sait').mousedown(function(){ $('#'+this.id).css({'border':'0px solid black'}); }); $('.sait').draggable( { helper:'clone', });

मुझे लगता है कि समझाने की जरूरत नहीं है। आप लिंक पर और अधिक पढ़ सकते हैं

एक्सटेंशन परीक्षण

सेटिंग - टूल - एक्सटेंशन पर जाएं, "डाउनलोड अनपैक्ड एक्सटेंशन" पर क्लिक करें

विस्तार प्रकाशित करें
हम पृष्ठ $ 5 का भुगतान करते हैं, प्रकाशित करते हैं।
मैं उन पलों में नहीं रुकता, जिनके साथ मुझे मुश्किलें नहीं हुईं। और कार्ड से भुगतान करते समय मुश्किलें पैदा हुईं:
- मेरे मामले में, एक 3 डी पासवर्ड जुड़ा होना चाहिए।
यदि आपको भुगतान करते समय कोई त्रुटि मिलती है, तो अपने बैंक को कॉल करें और पता करें। एक मिनट में सभी बुलबुल ने मेरी मदद की।

सूत्रों का कहना है:
प्रलेखन
संदेश भेजने के बारे में
प्रकट के बारे में
जावास्क्रिप्ट मंच

साथ ही स्व- विस्तार

।

पढ़ने के लिए धन्यवाद। सभी को शुभकामनाएँ।

Google Chrome के लिए अपना खुद का एक्सटेंशन बनाएं

More articles: