यदि आप Chrome उपयोगकर्ता हैं, तो संभावना है कि आप एक या अधिक एक्सटेंशन का उपयोग कर रहे होंगे। चाहे वह विज्ञापनों को अवरुद्ध करना हो या सुविधाओं को जोड़ना हो, एक्सटेंशन ब्राउज़र में बहुत सारी उपयोगिताएँ जोड़ते हैं। यदि आप अपना स्वयं का Chrome एक्सटेंशन बना सकते हैं तो क्या यह अच्छा नहीं होगा? ठीक यही मैं आपको यहाँ दिखाऊँगा।
हमारे लेख द बेस्ट टचस्क्रीन क्रोमबुक भी देखें
जैसा कि मैं ग्राहकों के लिए वेबसाइटें बनाए रखता हूं, मुझे यह जानना पसंद है कि प्रत्येक साइट पेज लोडिंग के साथ कैसा प्रदर्शन करती है। जैसा कि Google अब अपने एसईओ गणनाओं में लोड समय का उपयोग करता है, यह जानते हुए कि साइट को अनुकूलित करते समय पृष्ठ लोड कितना तेज़ या धीमा है, एक महत्वपूर्ण मीट्रिक है। मोबाइल के लिए वेबसाइट का अनुकूलन करते समय यह और भी सही है। Google के भीतर अत्यधिक स्कोर करने के लिए इसे बिना किसी त्रुटि के हल्का, तेज और लोड करना होगा।
उस पर जोड़ें, तथ्य यह है कि साइटप्वाइंट पर एक उद्यमी व्यक्ति भी उसी वेबसाइट का उपयोग करता है जो मैं पृष्ठ गति, जीटीमेट्रिक्स की जांच करने के लिए करता हूं और इसे जांचने के लिए एक क्रोम एक्सटेंशन विकसित किया है, मैंने सोचा कि मैं भी ऐसा ही करूंगा और इसके माध्यम से आप चलेंगे।
क्रोम एक्सटेंशन
क्रोम एक्सटेंशन्स मिनी प्रोग्राम हैं जो कोर ब्राउजर में फीचर जोड़ते हैं। वे उतने ही सरल हो सकते हैं, जितने हम सुरक्षित पासवर्ड मैनेजर या स्क्रिप्ट एमुलेटर के रूप में बनाने या जटिल करने वाले हैं। एचटीएमएल, सीएसएस और जावास्क्रिप्ट जैसी संगत भाषाओं में लिखे गए, वे स्व-निहित फाइलें हैं जो ब्राउज़र के साथ बैठते हैं।
आवश्यकता के अनुसार, अधिकांश एक्सटेंशन सरल आइकन हैं जो किसी दिए गए कार्य को निष्पादित करते हैं। यह क्रिया शाब्दिक रूप से कुछ भी हो सकती है जिसे आप क्रोम करना चाहते हैं।
अपना स्वयं का Chrome एक्सटेंशन बनाएं
एक छोटे से शोध के साथ, आप जो चाहें उसे करने के लिए अपने विस्तार को ट्विस्ट कर सकते हैं लेकिन मुझे एक बटन की गति की जांच पसंद है इसलिए मैं उसके साथ जा रहा हूं।
आमतौर पर, जब आप साइट की गति की जाँच करते हैं, तो आप उस पृष्ठ का URL चिपकाएँगे जिस पर आप GTmetrix, Phatt या फिर जहाँ कहीं भी हैं और विश्लेषित करें। यह केवल कुछ सेकंड लेता है, लेकिन क्या यह अच्छा नहीं होगा यदि आप अपने ब्राउज़र पर सिर्फ एक आइकन चुन सकते हैं और क्या यह आपके लिए है? इस ट्यूटोरियल के माध्यम से काम करने के बाद, आप ऐसा कर पाएंगे।
आपको सब कुछ रखने के लिए अपने कंप्यूटर पर एक फ़ोल्डर बनाने की आवश्यकता होगी। तीन खाली फाइलें बनाएँ, मैनिफ़ेस्ट ।json, popup.html और popup.js। अपने नए फ़ोल्डर के अंदर राइट क्लिक करें और नई और टेक्स्ट फ़ाइल चुनें। अपनी पसंद के टेक्स्ट एडिटर में अपनी हर तीन फाइलें खोलें। सुनिश्चित करें कि popup.html HTML फ़ाइल के रूप में सहेजा गया है और popup.js को जावास्क्रिप्ट फ़ाइल के रूप में सहेजा गया है। Google से इस नमूना आइकन को केवल इस ट्यूटोरियल के प्रयोजनों के लिए डाउनलोड करें।
मेनिफ़ेस्ट का चयन करें। आगजनी करें और उसमें निम्नलिखित पेस्ट करें:
{"घोषणापत्र": 2, "नाम": "जीटीमेट्रिक्स पेज स्पीड एनालाइजर", "विवरण": "वेबसाइट पेज लोडिंग स्पीड का विश्लेषण करने के लिए जीटीमेट्रिक्स का उपयोग करें", "संस्करण": "1.0", "browser_action": "" default_icon " : "icon.png", "default_popup": "popup.html"}, "अनुमतियां":}
जैसा कि आप देख सकते हैं, हमने इसे एक शीर्षक और मूल विवरण दिया है। हमने एक ब्राउज़र एक्शन भी कहा है जिसमें Google से डाउनलोड किया गया आइकन भी शामिल है जो आपके ब्राउज़र बार और popup.html में दिखाई देगा। जब आप ब्राउज़र में एक्सटेंशन आइकन चुनते हैं तो पॉपअप.html कहा जाता है।
Popup.html खोलें और उसमें निम्नलिखित पेस्ट करें।
जीटीमेट्रिक्स का उपयोग करके पेजस्पीड एनालाइजर
जब आप ब्राउज़र में एक्सटेंशन आइकन चुनते हैं तो पॉपअप.html कहा जाता है। हमने इसे एक नाम दिया है, पॉपअप लेबल किया है और एक बटन जोड़ा है। बटन का चयन करने से पॉपअप आएगा। जेएस वह फाइल है जिसे हम आगे पूरा करेंगे।
Popup.js खोलें और उसमें निम्नलिखित पेस्ट करें:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addventventist ('क्लिक', फंक्शन) () {chrome.tabs.getSelected (null) = दस्तावेज़; var f = d.createElement ('फ़ॉर्म'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'इनपुट'); i.type = 'hidden'; i.name = 'url'; i.value =.url; f.appendChild (i); d.body.appendChild (f); f .submit (); ;});}, गलत);}, गलत);
मैं जावास्क्रिप्ट को जानने का नाटक नहीं करूंगा, इसीलिए यह आसान था कि साइटप्वाइंट में पहले से ही फाइल थी। मुझे पता है कि यह वर्तमान क्रोम टैब में पृष्ठ का विश्लेषण करने के लिए GTmetrix को बताता है। जहां यह कहता है कि 'chrome.tabs.getSelected' एक्सटेंशन URL को सक्रिय टैब से लेता है और इसे वेब रूप में दर्ज करता है। जहां तक मैं जा सकता हूं।
अपने Chrome एक्सटेंशन का परीक्षण करना
अब हमारे पास बुनियादी ढांचा है, हमें यह देखने के लिए परीक्षण करने की आवश्यकता है कि यह कैसे काम करता है।
- Chrome खोलें, अधिक टूल और एक्सटेंशन चुनें।
- इसे सक्षम करने के लिए डेवलपर मोड के बगल में स्थित बॉक्स को चेक करें।
- लोड अनकैप्ड एक्सटेंशन का चयन करें और इस एक्सटेंशन के लिए आपके द्वारा बनाई गई फ़ाइल पर नेविगेट करें।
- एक्सटेंशन लोड करने के लिए ठीक का चयन करें और यह आपकी एक्सटेंशन सूची में दिखाई देनी चाहिए।
- सूची में सक्षम आइकन के बगल में स्थित बॉक्स को चेक करें और आइकन आपके ब्राउज़र में दिखाई दे।
- ब्राउज़र में आइकन का चयन करें ताकि पॉपअप दिखाई दे।
- बटन का चयन करें, अब इस पृष्ठ की जाँच करें!
आपको पृष्ठ की जाँच की जानी चाहिए और GTmetrix से एक प्रदर्शन रिपोर्ट चाहिए। जैसा कि आप मुख्य छवि में अपनी खुद की साइट से देख सकते हैं, मुझे अपने नए डिजाइन को गति देने के लिए थोड़ा काम करना है!
एक्सटेंशन को आगे ले जाना
अपना स्वयं का Chrome एक्सटेंशन बनाना उतना कठिन नहीं है जितना कि यह लग सकता है। हालांकि यह निश्चित रूप से एक छोटे से कोड को जानने के द्वारा सिर शुरू करने में मदद करता है, ऑनलाइन सैकड़ों संसाधन हैं जो आपको दिखाएंगे। साथ ही, Google के पास सूचनाओं, ट्यूटोरियल्स और वॉकथ्रू का एक विशाल भंडार है जो मदद करेगा। मैंने इस डेवलपर की सहायता के लिए इस पृष्ठ का उपयोग Google डेवलपर साइट से किया है। पेज एक्सटेंशन बनाने के हर हिस्से के माध्यम से आपको चलता है और उस आइकन को प्रदान करता है जो हमने पहले इस्तेमाल किया था।
पर्याप्त शोध के साथ, आप ऐसे एक्सटेंशन बना सकते हैं जो बहुत कुछ करते हैं जो ब्राउज़र सक्षम है। Chrome स्टोर में कुछ सर्वश्रेष्ठ एक्सटेंशन व्यक्तियों और कंपनियों से हैं, यह साबित करते हुए कि आप वास्तव में अपना स्वयं का बना सकते हैं।
मूल गाइड के लिए साइटप्वाइंट पर जॉन सोनमेज़ को सभी क्रेडिट। उन्होंने कड़ी मेहनत की, मैंने इसे थोड़ा पुनर्गठित किया और इसे थोड़ा अद्यतन किया।
क्या आपने अपना Chrome एक्सटेंशन बनाया है? इसे बढ़ावा देना या साझा करना चाहते हैं? अगर आप करते हैं तो हमें नीचे बताएं!
