👩🏿‍🌾 ✋🏾 🕤 गूगल क्रोम के लिए एक विस्तार लेखन 👨🏼‍🏭 👈🏾 🏰

Google chrome के लिए एक्सटेंशन लिखना आसान है। लेकिन पहला विस्तार लिखते समय, सवाल उठ सकते हैं (और उठ सकते हैं)। पहला एक्सटेंशन लिखने के लिए अधिकांश मैनुअल पहले संस्करण के प्रकटन का उपयोग करने के लिए डिज़ाइन किए गए हैं, जिसका समर्थन निकट भविष्य में बंद हो जाएगा।

यह लेख कवर करेगा:

कैसे प्रकट करें v.2
दूरस्थ संसाधनों के साथ कैसे काम करना है
कुकीज़ के साथ कैसे काम करें
स्थानीय भंडारण के साथ कैसे काम करें
सूचनाओं के साथ कैसे काम करें

परिचय

लेख के अंत तक, हमारे पास एक एक्सटेंशन-आयोजक तैयार होगा, जिसमें एक नया कार्य जोड़ने के लिए एक फ़ील्ड होगा, साथ ही साथ वर्तमान दिन के कार्यों की एक सूची भी होगी। आयोजक के लिए सभी आवश्यकताओं को अस्वीकार करें:

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

घोषणापत्र

चलो शुरू से ही विस्तार बनाना शुरू कर देते हैं, अर्थात् प्रकट से। मैनिफ़ेस्ट वही फ़ाइल है जिसमें सभी एक्सटेंशन पैरामीटर लिखे जाते हैं। नाम, विवरण, संस्करण, साइटों तक पहुंचने की अनुमति, कुकीज़, सूचनाओं, स्थानीय भंडारण का उपयोग करने की अनुमति। सामान्य तौर पर, एक अभिव्यक्ति एक विस्तार मस्तिष्क है। एक मैनिफ़ेस्ट बनाएँ। Json फ़ाइल। मैनिफ़ेस्ट एकमात्र फ़ाइल है जिसमें पूर्वनिर्धारित नाम होना चाहिए, अन्य सभी फ़ाइलों को आपकी पसंद के अनुसार बुलाया जा सकता है। इस फ़ाइल में तीन आवश्यक फ़ील्ड हैं:

manifest.json

