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

क्रोम एक्सटेंशन बनाना काफी सीधी प्रक्रिया है। जब आप काम पूरा कर लेंगे, तो आप ब्राउज़र के काम करने के तरीके को बेहतर बनाने के लिए इसे अपने कंप्यूटर पर इस्तेमाल कर पाएंगे।

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

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

युक्ति :यह देखने के लिए कि आपका अपना एक्सटेंशन कितना शानदार हो सकता है, इन अद्भुत क्रोम एक्सटेंशन को देखें।

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

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

यहां बताया गया है कि क्या करना है:

एक ऐसा फ़ोल्डर बनाएं जिसमें एक्सटेंशन बनाने वाली सभी फाइलें हों।
इस एक्सटेंशन के लिए आवश्यक मूल फ़ाइलें बनाएं:manifest.json , popup.html , पृष्ठभूमि.html , styles.css ।
खोलें popup.html एक टेक्स्ट एडिटर में और फिर निम्नलिखित सभी को वहां पेस्ट करें, जब आप समाप्त कर लें तो इसे सहेजना सुनिश्चित करें।

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

बेझिझक लिंक और लिंक टेक्स्ट को संपादित करें, या यदि आप क्रोम एक्सटेंशन को ठीक वैसे ही बनाना चाहते हैं जैसे हम हैं, तो बस सब कुछ वैसा ही रखें।

खोलें manifest.json टेक्स्ट एडिटर में और निम्नलिखित को कॉपी/पेस्ट करें:

{
“update_url”:“https://clients2.google.com/service/update2/crx”,

“Manifest_version”:2,
"नाम":"पसंदीदा साइटें",
"विवरण":"मेरी सभी पसंदीदा वेबसाइटें।",
"संस्करण":"1.0",
"आइकन":{
"16":"icon.png",
"32":"icon.png",
"48":"icon.png",
"128":"icon.png"
},

“पृष्ठभूमि”:{
“पृष्ठ”:”background.html”
},

    “browser_action” :{
         “default_icon” :“icon.png”,
         “default_title” :“पसंदीदा साइटें”,
         “default_popup”:“popup.html”
    }
}

इस कोड के खाद्य क्षेत्रों में नाम . शामिल हैं , विवरण , और डिफ़ॉल्ट_शीर्षक ।

खोलें styles.css और निम्न कोड पेस्ट करें। पॉपअप मेनू को यह देखने में अधिक आकर्षक और उपयोग में आसान बनाने के लिए इसे सजाता है।

#myUL {
सूची-शैली-प्रकार:कोई नहीं;
   पैडिंग:0;
   मार्जिन:0;
   चौड़ाई:300px;
}

#myUL li a {
  सीमा:1px ठोस #ddd;
  मार्जिन-टॉप:-1px;
  पृष्ठभूमि-रंग:#f6f6f6;
  पैडिंग:12px;
  पाठ्य-सजावट:कोई नहीं;
  फ़ॉन्ट-आकार:18px;
  रंग:काला;
  डिस्प्ले:ब्लॉक;
  फ़ॉन्ट-फ़ैमिली:'नोटो सैन्स', सेन्स-सेरिफ़;
}

#myUL li a:hover:not(.header) {
पृष्ठभूमि-रंग:#eee;
}

CSS फ़ाइल में आप बहुत कुछ बदल सकते हैं। अपने क्रोम एक्सटेंशन को अपनी पसंद के अनुसार कस्टमाइज़ करने के बाद इन विकल्पों के साथ खेलें।

एक्सटेंशन के लिए एक आइकन बनाएं और उसे नाम दें icon.png . इसे अपने क्रोम एक्सटेंशन फोल्डर में रखें। जैसा कि आप ऊपर दिए गए कोड में देख सकते हैं, आप उन आकारों के लिए एक अलग आइकन बना सकते हैं:16×16 पिक्सल, 32×32, और इसी तरह।

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

Chrome में कस्टम एक्सटेंशन कैसे जोड़ें

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

Chrome मेनू से, अधिक टूल . पर जाएं> एक्सटेंशन . या, chrome://extensions/ . टाइप करें पता बार में।
डेवलपर मोड के बगल में स्थित बटन का चयन करें यदि यह पहले से चयनित नहीं है। यह एक विशेष मोड को चालू कर देगा जिससे आप अपने स्वयं के क्रोम एक्सटेंशन आयात कर सकते हैं।

अनपैक लोड करें . का उपयोग करें ऊपर चरण 1 के दौरान आपके द्वारा बनाए गए फ़ोल्डर का चयन करने के लिए उस पृष्ठ के शीर्ष पर स्थित बटन।

कोई भी संकेत मिलने पर उसे स्वीकार करें। अन्यथा, आपका कस्टम-निर्मित क्रोम एक्सटेंशन ब्राउज़र के ऊपरी दाएं कोने में आपके पास मौजूद किसी अन्य एक्सटेंशन के साथ दिखाई देगा।

अपना क्रोम एक्सटेंशन संपादित करना

अब जबकि आपका क्रोम एक्सटेंशन प्रयोग करने योग्य है, आप इसे अपना बनाने के लिए बदलाव कर सकते हैं।

Styles.css फ़ाइल नियंत्रित करती है कि एक्सटेंशन कैसे दिखाई देता है, इसलिए आप समग्र सूची शैली को समायोजित कर सकते हैं और फ़ॉन्ट रंग या प्रकार बदल सकते हैं। W3Schools उन सभी अलग-अलग चीजों के बारे में जानने के लिए सबसे अच्छे संसाधनों में से एक है जो आप CSS के साथ कर सकते हैं।

वेबसाइटों को सूचीबद्ध करने के क्रम को बदलने के लिए, या जोड़ने या अधिक साइटों को जोड़ने या मौजूदा को हटाने के लिए, popup.html फ़ाइल को संपादित करें। बस अपने संपादनों को केवल URL और नाम पर रखना सुनिश्चित करें। अन्य सभी पात्र, जैसे

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