स्क्रैच से क्रोम एक्सटेंशन कैसे बनाएं

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

खैर, अच्छी खबर यह है कि आप आवश्यक कार्यक्षमता जोड़ने या संशोधित करने या Google Chrome के लिए एक नया ऐड-ऑन या ऐप बनाने के लिए अपना खुद का एक्सटेंशन बना सकते हैं, जिसे आप बाद में बना सकते हैं अन्य उपयोगकर्ताओं को वितरित करें Chrome वेब स्टोर का उपयोग करना.

निम्नलिखित में, मैं आपको दिखाने जा रहा हूं एक्सटेंशन बनाने का सबसे आसान तरीका. यदि आपको वेब डेवलपमेंट (HTML, CSS और JS) का कुछ ज्ञान है, तो आप घर पर सही महसूस करेंगे। यदि नहीं, तो पहले इन चैनलों को देखें वेब विकास की मूल बातें सीखें, फिर नीचे जारी रखें.

आवश्यक शर्तें

आपको इस ट्यूटोरियल को शुरू करने से पहले निम्नलिखित आवश्यकताओं को पूरा करना होगा.

1. आप से परिचित होना चाहिए HTML, CSS और JavaScript. [संसाधनों की जाँच करें]
2. आपके पास होना चाहिए कोड संपादक एक्सटेंशन लिखने के लिए। [संपादकों की तुलना करें]
3. (वैकल्पिक) यदि आप अन्य उपयोगकर्ताओं को अपना एक्सटेंशन वितरित करना चाहते हैं, तो आपके पास होना चाहिए डेवलपर खाता क्रोम वेब स्टोर पर। [खाता बनाएं]

ध्यान दें: Google आपको Chrome वेब स्टोर पर डेवलपर खाता बनाने के लिए एक छोटा सा शुल्क देने के लिए कहता है.

एक एक्सटेंशन बनाएं

इस ट्यूटोरियल में, मैं एक बनाने की प्रक्रिया को साझा करने जा रहा हूँ करने के लिए विस्तार Google Chrome के लिए। यह आवश्यक घटकों और एक्सटेंशन को प्रदान की गई क्षमताओं को प्रदर्शित करने के लिए एक उपयोगिता (जैसा कि नीचे दिखाया गया है) होने जा रहा है.

1. एक टेम्पलेट प्राप्त करें

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

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

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

जब आप अपना नमूना एक्सटेंशन बनाने के विकल्प चुनते हैं, तो हिट करें “डाउनलोड करो!” Extensionizr में बटन। आखिरकार, निर्देशिका में संग्रह (.zip) निकालें और एक्सटेंशन लिखना शुरू करने के लिए अपना कोड संपादक खोलें.

2. विस्तार कोड

टेम्पलेट डाउनलोड करने और निकालने के बाद, आपको एक निर्देशिका संरचना दिखाई देगी जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है। टेम्पलेट बड़े करीने से व्यवस्थित है, और आपको पता होना चाहिए कि सबसे महत्वपूर्ण फ़ाइल है “manifest.json“.

आइए इस निर्देशिका में अन्य फ़ाइलों और फ़ोल्डरों के बारे में जानें:

1. _locales: इसका उपयोग किया जाता है भाषा की जानकारी संग्रहीत करें एक बहुभाषी एप्लिकेशन के लिए.
2. सीएसएस: यह बूटस्ट्रैप 4 जैसे थर्ड-पार्टी फ्रंट-एंड लाइब्रेरीज़ को स्टोर करने का काम करता है.
3. माउस: इसे विभिन्न आकारों में आपके विस्तार के लिए आइकन बनाया गया है.
4. js: इसे बचाने के काम आता है थर्ड-पार्टी बैक-एंड लाइब्रेरी jQuery 3 की तरह.
5. src: यह वास्तविक कोड संग्रहीत करता है जिसे आप अपने एक्सटेंशन के लिए लिखेंगे.

manifest.json

इसमें शामिल है आपके ऐप के बारे में बुनियादी मेटाडेटा, जो ब्राउज़र में आपके ऐप के विवरण को परिभाषित करता है। आप इसे अपने एक्सटेंशन का नाम, विवरण, वेबसाइट, आइकन, आदि जैसे विशिष्टताओं के साथ सेट कर सकते हैं ब्राउज़र क्रिया और अनुमतियाँ.