{ “name”: “Organizer extension”, //   “version”: “1.0”, //  . “manifest_version”: 2 //   }

कुछ नियम हैं:

मैनिफ़ेस्ट संस्करण पूर्णांक होना चाहिए, अर्थात, इसे 2 के रूप में लिखा जाना चाहिए, न कि "2"।
एक्सटेंशन संस्करण को स्ट्रिंग होना चाहिए, लेकिन इसमें केवल संख्याएं और अवधि शामिल हैं, अर्थात, "1.0" अच्छा है, और 1.0 और "0.9 बीटा" खराब हैं।

आवश्यक फ़ील्ड के साथ - यही वह है, चलो एक पॉप-अप एक्सटेंशन विंडो बनाने के लिए आगे बढ़ें। आइकन पर क्लिक करके एक विंडो खोलने के लिए, आपको "Browser_action" फ़ील्ड को प्रकट करने के लिए जोड़ना होगा

manifest.json

 { … "browser_action": { "default_title": "Open organizer", // .          "default_icon": "icon_small.png", //     "default_popup": "popup.html" //      } }

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

popup.html

 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div>It works!</div> </body> </html>

ब्राउज़र में एक्सटेंशन जोड़ना

अब हमारे विस्तार के प्रदर्शन का परीक्षण करने का समय है। ऐसा करने के लिए, ब्राउज़र को एक्सटेंशन डाउनलोड करें। क्रोम में एक्सटेंशन मेनू खोलें। पक्षी को "डेवलपर मोड" पर सेट करें।

उसके बाद, तीन बटन दिखाई देंगे। "अनपैकड लोड लोड करें ..." पर क्लिक करें। एक्सटेंशन फ़ाइलों के साथ फ़ोल्डर का चयन करें। उसके बाद, हमारा एक्सटेंशन दिखाई देगा। यदि सब कुछ सही है, तो आइकन पर क्लिक करके एक विंडो दिखाई देगी:

स्क्रिप्ट कनेक्शन

अब आप मज़ा शुरू कर सकते हैं। हम दो जावास्क्रिप्ट फ़ाइलों को शामिल करेंगे। पहला पॉपअप है। दूसरा, jquery है। पहले वाले के साथ कोई समस्या नहीं होगी, लेकिन हम jquery को स्थानीय नहीं, बल्कि रिमोट से जोड़ेंगे , ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js पर लिया जाएगा । समस्या इस तथ्य से उत्पन्न होगी कि डिफ़ॉल्ट रूप से विस्तार के पास तीसरे पक्ष के संसाधनों तक पहुंच नहीं है। एक्सेस करने के लिए, आपको इसे मैनिफ़ेस्ट में निर्दिष्ट करना होगा। किसी चीज़ तक पहुँच "अनुमतियाँ" फ़ील्ड में इंगित की गई है। इसके अलावा, दूरस्थ स्क्रिप्ट और सीएसएस के लिए, आपको उपलब्ध दूरस्थ संसाधनों को निर्दिष्ट करना होगा।

manifest.json

 { … "permissions": [ "https://ajax.googleapis.com/*" ], "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'" }

अब इन स्क्रिप्ट को popup.html पर प्लग इन करें

popup.html

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="popup.js"></script>

भंडारण

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

manifest.json

 { ... "permissions": [ … "storage" ] ... }

अब पॉपअप विंडो को फिर से करें। पॉप-अप विंडो में आज की तारीख के साथ एक फ़ील्ड होगा, नई घटना की तारीख, समय और विवरण के लिए तीन इनपुट, एक नई घटना को जोड़ने के लिए एक बटन, साथ ही साथ आज के लिए सभी घटनाओं की एक सूची होगी।

popup.html

 <div id="container"> <div id="today_date">Date</div> <table class="table"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td><input type="text" id="new_date" value="" class="input_date" /></td> <td><input type="text" id="new_time" value="" class="input_date" /></td> <td><input type="text" id="new_task" value="" class="input_task" /></td> </tr> </table> <ul></ul> </div>

और तुरंत #today_date ब्लॉक में दिनांक प्रदर्शन जोड़ें।

popup.js

 $(function(){ var today = new Date(); $("#today_date").html(today.getDate()+"."+(parseInt(today.getMonth())+1)+"." + today.getFullYear()); }

यह इस तरह दिखना चाहिए:

इसलिए, जब आप "+" बटन पर क्लिक करते हैं, तो एक ईवेंट जोड़ा जाना चाहिए। फ़ाइल की शुरुआत में, एक वैश्विक चर भंडारण की घोषणा करें - भंडारण के साथ काम करने के लिए एक वस्तु, साथ ही साथ घटनाओं के लिए कार्यों का एक वैश्विक सरणी।

popup.js

 var storage = chrome.storage.sync; var tasks = new Array(); $(function(){ … $("#add_task").click(function(){ var new_task = new Object(); new_task.date = validateField($("#new_date").val(), "date"); new_task.time = validateField($("#new_time").val(), "time"); new_task.task = $("#new_task").val(); if(!new_task.task || !new_task.date || !new_task.task){ return false; } tasks[tasks.length] = new_task; storage.set({ tasks:tasks }); }); });

सत्यापन फ़ंक्शन यह जांचता है कि दिनांक को dyyyy प्रारूप में लिखा गया है, और समय hh: mm प्रारूप में है, और यह भी कि घटना के विवरण में कम से कम तीन वर्ण हैं।

popup.js

 var validateField = function(val, type){ if(type == "date"){ var date = val.split("."); var year = new Date(); year = year.getFullYear(); if(date.length == 3 && parseInt(date[0]) == date[0] && date[0] <= 31 && parseInt(date[1]) == date[1] && date[1] <= 12 && parseInt(date[2]) == date[2] && date[2] >= year){return val;} } else if(type == "time"){ var time = val.split(":"); if(time.length == 2 && parseInt(time[0]) == time[0] && time[0] < 24 && parseInt(time[1]) == time[1] && time[1] < 60){return val;} } else if(type == "task" && type.length >= 3){ return val; } return null; }

इसके अतिरिक्त छंटनी के साथ, हम आज के लिए कार्यक्रम प्राप्त करने के लिए आगे बढ़ते हैं। ऐसा करने के लिए, आपको डेटाबेस से सभी घटनाओं को प्राप्त करने की आवश्यकता है, केवल आज की घटनाओं को सभी से चुनें और उन्हें आरोही क्रम में समय के अनुसार क्रमबद्ध करें।

popup.js

 $(function(){ … var now_hours = today.getHours() < 10 ? "0" + today.getHours() : today.getHours(); var now_minutes = today.getMinutes() < 10 ? "0" + today.getMinutes() : today.getMinutes(); var now_time = now_hours + "" + now_minutes; storage.get("tasks",function(items){ if(items.tasks){ tasks = items.tasks; var today_tasks = getTodayTasks(tasks); if(today_tasks.length >0){ for(var i in today_tasks){ var this_time = today_tasks[i].time.replace(":", ""); var add = this_time > now_time ? "" : ' class="done"'; var add_html = '<li'+add+'><strong>'+today_tasks[i].time+'</strong> '+today_tasks[i].task+'</li>'; $("ul").append(add_html); } } } }); … });

GetTodayTasks () फ़ंक्शन सामान्य सूची से आज की तारीख के साथ केवल ईवेंट लौटाता है।

popup.js

 var getTodayTasks = function(tasks){ var today_tasks = new Array(); var today = new Date(); var today_date = today.getDate()+"."+(today.getMonth() + 1 )+ "." + today.getFullYear(); for(var i in tasks){ if(tasks[i].date == today_date){ today_tasks[today_tasks.length] = tasks[i]; } } if(today_tasks.length > 0){ today_tasks = sortTasks(today_tasks); } return today_tasks; }

सॉर्टटैस्क () समय के आरोही क्रम में घटनाओं को क्रमबद्ध करता है।

popup.js

 var sortTasks = function(tasks){ if(tasks.length > 0){ var swapped = true; while (swapped) { swapped = false; for (var i=0; i < tasks.length-1; i++) { var this_time = tasks[i].time.replace(":", ""); var next_time = tasks[i+1].time.replace(":", ""); if (this_time > next_time) { var temp = tasks[i]; tasks[i] = tasks[i+1]; tasks[i+1] = temp; swapped = true; } } } } return tasks; }

नोटिस

यह स्क्रीन पर सूचनाओं के प्रदर्शन को अनुकूलित करने का समय है। पॉपअप विंडो में एक विशेष चेकबॉक्स जोड़ें। यदि यह चेकबॉक्स चेक किया गया है, तो सूचनाएं दिखाई जाएंगी; यदि यह चेक नहीं किया गया है, तो वे नहीं करेंगे। टेक्स्ट इनपुट भी जोड़ें। इस इनपुट में संख्या इंगित करेगी कि घटना से कितनी देर पहले एक अधिसूचना प्रदर्शित की जाएगी। यही है, अगर हमारी घटना 19:00 के लिए निर्धारित है, इस पाठ इनपुट में 5 होंगे, तो एक अधिसूचना 18:55 पर दिखाई देगी। इन इनपुट के साथ कोड जोड़ें popup.html

popup.html

 <div> <input type="checkbox" id="show_notifications" checked="checked" /> <input type="text" id="when_to_notify" class="input_date" value="" />   </div>

अब आइए जानें कि यह कैसे काम करेगा। जब आप चेकबॉक्स पर क्लिक करते हैं, तो इसकी जांच की गई विशेषता की जांच की जाएगी, विशेषता मान "show_notifications" कुकी में दर्ज किया जाएगा। पाठ इनपुट पर चलते हैं। इसके मूल्य को बदलकर, नए मूल्य को मान्य किया जाएगा, अगर यह पूर्णांक है और 120 से अधिक नहीं है, तो हम कुकी में नया मान लिखते हैं "When_to_notify"।

लेकिन इसके लिए हमें काम करने के लिए, आपको कुकीज़ तक पहुंच खोलने की आवश्यकता है। ऐसा करने के लिए, पर जाएँ .json और "अनुमति" में जोड़ें

manifest.json

 { ... "permissions": [ … “cookies” ] ... }

अब आप स्क्रिप्ट शुरू कर सकते हैं। Popup.js पर जाएं। सबसे पहले, इनपुट में प्रारंभिक मान सेट करें। डिफ़ॉल्ट रूप से, चेकबॉक्स चेक नहीं किया जाता है, अर्थात, सूचनाएं प्रदर्शित नहीं होती हैं, और समय 0. है। जब आप चेकबॉक्स पर क्लिक करते हैं, तो कुकी मान "show_notifications" बदल जाएगा। पाठ फ़ील्ड में मान बदलते समय, कुकी मान "When_to_notify" बदल जाएगा।

popup.js

 $(function(){ setCheckbox(); setWhenToNotify(getCookie("when_to_notify")); ... $("#show_notifications").click(function(){ setCookie("show_notifications", document.getElementById("show_notifications").checked); }); $("#when_to_notify").change(function(){ setWhenToNotify($(this).val()); }); });

आइए फ़ंक्शंस पर अधिक विस्तार से विचार करें। चलिए कुकी कार्यक्षमता के साथ शुरू करते हैं। इस मामले में, तैयार किए गए कार्यों को w3schools.com से लिया गया था।

popup.js

 var setCookie = function(c_name,value,exdays){ /* *  http://www.w3schools.com/js/js_cookies.asp */ var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; } var getCookie = function(c_name){  . /* *  http://www.w3schools.com/js/js_cookies.asp */ var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++){ x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name){ return unescape(y); } } }

चलिए सेटचेकबॉक्स () फ़ंक्शन से निपटते हैं। यह "show_notifications" कुकी प्राप्त करता है और जाँचता है कि यदि प्राप्त मूल्य "सही" (पाठ, हाँ) है, तो चेकबॉक्स का चेक किया गया पैरामीटर सही है, अन्यथा गलत।

popup.js

 var setCheckbox = function(){ var val = getCookie("show_notifications") document.getElementById('show_notifications').checked = ((val == "true") ? true : false); }

अब setWhenToNotify () पर विचार करें। यह एक नया टाइमर मान लेता है। यदि यह मान पूर्णांक है और 120 मिनट से अधिक नहीं है, तो कुकी में एक नया मान सेट किया जाता है। यदि वैरिएबल ने इस सत्यापन को पारित नहीं किया है, तो कुकीज़ से "value_to_notify" पिछला मान इनपुट पर वापस आ जाता है।

popup.js

 var setWhenToNotify = function(val){ var last_val = getCookie("when_to_notify"); last_val = last_val != "undefined"? last_val: 0; val = (parseInt(val)==val && val <=120) ? val : last_val; setCookie("when_to_notify", val); $("#when_to_notify").val(val); }

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

manifest.json

 { ... "permissions": [ … "notifications" ], "background": { "scripts": ["background.js"] }, "web_accessible_resources": ["icon_small.png"], ... }

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

background.js

 var storage = chrome.storage.sync; var tasks = new Array(); setInterval(function() { storage.get("tasks",function(items){ if(items.tasks && getCookie("show_notifications") == "true"){ tasks = getTodayTasks(items.tasks); if(window.webkitNotifications){ var texts = getNextTask(tasks); for(var i in texts){ show(texts[i]); } } } }); }, 60000);

फ़ंक्शंस getTodayTasks () और getCookie () popup.js से लिए गए हैं। तो चलो getNextTask () फ़ंक्शन के साथ पार्स करना शुरू करें। फ़ंक्शन वर्तमान समय और घटना के समय की तुलना करता है, अगर यह कुकी में संग्रहीत मूल्य के बराबर है "जब_तो नोट", तो घटना के समय से एक स्ट्रिंग और इसका विवरण अगले सरणी में जोड़ा जाता है। सभी घटनाओं की जांच करने के बाद, अगली सरणी वापस आ जाएगी।

background.js

 var getNextTask = function(tasks){ var now = new Date(); now = now.getTime(); var next = new Array(); for(var i in tasks){ var date = tasks[i].date.split("."); var time = tasks[i].time.split(":"); var task_date = new Date(parseInt(date[2]), parseInt(date[1]-1), parseInt(date[0]), parseInt(time[0]), parseInt(time[1]), 0, 0); task_date = task_date.getTime(); var delta = Math.round((task_date-now)/60000); if(delta == getCookie("when_to_notify")){ next[next.length] = tasks[i].time + " - " + tasks[i].task; } } return next; }

शो () फ़ंक्शन दिए गए पाठ के साथ एक अधिसूचना प्रदर्शित करता है।

background.js

 var show = function(text) { var notification = window.webkitNotifications.createNotification('icon_small.png',' ', text); notification.show(); }

इस लिपि का परिणाम इस प्रकार होगा:

अंतभाषण

जैसा कि वादा किया गया है, लेख के अंत में हमारे पास Google क्रोम के लिए एक तैयार आयोजक एक्सटेंशन है।
अब क्रोम वेब स्टोर में एक्सटेंशन जोड़ें। आपको .zip संग्रह में पैक किए गए एक्सटेंशन को डाउनलोड करना होगा। आरंभ करने के लिए, वेब स्टोर पर जाएं। ऐसा करने के लिए, क्रोम में "एप्लिकेशन" टैब पर जाएं और "वेब स्ट्रोर" बटन पर क्लिक करें

अब मेनू पर जाएं। ऐसा करने के लिए, षट्भुज पर क्लिक करें और "डेवलपर डैशबोर्ड" खोलें

बड़े बटन "नया आइटम जोड़ें" पर क्लिक करें। उसके बाद, आपको एक्सटेंशन के साथ ज़िप संग्रह का चयन करना होगा, "अपलोड" पर क्लिक करें

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

उपयोगी लिंक

प्रकट फ़ील्ड का विवरण: developer.chrome.com/trunk/extensions/manifest.html
संग्रहण के साथ कार्य करें: developer.chrome.com/trunk/extensions/storage.html
अधिसूचना की जानकारी: developer.chrome.com/extensions/notifications.html
एक्सटेंशन के स्रोत: github.com/bozheville/orginaizer_extension

गूगल क्रोम के लिए एक विस्तार लेखन