अपना खुद का Google क्रोम एक्सटेंशन कैसे बनाएं

क्या आपने कभी अपने आप को अपने वेब ब्राउज़र के साथ आने वाली सुविधाओं से नाखुश पाया है? यहां तक ​​​​कि आपके बेल्ट के नीचे Google वेब स्टोर को खंगालने के घंटों के साथ, यह हमेशा आपके वेब सर्फिंग अनुभव को बढ़ाने के लिए "डाउनलोड" करने का एक साधारण मामला नहीं है।

यह वह जगह है जहाँ ब्राउज़र एक्सटेंशन आते हैं। इस लेख में, हम शुरू से ही आपके स्वयं के DIY Google Chrome एक्सटेंशन के निर्माण की प्रक्रिया की खोज करेंगे।

Google क्रोम एक्सटेंशन क्या है?

आधुनिक Google क्रोम जैसे वेब ब्राउज़र सुविधाओं की एक श्रृंखला के साथ आते हैं जो उन्हें उपयोग में आसान बनाते हैं और अधिकांश उपयोगकर्ताओं की जरूरतों को पूरा करने में सक्षम होते हैं। हालांकि, इन स्टॉक सुविधाओं को विस्तारित करने से कई अलग-अलग लाभ हो सकते हैं। यही कारण है कि ब्राउज़र डेवलपर आमतौर पर उनके लिए एक्सटेंशन, ऐड-ऑन और प्लग-इन बनाना संभव बनाते हैं।

Google क्रोम यह सुविधा प्रदान करता है, जिससे वेब विकास अनुभव वाले किसी भी व्यक्ति के लिए अपना स्वयं का क्रोम एक्सटेंशन बनाना आसान हो जाता है। आप कई वेबसाइटों की तरह HTML, JavaScript और CSS का उपयोग करके एक्सटेंशन बना सकते हैं।

किसी वेबसाइट के विपरीत, आपके ब्राउज़ करते समय एक्सटेंशन पृष्ठभूमि में चल सकते हैं, कभी-कभी आपके द्वारा देखी जाने वाली साइटों के साथ इंटरैक्ट भी कर सकते हैं।

हमारा गूगल क्रोम एक्सटेंशन क्या करेगा?

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

आप जान जायेंगे कैसे

• एक Google क्रोम एक्सटेंशन बनाएं
• क्रोम एक्सटेंशन का उपयोग करके वेबपेजों में कस्टम कोड डालें
• ईवेंट श्रोता बनाएँ और क्लिकों का अनुकरण करें
• यादृच्छिक संख्या उत्पन्न करें
• सरणियों और चर के साथ काम करें

अपना खुद का DIY क्रोम एक्सटेंशन बनाना

Google ने अपना खुद का बनाना आश्चर्यजनक रूप से आसान बना दिया है क्रोम एक्सटेंशन, इसलिए आपको कुछ काम करने में अधिक समय नहीं लगेगा। नीचे दिए गए चरणों का पालन करने में केवल 10 से 15 मिनट का समय लगेगा लेकिन हम आपको अपने कोड के साथ भी प्रयोग करने के लिए प्रोत्साहित करते हैं।

चरण 1: फ़ाइलें बनाना

जब आप इसे वितरित करने की योजना नहीं बना रहे हों तो आप अपने एक्सटेंशन को अपनी स्थानीय मशीन पर स्टोर कर सकते हैं। हमें अपना एक्सटेंशन बनाने के लिए केवल चार अलग-अलग फाइलें बनाने की जरूरत है; एक HTML फ़ाइल, एक CSS फ़ाइल, एक JavaScript फ़ाइल और एक JSON फ़ाइल।

हमने अपनी फाइलों को index.html, style.css, script.js, और मेनिफेस्ट.json कहा। मेनिफेस्ट फ़ाइल में यह नाम ठीक से काम करने के लिए होना चाहिए, लेकिन जब तक आप अपने कोड को तदनुसार बदलते हैं, तब तक आप दूसरों को अपनी पसंद का कोई भी नाम दे सकते हैं।

आपको इन फाइलों को उसी रूट फोल्डर में रखना चाहिए।

चरण 2: मेनिफेस्ट फ़ाइल बनाना

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

