सिंपल क्रोम एक्सटेंशन कैसे बनाएं

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

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

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

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

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

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

यहां क्या करना है:

1. एक फोल्डर बनाएं जो एक्सटेंशन को बनाने वाली सभी फाइलों को रखेगा।
2. आधार फाइलें बनाएं जिनकी इस एक्सटेंशन को आवश्यकता है: manifest.json, popup.html, background.html, styles.css।
3. 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>

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

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

{
 "update_url": "https://clients2.google.com/service/update2/crx",
 "manifest_version": 2,
 "name": "Favorite Sites",
 "description": "All my favorite websites.",
 "version": "1.0",
 "icons": {
 "16": "icon.png",
 "32": "icon.png",
 "48": "icon.png",
 "128": "icon.png"
 },
 "background": {
 "page": "background.html"
 },
 "browser_action": {
 "default_icon": "icon.png",
 "default_title": "Favorite Sites",
 "default_popup": "popup.html"
 }
}

इस कोड के संपादन योग्य क्षेत्रों में name, description, और default_title शामिल हैं।

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

#myUL {
 list-style-type: none;
 padding: 0;
 margin: 0;
 width: 300px;
}

#myUL li a {
 border: 1px solid #ddd;
 margin-top: -1px;
 background-color: #f6f6f6;
 padding: 12px;
 text-decoration: none;
 font-size: 18px;
 color: black;
 display: block;
 font-family: 'Noto Sans', sans-serif;
}

#myUL li a:hover:not(.header) {
 background-color: #eee;
}

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

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

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

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

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

1. क्रोम मेनू से, More tools > Extensions पर जाएं। या, एड्रेस बार में chrome://extensions/ टाइप करें।
2. Developer mode के बगल में बटन चुनें यदि यह पहले से चुना नहीं है। यह एक विशेष मोड चालू करेगा जो आपको अपने खुद के क्रोम एक्सटेंशन इम्पोर्ट करने देता है।

3. उस पेज के शीर्ष पर Load unpacked बटन का उपयोग करके चरण 1 में आपके द्वारा बनाए गए फोल्डर को चुनें।

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

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

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

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

वेबसाइट्स के सूचीबद्ध होने के क्रम को बदलने के लिए, या अधिक साइट्स जोड़ने या मौजूदा साइट्स को हटाने के लिए, popup.html फाइल को संपादित करें। बस सुनिश्चित करें कि आपके संपादन केवल URL और नाम तक सीमित हैं। अन्य सभी वर्ण, जैसे <li> और <html>, आवश्यक हैं और इन्हें नहीं बदला जाना चाहिए। W3Schools पर HTML ट्यूटोरियल उस भाषा के बारे में अधिक जानने के लिए एक अच्छी जगह है।