उदाहरण के लिए, नीचे दिए गए कोड में, आप देखेंगे कि मैंने browser_action के तहत default_title के साथ नाम, विवरण और होमपेज_url बदल दिया है। इसके अलावा, मैं जोड़ा “भंडारण” अनुमति के तहत जैसा कि हमें अपने विस्तार में डेटा स्टोर करने की आवश्यकता है.

 "नाम": "टोडोइज़र - टू-डू सिम्प्लीफाइड", "संस्करण": "0.0.1", "मेनिफ़ेस्ट_वर्सन": 2, "विवरण": "सभी के लिए सरल-टू-ऐप"।, "desktop_url:"। https://go.aksingh.net/todoizr "," icons ": " 16 ":" आइकन / icon16.png "," 48 ":" आइकन / icon48.png "," 128 ":" आइकन / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - To-Do Simplified "," default_popup ":" src / Browser_action / browser_action.html "," अनुमतियां ": [" संग्रहण "] 

src \ browser_action

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

ध्यान दें: आप इस रिपॉजिटरी को क्लोन करके हमेशा कोड से कूद सकते हैं.

टेम्पलेट से प्रारंभिक कोड

हालाँकि इस निर्देशिका में सभी कोड वाली एक HTML फ़ाइल थी, लेकिन मैंने इसे बेहतर स्पष्टता के लिए तीन अलग-अलग फ़ाइलों में विभाजित करने का निर्णय लिया है। उस ने कहा, HTML फ़ाइल नाम “browser_action.html” अब निम्नलिखित कोड है:

इसके अलावा, शैली फ़ाइल नाम “browser_action.css” जावास्क्रिप्ट फ़ाइल नाम के दौरान नीचे की सामग्री है “browser_action.js” अभी के लिए रिक्त है.

 # मेनपॉप पैडिंग: 10 पीएक्स; ऊंचाई: 200 पीएक्स; चौड़ाई: 400px; फ़ॉन्ट-परिवार: हेल्वेटिका, उबंटू, एरियल, संस-सेरिफ़;  h1 फ़ॉन्ट-आकार: 2em;  

पॉपअप का इंटरफ़ेस डिज़ाइन करें

प्रारंभिक परियोजना स्थापित करने के बाद, आइए सबसे पहले पॉपअप के इंटरफ़ेस को डिज़ाइन करें। मेरे पास है एक न्यूनतम दृष्टिकोण के साथ इंटरफ़ेस सेट करें, जोड़े जाने वाले आइटमों को देखने के लिए एक प्रपत्र के बाद शीर्ष पर नाम दिखाना और एक आइटम जोड़ना है। यह के सरलीकृत डिजाइन से प्रेरित है “फॉर्म स्टाइल 5“.

नीचे दिए गए कोड में, मैंने दो divs जोड़ दिए हैं - एक को एक आइटम करने के लिए फ़ॉर्म प्रदर्शित करने के लिए और दूसरे को पहले से जोड़े गए आइटमों की सूची प्रदर्शित करने के लिए। उस ने कहा, के लिए नया कोड “browser_action.html” इस प्रकार है:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

और स्टाइल फाइल “browser_action.css” अब निम्नलिखित कोड है:

 @import url ("./ form_style_5.css"); # मेनपॉप ऊंचाई: 200 पीएक्स; चौड़ाई: 300 पीएक्स; फ़ॉन्ट-परिवार: हेल्वेटिका, उबंटू, एरियल, संस-सेरिफ़;  / * टू-डू आइटम फॉर्म * / .फॉर्म-स्टाइल -5 मार्जिन: ऑटो; गद्दी: 0px 20px;  .फॉर्म-स्टाइल -5: पहला-बच्चा बैकग्राउंड: कोई नहीं;  .form-style-5 h1 color: # 308ce3; फ़ॉन्ट-आकार: 20 पीएक्स; पाठ-संरेखण: केंद्र;  .फॉर्म-स्टाइल -5 इनपुट [टाइप = "टेक्स्ट"] चौड़ाई: ऑटो; बाईंओर तैरना; मार्जिन-बॉटम: अनसेट;  .form-style-5 इनपुट [प्रकार = "बटन"] पृष्ठभूमि: # 308ce3; चौड़ाई: ऑटो; सही नाव; गद्दी: 7 पीएक्स; सीमा: कोई नहीं; सीमा-त्रिज्या: 4 पीएक्स; फ़ॉन्ट-आकार: 14 पीएक्स;  .फॉर्म-स्टाइल -5 इनपुट [टाइप = "बटन"]: होवर बैकग्राउंड: # ३d६5 डी ५;  / * To-do आइटम सूची * / .form-style-5: अंतिम-बच्चा height: inherit; मार्जिन-बॉटम: 5 पीएक्स;  .form-style-5 ul गद्दी: 20px;  .form-style-5 ul li font-size: 14px;  