{
"नाम": "MakeUseOf.com स्वचालित खोज",
"संस्करण": "1.0.0",
"विवरण": "दिलचस्प लेख खोजने के लिए एक खोज उपकरण",
"मेनिफेस्ट_संस्करण": 3,
"लेखक": "सैमुअल गारबेट",
"अनुमतियां": ["भंडारण", "घोषणात्मक सामग्री", "सक्रियटैब", "पटकथा"],
"होस्ट_अनुमतियाँ": [""],
"गतिविधि":{
"डिफ़ॉल्ट_पॉपअप": "index.html",
"डिफ़ॉल्ट_शीर्षक": "एमयूओ ऑटो सर्च"
 }
}

चरण 3: HTML और CSS का निर्माण

इससे पहले कि हम अपनी स्क्रिप्ट लिखना शुरू करें, हमें HTML और CSS का उपयोग करके एक बुनियादी UI बनाना होगा। आप एक का उपयोग कर सकते हैं CSS लाइब्रेरी जैसे बूटस्ट्रैप अपना खुद का बनाने से बचने के लिए, लेकिन हमें अपने विस्तार के लिए केवल कुछ नियमों की आवश्यकता है।

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

<एचटीएमएल>
<सिर>
<शीर्षक>एमयूओ ऑटो सर्च</title>
<मेटा वर्णसेट ="यूटीएफ-8">
<लिंक रिले ="शैली पत्रक" href="स्टाइल.सीएसएस">
</head>
<तन>
<एच 1>एमयूओ ऑटो सर्च</h1>
<एक href="https://www.makeuseof.com/" लक्ष्य ="_खाली"><बटन आईडी ="बटन वन">MakeUseOf.com पर जाएं</button></ए>
<बटन आईडी ="बटनदो">यादृच्छिक खोज प्रारंभ करें</button>
</body>
<स्क्रिप्ट स्रोत ="स्क्रिप्ट.जेएस"></script>
</html>

हमारी सीएसएस फ़ाइल हमारे एचटीएमएल से भी सरल है, सिर्फ पांच तत्वों की शैली को बदल रही है। हमारे पास हमारे html और बॉडी टैग के साथ-साथ h1 टैग और हमारे दोनों बटनों के लिए नियम हैं।

एचटीएमएल {
 चौड़ाई: 400px;
}
तन {
 फ़ॉन्ट-परिवार: हेल्वेटिका, सेन्स-सेरिफ़;
}
एच1 {
 पाठ-संरेखण: केंद्र;
}
#बटनवन {
 सीमा-त्रिज्या: 0px;
 चौड़ाई: 100%;
 पैडिंग: 10px 0px;
}
#बटनदो {
 सीमा-त्रिज्या: 0px;
 चौड़ाई: 100%;
 पैडिंग: 10px 0px;
 मार्जिन-टॉप: 10px;
}

चरण 4: जावास्क्रिप्ट का निर्माण

इस प्रक्रिया के अंतिम चरण के रूप में, हमारी script.js फ़ाइल बनाने का समय आ गया है।

इस फ़ाइल में पहला फ़ंक्शन, कहा जाता है इंसर्टस्क्रिप्ट (), अन्य फ़ंक्शन को सम्मिलित करने के लिए है (स्व: खोज()) वर्तमान पृष्ठ में। यह हमें पृष्ठ में हेरफेर करने और MakeUseOf.com साइट पर पहले से मौजूद खोज सुविधाओं का उपयोग करने की अनुमति देता है।

इसके बाद एक ईवेंट श्रोता होता है जो ऊपर दिए गए फ़ंक्शन को कॉल करने से पहले रैंडम सर्च प्रारंभ करें बटन पर क्लिक करने तक प्रतीक्षा करता है।

स्व: खोज() फ़ंक्शन थोड़ा अधिक जटिल है। यह MUO वेबसाइट पर 20 श्रेणियों वाली एक सरणी के साथ शुरू होता है, जो हमें अपनी यादृच्छिक खोज करते समय आकर्षित करने के लिए एक अच्छा नमूना देता है। इसके बाद, हम उपयोग करते हैं गणित.यादृच्छिक () हमारे सरणी से एक प्रविष्टि का चयन करने के लिए 0 और 19 के बीच एक यादृच्छिक संख्या उत्पन्न करने के लिए कार्य करता है।

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

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

