Chrome Extension कैसे बनाएं? | Dark Mode Toggle Extension Tutorial with ChatGPT (Step by Step)

AKSHAY RAJ KUSHWAHA August 25, 2025

Build Chrome Extension: Dark Mode Toggle (Using ChatGPT)

 Hello दोस्तों!

आज की इस ब्लॉग पोस्ट में हम सीखेंगे कि Chrome Extension chatgpt की मदद से  कैसे बनाएं और वो भी सिर्फ कुछ ही मिनटों में। इस tutorial में हम एक Dark Mode Toggle Extension बनाएंगे, जो किसी भी वेबसाइट पर Dark Mode enable/disable करगी। हमने इस पोस्ट में step-by-step Explain किया है  और  code files भी provide की है। 



How to build crome extension using chatgpt in hindi


📑 Table of Contents

  1. Project Overview

  2. Extension Features

  3. Project Structure

  4. Step by Step Explanation

  5. Source Code Files

  6. FAQs

  7. Related Posts

  8. Conclusion + Subscribe CTA



🔎 Project Overview

इस project में हम एक basic Chrome Extension बनाएंगे जिसका नाम होगा Dark Mode Toggle।

  • यह extension किसी भी वेबसाइट पर click करने से Dark Mode on/off कर देगी।

  • Extension में एक popup window होगी जिसमें Toggle Button होगी।

  • अगर आप चाहे तो custom icon भी add कर सकता है।


⭐ Extension Features

ये कुछ features है जो इस extension में available है -

  • One Click Dark Mode Enable/Disable

  • Simple UI with Popup Button

  • Support for Custom Icons

  • Works on Any Website

  • Built with Manifest V3


📂 Project Structure

ये Project या फोल्डर structure है जो आपको crome में upload करना पड़ता है। इस फोल्डर के अंदर manifest.json फाइल mandatory होती है। अगर यह फाइल नहीं होगी तो आपकी  extension crome run नहीं होगी।  बाक़ी की फाइल्स आप रख भी सकते है और नहीं भी ये आपके एक्सटेंशन के फीचर पे डिपेंड करता है। 
dark-mode-extension/
│── manifest.json
│── popup.html
│── popup.js
│── content.js
│── icons/ (optional)


🛠️ Step by Step Explanation

1. manifest.json

यह file extension का main config होती है। इसमें name, version, permissions और popup define किया जाता है। इस फाइल के बिना आपकी extension crome में accept ही नहीं होगी।  इसी फाइल की मदद से crome को पता चलता है की आपकी एक्सटेंशन क्या करती है इसके क्या फीचर्स है। 

{
  "manifest_version": 3,
  "name": "Dark Mode Toggle",
  "version": "1.0",
  "description": "Enable or disable dark mode on any website.",
  "permissions": ["scripting", "activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

2. popup.html

यह popup.html फाइल आपके एक्सटेंशन का UI का डिज़ाइन या स्ट्रक्चर है की आपकी एक्सटेंशन कैसी दिखेंगी जब आप इसे ओपन करेंगे। इस फाइल का नाम आप कुछ भी रख सकते है बस आपको manifest.json फाइल के अंदर उसका नाम मेंशन करना पड़ता है या ऐड करना पड़ता है। 

<!DOCTYPE html>
<html>
<head>
  <title>Dark Mode Toggle</title>
  <style>
    body {
      width: 150px;
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 10px;
    }
    button {
      padding: 8px 12px;
      margin-top: 10px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: #333;
      color: white;
    }
  </style>
</head>
<body>
  <h3>Dark Mode</h3>
  <button id="toggleDarkMode">Toggle</button>
  <script src="popup.js"></script>
</body>
</html>

3. popup.js

यह popup.js फाइल एक javascript फाइल होती है जो आपके एक्सटेंशन के UI से कनेक्टेड रहती है और कौन सा ऑपरेशन परफॉर्म करना है जब कोई इवेंट एक्सटेंशन के UI से ट्रिगर होता है। जैसे इस कोड में दिया है की अगर आप टॉगल बटन को प्रेस करते है तो content.js फाइल का कोड या scripting रन होगी। 

document.getElementById("toggleDarkMode").addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["content.js"]
  });
});


4. content.js

यह file website पर dark mode CSS inject करती है। ताकि जिस वेबसाइट को आपने ओपन कर रखा है उसमे dark या लाइट मोड enable किया जा सके। 

(function() {
  let darkStyleId = "dark-mode-extension-style";
  let existingStyle = document.getElementById(darkStyleId);

  if (existingStyle) {
    // Remove dark mode
    existingStyle.remove();
  } else {
    // Apply dark mode
    let style = document.createElement("style");
    style.id = darkStyleId;
    style.innerHTML = `
      html, body {
        background-color: #121212 !important;
        color: #e0e0e0 !important;
      }
      img, video {
        filter: brightness(0.8) contrast(1.2);
      }
      a { color: #82aaff !important; }
    `;
    document.head.appendChild(style);
  }
})();



📥 Source Code Files

👉 सभी source code files आप यहाँ से download कर सकते हैं यह कोड आपको ज़िप फाइल में मिलेगा जिसको आपको extract करना पड़ेगा अपने सिस्टम में फाइल को डाउनलोड करने के बाद। 


🔗 Download Code Files 



Watch Explanation Video on YouTube 

अगर आप chrome extension बनाने की प्रोसेस वीडियो में देखना चाहते है की कैसे chrome extension बनती है तो आप इस वीडियो को YouTube पर देख सकते है इस वीडियो में हमने सारी प्रोसेस को डिटेल में explain किया है। 






❓ FAQs

Q1: क्या यह extension सभी websites पर काम करेगी ?
हाँ, यह basic dark mode toggle है और सभी websites पर काम करेगी ।

Q2: क्या मुझे Chrome Web Store पर publish करने के लिए extra steps चाहिए?
हाँ, publish करने के लिए आपको developer account और कुछ extra settings की जरूरत होगी  और साथ में आपको 5 डॉलर की फीस भी गूगल को देनी पड़ती है। 

Q3: क्या मैं custom icon बदल सकता हूँ?
हाँ, आप icons/ folder में अपनी पसंद के PNG icons डालकर बदल सकते हैं।


🔗 Related Posts

  1. Top 5 Common JavaScript Errors 


🏁 Conclusion

तो दोस्तों हमने इस ब्लॉग पोस्ट में सीखा कि कैसे हम ChatGPT/AI की मदद से Chrome Extension (Dark Mode Toggle) बना सकते है और crome में अपलोड करके test कर सकते है। मै आशा करता हूँ की आपको यह पोस्ट जरूर पसंद आई होती और आप chrome extension बनाना सीख गए होंगे। तो आज के लिए बस इतना ही मिलते है किसी और पोस्ट में तब तक के लिए अलविदा !

आप हमारे YouTube Channel को भी Subscribe कर सकते है जिससे आपको ऐसे और coding tutorials , नई टेक्नोलॉजी से रिलेटेड वीडियो सबसे पहले देख सके।

create and test crome extension using chatgpt ai tool in hindi

Tags

Post a Comment

0 Comments

Do not enter any spam comments please.