अंत में, तृतीय-पक्ष शैली फ़ाइल “form_style_5.css” नीचे सामग्री है। यह बस हमारी वेबसाइट से हमारे विस्तार के डिजाइन को प्रेरित करने के लिए लिया जाता है.

 / * फॉर्म स्टाइल 5 by Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; गद्दी: 10px 20px; पृष्ठभूमि: # f4f7f8; मार्जिन: 10 पीएक्स ऑटो; गद्दी: 20 पीएक्स; पृष्ठभूमि: # f4f7f8; सीमा-त्रिज्या: 8 पीएक्स; फ़ॉन्ट-परिवार: जॉर्जिया, "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़;  .फॉर्म-स्टाइल -5 फील्डसेट बॉर्डर: कोई नहीं;  .फॉर्म-स्टाइल -5 लेजेंड फॉन्ट-साइज: 1.4em; मार्जिन-नीचे: 10px;  .फॉर्म-स्टाइल -5 लेबल डिस्प्ले: ब्लॉक; मार्जिन-नीचे: 8px;  .form-style-5 इनपुट [type = "text"], .form-style-5 इनपुट [type = "टाइप"], .form-style-5 इनपुट [type = "डेटाइम"], .form-style -5 इनपुट [प्रकार = "ईमेल"], .form-style-5 इनपुट [प्रकार = "संख्या"], .form-style-5 इनपुट [प्रकार = "खोज"], .form-style-५ इनपुट [प्रकार = "समय"], .form-style-5 इनपुट [type = "url"], .form-style-5 -ararea, .form-style-5 चुनें font-family: जॉर्जिया, "टाइम्स न्यू रोमन", टाइम्स , सेरिफ़; पृष्ठभूमि: rgba (255,255,255, .1); सीमा: कोई नहीं; सीमा-त्रिज्या: 4 पीएक्स; फ़ॉन्ट-आकार: 16 पीएक्स; मार्जिन: 0; रूपरेखा: 0; गद्दी: 7 पीएक्स; चौड़ाई: 100%; box-sizing: बॉर्डर-बॉक्स; -webkit-box-sizing: बॉर्डर-बॉक्स; -मोज़-बॉक्स-साइज़िंग: बॉर्डर-बॉक्स; पृष्ठभूमि-रंग: # e8eeef; रंग: # 8a97a0; -वेबकैट-बॉक्स-छाया: 0 1px 0 rgba (0,0,0,0.03) इनसेट; बॉक्स-छाया: 0 1px 0 rgba (0,0,0,0.03) इनसेट; मार्जिन-बॉटम: 30 पीएक्स;  .form-style-5 इनपुट [type = "text"]: फ़ोकस .form-style-5 इनपुट [type = "date"]: फ़ोकस, .form-style-5 इनपुट [type = "डेटाइम"]:। फ़ोकस, .फॉर्म-स्टाइल -5 इनपुट [टाइप = "ईमेल"]: फ़ोकस, -फॉर्म-स्टाइल -५ इनपुट [टाइप = "नंबर"]: फोकस, -फॉर्म-स्टाइल -५ इनपुट [टाइप = "सर्च"]। : फोकस, .form-style-5 इनपुट [टाइप = "टाइम"]: फोकस, .form-style-5 इनपुट [टाइप = "url"]: फोकस, .form-style-५ टेक्सारिया: फोकस, .form- शैली -5 चयन: फोकस पृष्ठभूमि: # d2d9dd;  .form-style-5 सेलेक्ट करें -webkit-उपस्थिति: menulist-button; ऊँचाई: 35px;  .form-style-5 .number पृष्ठभूमि: # 1abc9c; रंग: #fff; ऊंचाई: 30 पीएक्स; चौड़ाई: 30 पीएक्स; प्रदर्शन: इनलाइन-ब्लॉक; फ़ॉन्ट-आकार: 0.8em; मार्जिन-राइट: 4px; लाइन-ऊँचाई: 30 पीएक्स; पाठ-संरेखण: केंद्र; पाठ-छाया: 0 1px 0 rgba (255,255,255,0.2); सीमा-त्रिज्या: 15px 15px 15px 0px;  .form-style-5 इनपुट [type = "submit"], .form-style-5 इनपुट [type = "बटन"] स्थिति: रिश्तेदार; प्रदर्शन क्षेत्र; गद्दी: 19px 39px 18px 39px; रंग: # एफएफ; मार्जिन: 0 ऑटो; पृष्ठभूमि: # 1abc9c; फ़ॉन्ट-आकार: 18 पीएक्स; पाठ-संरेखण: केंद्र; फ़ॉन्ट-शैली: सामान्य; चौड़ाई: 100%; बॉर्डर: 1px ठोस # 16a085; बॉर्डर-चौड़ाई: 1px 1px 3px; मार्जिन-नीचे: 10px;  .form-style-5 इनपुट [type = "submit"]: hover .form-style-5 इनपुट [type = "बटन"]: hover बैकग्राउंड: # 109177;  