// यह फ़ंक्शन हमारे ऑटोसर्च फ़ंक्शन को पृष्ठ के कोड में सम्मिलित करता है
समारोहइंसर्टस्क्रिप्ट() {
// यह ऑपरेशन के लिए फ़ोकस किए गए टैब का चयन करता है और ऑटोसर्च फ़ंक्शन को पास करता है
 chrome.tabs.query({सक्रिय: सच, वर्तमानविंडो: सच}, टैब => {
क्रोमस्क्रिप्टिंग.executeScript({लक्ष्य: {टैबआईडी: टैब[0]।पहचान}, समारोह: स्व: खोज})
 })
// यह वेबसाइट सर्च बार को चुनने के लिए एक्सटेंशन पॉप-अप को बंद कर देता है
खिड़की।बंद करे();
}
// यह एक ईवेंट श्रोता है जो हमारे "क्लिक" का पता लगाता हैशुरू करना अनियमित खोज" बटन
document.getElementById('बटनदो').addEventListener('क्लिक', इंसर्टस्क्रिप्ट)
// यह फ़ंक्शन एक सरणी से एक यादृच्छिक विषय का चयन करता है और 
समारोहस्व: खोज() {
// यह हमारे खोज शब्दों को संग्रहीत करने के लिए एक सरणी है
 कॉन्स्ट सर्च टर्म्स = ["पीसी और मोबाइल", "बॉलीवुड", "हार्डवेयर", "खिड़कियाँ", "Mac",
"लिनक्स", "एंड्रॉयड", "सेब", "इंटरनेट", "सुरक्षा",
"प्रोग्रामिंग", "मनोरंजन", "उत्पादकता", "करियर", "रचनात्मक",
"जुआ", "सामाजिक मीडिया", "स्मार्ट घर", "DIY", "समीक्षा"];
// यह 0 और 19. के बीच एक यादृच्छिक संख्या उत्पन्न करता है
होने देना चयनकर्ता संख्या = गणित।मंज़िल(गणित।अनियमित() * 20);
// यह सरणी से एक प्रविष्टि का चयन करने के लिए यादृच्छिक संख्या का उपयोग करता है
होने देना चयन = खोज शब्द [चयनकर्ता संख्या];
// यह MUO वेबसाइट सर्च आइकन पर एक क्लिक का अनुकरण करता है
 document.getElementById("जेएस-खोज"क्लिक करें ();
// यह MUO वेबसाइट सर्च बार को वेरिएबल के रूप में सेट करता है
वर सर्चबार = दस्तावेज़.getElementById ("जेएस-सर्च-इनपुट");
// यह हमारे यादृच्छिक खोज शब्द को खोज बार में सम्मिलित करता है
 searchBar.value = searchBar.value + चयन;
// यह वेबसाइट फॉर्म को सक्रिय करके प्रक्रिया को पूरा करता है
 document.getElementById("खोज प्रपत्र2")।प्रस्तुत();
}

चरण 5: क्रोम में अपनी फ़ाइलें जोड़ना: // एक्सटेंशन

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

Google Chrome खोलें, chrome://extensions पर जाएं और सुनिश्चित करें कि ऊपरी दाएं कोने में डेवलपर मोड स्लाइडर चालू स्थिति में है।

क्लिक लोड अनपैक्ड ऊपरी बाएँ कोने में, फिर उस फ़ोल्डर को चुनें जिसमें आपने अपनी एक्सटेंशन फ़ाइलें सहेजी हैं और क्लिक करें फोल्डर का चयन करें.

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

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

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

यह आलेख केवल उन संभावित सुविधाओं की सतह को खरोंचता है जिन्हें आप अपने स्वयं के Google क्रोम एक्सटेंशन में बना सकते हैं। एक बार मूल बातें सीख लेने के बाद यह आपके अपने विचारों की खोज करने लायक है।

क्रोम एक्सटेंशन आपकी ब्राउज़िंग को स्तरित करने में आपकी सहायता कर सकते हैं लेकिन सुरक्षित और सुरक्षित ब्राउज़िंग के लिए कुछ ज्ञात छायादार क्रोम एक्सटेंशन से दूर रहने का प्रयास करें।

6 छायादार Google क्रोम एक्सटेंशन आपको ASAP को अनइंस्टॉल करना चाहिए

आगे पढ़िए

लेखक के बारे में