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

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

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

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

युक्ति(Tip) : यह देखने के लिए कि आपका स्वयं का एक्सटेंशन कितना शानदार हो सकता है, इन अद्भुत क्रोम एक्सटेंशन(these amazing Chrome extensions) को देखें ।

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

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

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

  • एक फोल्डर बनाएं जिसमें एक्सटेंशन बनाने वाली सभी फाइलें हों।
  • इस एक्सटेंशन के लिए आवश्यक मूल फ़ाइलें बनाएं: मेनिफेस्ट.जेसन(manifest.json) , पॉपअप.एचटीएमएल(popup.html) , बैकग्राउंड.एचटीएमएल(background.html) , स्टाइल.सीएसएस(styles.css) ।
  • एक टेक्स्ट एडिटर में popup.html(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>

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

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

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

"Manifest_version": 2,
"नाम": "पसंदीदा साइटें", ( “name”: “Favorite Sites”,)
"विवरण": "मेरी सभी पसंदीदा वेबसाइटें।", ( “description”: “All my favorite websites.”,)
"संस्करण": "1.0", ( “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 शामिल हैं ।

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

#myUL {
सूची-शैली-प्रकार: कोई नहीं; (list-style-type: none;)
   पैडिंग: 0; (   padding: 0;)
   मार्जिन: 0; (   margin: 0;)
   चौड़ाई: 300 पीएक्स; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  मार्जिन-टॉप: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  पैडिंग: 12 पीएक्स; (  padding: 12px;)
  पाठ-सजावट: कोई नहीं; (  text-decoration: none;)
  फ़ॉन्ट-आकार: 18px; (  font-size: 18px;)
  रंग काला; (  color: black;)
  प्रदर्शन क्षेत्र; (  display: block;)
  फ़ॉन्ट-फ़ैमिली: 'नोटो सैन्स', सेन्स-सेरिफ़; (  font-family: ‘Noto Sans’, sans-serif;)
}

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

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

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

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

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

अब जब आपने क्रोम(Chrome) एक्सटेंशन बना लिया है, तो इसे ब्राउज़र में जोड़ने का समय आ गया है ताकि आप वास्तव में अपने द्वारा अभी बनाई गई सभी फाइलों का उपयोग कर सकें। कस्टम एक्सटेंशन को स्थापित करने में एक ऐसी प्रक्रिया शामिल होती है जो आपके द्वारा सामान्य Chrome एक्सटेंशन को स्थापित करने(how you’d install a normal Chrome extension) के तरीके से भिन्न होती है ।

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

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

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

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

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

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

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



Jawahar Varma

About the author

मैं एक तकनीशियन हूं जो कई वर्षों से ऑडियो और उपयोगकर्ता खाता क्षेत्र में काम कर रहा है। मुझे विंडोज और मैक कंप्यूटरों के साथ-साथ ऐप्पल उत्पादों दोनों के साथ अनुभव है। मैं 2007 से Apple उत्पादों का उपयोग करना भी सिखा रहा हूं। मेरी विशेषज्ञता के मुख्य क्षेत्र उपयोगकर्ता खाते और पारिवारिक सुरक्षा हैं। इसके अलावा, मुझे विंडोज 7 होम प्रीमियम, 8.1 प्रो, 10 प्रो और 12.9 मोजावे सहित विभिन्न सॉफ्टवेयर प्रोग्रामों का अनुभव है।


Related posts