पॉपअप का तर्क लिखिए

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

नीचे दिए गए कोड में, हम दो फ़ंक्शन का उपयोग करने जा रहे हैं - Sync.get () और Sync.set (), का हिस्सा हैं “chrome.storage“. हमें स्टोर में टू-डू आइटम को सहेजने के लिए दूसरे की आवश्यकता है और पहले एक को उन्हें पुनः प्राप्त करने और उन्हें दिखाने के लिए.

उस ने कहा, नीचे अंतिम कोड है “browser_action.js” फ़ाइल। जैसा कि आप नीचे देख सकते हैं, कोड को इसके उद्देश्य को समझने में मदद करने के लिए अत्यधिक टिप्पणी की गई है.

 फंक्शन लोडइमेट्स () / * सबसे पहले (स्टोरेज से डेटा) / / chrome.storage.sync.get (['todo'], फंक्शन (परिणाम) var todo = [] यदि (result && result.two &&) result.todo.trim ()! == ") / * पार्स और सरणी प्राप्त करें क्योंकि यह एक स्ट्रिंग * / todo = JSON.parse (result.todo) कंसोल.log ('todo.length) = के रूप में सहेजा गया है + todo.length) के लिए (var i = 0; i) < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. विस्तार लोड करें

आपके द्वारा अपना एक्सटेंशन लिखने के बाद, यह Google Chrome की सुविधा के माध्यम से परीक्षण करने का समय है जो गैर-स्टोर, अनपैक किए गए एक्सटेंशन को लोड करने की पेशकश करता है। लेकिन पहले, आपको करना चाहिए डेवलपर मोड को सक्षम करें अपने ब्राउज़र में: क्लिक करें विकल्प बटन > चुनें “अधिक उपकरण” > एक्सटेंशन, और फिर टॉगल करें “डेवलपर मोड“.

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

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

एक एक्सटेंशन वितरित करें

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

आगे क्या? पढ़ें और कोड

जैसा कि आप उम्मीद कर सकते हैं, इस ट्यूटोरियल का उद्देश्य आपको Google Chrome के लिए विस्तार विकास के साथ शुरू करना है। मैंने मूल अवधारणाओं को कवर करने की कोशिश की है; हालाँकि, आपको और भी बहुत कुछ जानने की जरूरत है गंभीर विस्तार विकास करने के लिए.

उस ने कहा, नीचे मेरे कुछ हैं पसंदीदा गो-टू संसाधन Google Chrome और अन्य क्रोमियम-आधारित ब्राउज़र के लिए एक्सटेंशन विकसित करना सीखना:

1. एक्सटेंशन की सभी क्षमताएं, घटक और विशेषताएं.
2. Google Chrome के पीछे टीम द्वारा नमूना एक्सटेंशन.

यदि आप इन संसाधनों से गुजरे हैं और कुछ चुनौती के लिए तैयार हैं, तो विस्तार में नीचे की सुविधाओं को जोड़ने का प्रयास करें जिन्हें आपने अभी-अभी पूरा किया है:

1. सहेजे गए आइटम को हटाने के लिए एक विकल्प.
2. आइटम जोड़ते समय सूचनाएँ दिखाने की सुविधा.

यह सब सबसे लोकप्रिय ब्राउज़र के लिए अपना पहला विस्तार विकसित करने के बारे में है. आपने क्या विस्तार किया? क्या आप किसी समस्या में पड़ गए? कृपया मुझे नीचे एक टिप्पणी लिखकर या मुझे @aksinghnet पर मैसेज करके अपनी कहानी बताएं.

अंतिम लेकिन कम से कम नहीं, ध्यान दें कि आप Chrome वेब स्टोर पर टोडिज़्र (हमारे द्वारा बनाया गया एक्सटेंशन) आज़मा सकते हैं और इस रिपॉजिटरी में इसका पूरा कोड देख सकते हैं.