Google Chrome के लिए एक्सटेंशन भाग एक शुरुआत हो रही है

शुभ दोपहर, हब्र।

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

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

नमस्ते दुनिया

सबसे अच्छा सिद्धांत अभ्यास है, और इसलिए, देरी के बिना, हम हेलो_वर्ल्ड फ़ोल्डर बनाते हैं, और इसमें पाठ दस्तावेज़ प्रकट होता है। इसे देखें और निम्नलिखित कोड प्रिंट करें:

{  "name" : "Hello world", //   "version" : "1.0", //  "description" : "This is a simple chrome extention" //  } 

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

हम सीखते हैं और बहस करते हैं

और चूँकि वह नहीं जानता है कि उसे कैसे पढ़ाया जाना चाहिए। मेनिफ़ेस्ट संपादित करें .json:

 { "name" : "Hello world", "version" : "1.0", "description" : "This is a simple chrome extention", "background_page" : "background.html" } 

और एक बैकग्राउंड। Html फ़ाइल बनाएँ जो एक स्क्रिप्ट लिखेगा जो बैकग्राउंड में चलती है। उदाहरण के लिए, यह:

 <script type="application/javascript"> window.onload = function() { window.setInterval( function() { console.log("Hello world"); }, 10000); } </script> 

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

डिबगिंग के लिए, क्रोम का उपयोग करना सुविधाजनक है : // एक्सटेंशन / सेवा पृष्ठ जिसके साथ डेवलपर मोड सक्षम है।



सिद्धांत रूप में, यह "रिंच" से विस्तार प्रबंधन पृष्ठ की कार्यक्षमता को डुप्लिकेट करता है, लेकिन विषयगत रूप से, मुझे यह अधिक पसंद है। किसी तरह अधिक कॉम्पैक्ट, या क्या?

यहां हम दो पदों में रुचि रखते हैं: आंतरिक विस्तार पहचानकर्ता के साथ "आईडी" लाइन और "सक्रिय जांच मोड देखें" उपधारा जिसमें हम पृष्ठभूमि में देखते हैं। हमने बनाया और, उस पर क्लिक करके, हम निष्पादन योग्य स्क्रिप्ट को नियंत्रित कर सकते हैं।

हम देखते हैं और सुनिश्चित करते हैं कि स्क्रिप्ट सही ढंग से हॉलवर्ल्ड कंसोल को लिखती है:



क्रोम-एक्सटेंशन पर ध्यान दें: // आईडी / फ़ाइल नाम प्रारूप हेडर। एक्सटेंशन आइडेंटिफायर को इस तरह से जानकर आप इसकी किसी भी फाइल को प्राप्त कर सकते हैं। फिर से, यह एक्सटेंशन को डीबग करने की प्रक्रिया में सुविधाजनक है।

ब्राउज़र इंटरैक्शन

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

 { "name" : "Hello world", "version" : "1.0", "description" : "This is a simple chrome extention", "background_page" : "background.html", "browser_action" : {  "default_title" : "Hello world!!!", //,       (  ,    )  "default_icon" : "img/icon_world.png", //    ( )  "default_popup" : "popup.html" //      } } 

Popup.html बनाने के लिए मत भूलना (इसे अभी के लिए खाली छोड़ दें) और आइकन को img फ़ोल्डर में रखें, क्रोम पर "रीलोड" पर क्लिक करें : // एक्सटेंशन / पृष्ठ और परिणाम देखें। हमारे एक्सटेंशन का आइकन एक्सटेंशन पैनल पर दिखाई दिया, और जब आप उस पर क्लिक करते हैं, तो एक खाली पॉप-अप विंडो दिखाई देती है।



उन लोगों के लिए चिह्न जो चरणों का पालन करते हैं:


यह सब लिपियों से chrome.browserAction तरीकों का उपयोग करने योग्य है:

 <script type="text/javascript"> chrome.browserAction.setTitle({title:"New title"}); //        chrome.browserAction.setPopup({popup:"new_popup.html"}); //        chrome.browserAction.setIcon({path:"new_icon.png"}); //   chrome.browserAction.setBadgeText({text:"text"}); //    chrome.browserAction.setBadgeBackgroundColor({color:[0,0,0]}); //     </script> 

अभ्यास के लिए, चलो बैकग्राउंड बनाते हैं। कंसोल में सिर्फ बकवास करने के बजाय कुछ उपयोगी करें। यहां, कम से कम एक घड़ी। आइकन के ऊपर मिनट की संख्या प्रदर्शित की जाएगी, जब आप होवर करते हैं, तो समय प्रारूप HH: MM: SS और पॉप-अप विंडो में, तीर के साथ घड़ी है।

background.html

 <script type="application/javascript"> window.onload = function() { window.setInterval( function() { var now = new Date(); var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds(); var badge_text = (m < 10 ? "0" + m : m).toString(); var title_text = (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s); chrome.browserAction.setBadgeText({text: badge_text}); chrome.browserAction.setTitle({title: title_text}); }, 1000); } </script> 

popup.html

 <!DOCTYPE html> <html> <head> <style type="text/css"> * { margin: 0; padding: 0; border: 0; } body { background: #000; } </style> <script type="text/javascript"> Clock = function() { this.canvas = false; this.pi = Math.PI; } Clock.prototype = { get_time: function() { var now = new Date(); var result = { milliseconds: now.getMilliseconds(), seconds: now.getSeconds(), minutes: now.getMinutes(), hours: now.getHours() } return result; }, init: function() { this.canvas = document.getElementById("clock").getContext("2d"); }, draw: function() { var now = this.get_time(); var hangle = (this.pi/6)*now.hours + (this.pi/360)*now.minutes + (this.pi/21600)*now.seconds + (this.pi/21600000)*now.milliseconds; var mangle = (this.pi/30)*now.minutes + (this.pi/1800)*now.seconds + (this.pi/1800000)*now.milliseconds; var sangle = (this.pi/30)*now.seconds + (this.pi/30000)*now.milliseconds; this.canvas.save(); this.canvas.fillStyle = "#000"; this.canvas.strokeStyle = "#000"; this.canvas.clearRect(0,0,200,200); this.canvas.fillRect(0,0,200,200); this.canvas.translate(100,100); this.canvas.rotate(-this.pi/2); this.canvas.save(); this.canvas.rotate(hangle); this.canvas.lineWidth = 8; this.canvas.strokeStyle = "#ffffff"; this.canvas.fillStyle = "#ffffff"; this.canvas.lineCap = "round"; this.canvas.beginPath(); this.canvas.moveTo(-10,0); this.canvas.lineTo(50,0); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.rotate(mangle); this.canvas.lineWidth = 4; this.canvas.strokeStyle = "#ffffff"; this.canvas.lineCap = "square"; this.canvas.beginPath(); this.canvas.moveTo(-20,0); this.canvas.lineTo(75,0); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.lineWidth = 2; this.canvas.strokeStyle = "#ffffff"; this.canvas.fillStyle = "#333"; this.canvas.beginPath(); this.canvas.arc(0,0,8,0,this.pi*2,true); this.canvas.fill(); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.rotate(sangle); this.canvas.lineWidth = 2; this.canvas.strokeStyle = "#ff0000"; this.canvas.lineCap = "square"; this.canvas.beginPath(); this.canvas.moveTo(-30,0); this.canvas.lineTo(85,0); this.canvas.stroke(); this.canvas.restore(); this.canvas.save(); this.canvas.lineWidth = 6; this.canvas.fillStyle = "#ff0000"; this.canvas.beginPath(); this.canvas.arc(0,0,3,0,this.pi*2,true); this.canvas.fill(); this.canvas.restore(); this.canvas.save(); this.canvas.lineWidth = 6; this.canvas.strokeStyle = "#ffffff"; this.canvas.beginPath(); this.canvas.arc(0,0,95,0,this.pi*2,true); this.canvas.stroke(); this.canvas.restore(); this.canvas.restore(); } } window.onload = function() { var clock = new Clock(); clock.init(); window.setInterval(function() { clock.draw(); }, 10); } </script> </head> <body> <canvas id="clock" width="200" height="200"></canvas> </body> </html> 

सेव, रिस्टार्ट, चेक - ब्यूटी!


दरअसल, हमने एक सरल विस्तार किया (और एक ही समय में याद किए गए कैनवास)। शुरू करने के लिए, किसी भी मामले में, पर्याप्त है। यह केवल वितरण के लिए उपयुक्त रूप में लाने के लिए बना हुआ है - पैक करने के लिए। ऐसा करने के लिए, एक ही पृष्ठ पर क्रोम: // एक्सटेंशन / "पैकिंग एक्सटेंशन ..." पर क्लिक करें, रूट डायरेक्टरी (जहां मैनिफ़ेस्ट.जसन स्थित है) निर्दिष्ट करें, "ओके" पर क्लिक करें और आउटपुट में * .crx फ़ाइल प्राप्त करें। यह हमारा पैकेज्ड एक्सटेंशन है। क्रोम की मदद से इसे खोलकर, हम एक्सटेंशन इंस्टॉल करेंगे।

स्थापित लेख से पैकेज्ड उदाहरण
स्रोत के साथ पुरालेख

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

फिर मिलेंगे!