कोडिंग एजेंट की मदद से एक्सटेंशन बनाना

Antigravity जैसे एआई कोडिंग एजेंट, अब एक्सटेंशन कोड को सटीक तरीके से जनरेट कर सकते हैं. हालांकि, एआई एजेंट की क्षमता का पूरा फ़ायदा पाने और अच्छी क्वालिटी के नतीजे पाने के लिए, आपको उन्हें सही कॉन्टेक्स्ट और टूल देने होंगे.

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

हमने कोडिंग एजेंट के लिए एक स्किल बनाई है. इसे खास तौर पर एक्सटेंशन डेवलपमेंट के लिए डिज़ाइन किया गया है. यह स्किल, हमारी बड़ी पहल मॉडर्न वेब गाइडेंस का हिस्सा है. इससे एआई कोडिंग एजेंट को वेब प्लैटफ़ॉर्म की विशेषज्ञता, सबसे सही तरीके, और मॉडर्न एपीआई पैटर्न मिलते हैं.

हालांकि, एक्सटेंशन बनाना तो सिर्फ़ पहला कदम है. एजेंट के लिए Chrome DevTools की मदद से, एआई कोडिंग असिस्टेंट, Chrome में सीधे एक्सटेंशन डीबग कर सकते हैं. इससे आपको यह पुष्टि करने में मदद मिलती है कि आपका कोड उम्मीद के मुताबिक काम कर रहा है या नहीं. साथ ही, DevTools की डीबगिंग सुविधाओं और परफ़ॉर्मेंस के बारे में अहम जानकारी का फ़ायदा मिलता है.

सेटअप

मॉडर्न वेब गाइडेंस

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

सीएलआई

ज़्यादातर कोडिंग एजेंट (जैसे, Gemini CLI, Claude Code, और Codex) को इंस्टॉल करने के लिए, Chrome टीम के बनाए गए modern-web-guidance सीएलआई का इस्तेमाल करने का सुझाव दिया जाता है. modern-web-guidance सीएलआई का इस्तेमाल करके स्किल इंस्टॉल करने पर, स्किल अपने-आप अप-टू-डेट रहेंगी.

  npx modern-web-guidance@latest install --choose

इससे एक इंटरैक्टिव विज़र्ड चलता है, जो आपकी प्राथमिकताओं के हिसाब से स्किल इंस्टॉल करता है. विकल्प दिखने पर, अपने कोडिंग एजेंट चुनें. इसके बाद, chrome-extensions और modern-web-guidance, दोनों को चुनें.

Antigravity

Antigravity इंस्टॉल करते समय, मॉडर्न वेब गाइडेंस प्लग इन को चुना जा सकता है. इसमें एक्सटेंशन स्किल शामिल होती है. इसके अलावा, इसे पसंद के मुताबिक बनाएं > Build With Google प्लग इन > मॉडर्न वेब गाइडेंस के ज़रिए भी जोड़ा जा सकता है.

कोडिंग एजेंट के लिए Chrome DevTools

एजेंट के लिए Chrome DevTools को अपनी पसंद के कोडिंग एजेंट में प्लगिन, एक्सटेंशन या एमसीपी सर्वर के तौर पर जोड़ा जा सकता है.

यहां कुछ सबसे लोकप्रिय एजेंट के लिए निर्देश दिए गए हैं.

Antigravity

1. Antigravity IDE डाउनलोड करें. Antigravity का इस्तेमाल करने का सुझाव नहीं दिया जाता, क्योंकि इसमें एमसीपी सर्वर के कॉन्फ़िगरेशन में मैन्युअल तरीके से बदलाव नहीं किया जा सकता.

2. स्टार्टअप पर या सेटिंग > पसंद के मुताबिक बनाएं में जाकर, Build with Google में Chrome DevTools को चालू करें. इससे सिर्फ़ Chrome DevTools की स्किल इंस्टॉल होगी, एमसीपी सर्वर नहीं.

   

3. Chrome DevTools एमसीपी सर्वर जोड़ने के लिए, सेटिंग > पसंद के मुताबिक बनाएं पर जाएं. इसके बाद, एमसीपी सर्वर जोड़ें बटन पर क्लिक करें और Chrome DevTools खोजें.

   

   

   

4. एमसीपी सर्वर का कॉन्फ़िगरेशन खोलने के लिए, एमसीपी कॉन्फ़िगरेशन खोलें पर क्लिक करें. ध्यान दें कि IDE में कॉन्फ़िगरेशन फ़ाइल देखने के लिए, आपको सेटिंग बंद करनी होंगी.

   

5. कॉन्फ़िगरेशन के ये दो पैरामीटर जोड़ें: --categoryExtensions (एक्सटेंशन टूल चालू करने के लिए) और --autoConnect (किसी मौजूदा Chrome प्रोफ़ाइल से कनेक्ट करने की सुविधा चालू करने के लिए, जो Chrome के पहले से मौजूद एआई एपीआई का इस्तेमाल करने या साइन-इन करने के लिए ज़रूरी है).

   {
    "mcpServers": {
      "chrome-devtools-mcp": {
        "args": [
          "-y",
          "chrome-devtools-mcp@latest",
          "--categoryExtensions",
          "--autoConnect"
        ],
        "command": "npx"
      }
    }
   }
   

6. रिमोट डीबगिंग की सुविधा चालू करने के लिए, Chrome खोलें और chrome://inspect/#remote-debugging पर जाएं. इसके बाद, इस ब्राउज़र इंस्टेंस के लिए रिमोट डीबगिंग की अनुमति दें को चुनें.

   

7. Antigravity IDE को रीस्टार्ट करें.

8. एक नया फ़ाइल फ़ोल्डर बनाएं और टेस्ट प्रॉम्प्ट बनाएं: "नमस्ते Chrome एक्सटेंशन बनाएं. Chrome DevTools का इस्तेमाल करके जांच करें." जब एजेंट ब्राउज़र में एक्सटेंशन की जांच शुरू करेगा, तब Chrome आपको एक डायलॉग दिखाएगा. इसमें रिमोट डीबगिंग की अनुमति मांगी जाएगी. अनुमति दें को चुनें. रिमोट डीबगिंग सेशन चालू होने पर, Chrome एक बैनर दिखाएगा. इस पर लिखा होगा, "फ़िलहाल, Chrome को ऑटोमेटेड टेस्ट सॉफ़्टवेयर से कंट्रोल किया जा रहा है".

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

अन्य एजेंट

अन्य एजेंट सेट अप करने के निर्देश पाने के लिए, Chrome DevTools MCP GitHub पर मौजूद दस्तावेज़ देखें.

CHROMEWEBSTORE.md एजेंट के लिए निर्देश

किसी एक्सटेंशन को पब्लिश करने का एक अहम हिस्सा, Developer Dashboard में जानकारी भरना है. यह स्किल, इस समस्या को हल करने के लिए आपके कोडिंग एजेंट से एक CHROMEWEBSTORE.md फ़ाइल बनाने और उसे मैनेज करने के लिए कहती है. इस फ़ाइल में ज़रूरी जानकारी को ट्रैक किया जाता है. इसमें कोड में मांगी गई हर अनुमति के अनुरोध की वजहें भी शामिल होती हैं.

यह स्किल तब ट्रिगर होगी, जब "चलो, इसे पब्लिश करते हैं" या "इस एक्सटेंशन को स्टोर के लिए तैयार करो" जैसे वाक्यांशों का इस्तेमाल किया जाएगा. हालांकि, एजेंट के वर्कफ़्लो को बेहतर बनाने के लिए, एजेंट के सिस्टम से जुड़े निर्देशों में ये चीज़ें जोड़ें (उदाहरण के लिए, Antigravity के लिए ~/.gemini/GEMINI.md या Claude के लिए ~/.claude/CLAUDE.md):

Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.

कोडिंग एजेंट की मदद से अपना एक्सटेंशन बनाना और उसे टेस्ट करना

मॉडर्न वेब गाइडेंस में शामिल एक्सटेंशन स्किल, एजेंट की तीन मुख्य तरीकों से मदद करती है:

• एपीआई के बारे में अप-टू-डेट जानकारी: इससे एजेंट को नए एपीआई के बारे में जानकारी मिलती है. ये एपीआई, आपके इस्तेमाल किए जा रहे मॉडल को ट्रेनिंग देने के बाद रिलीज़ किए गए हो सकते हैं.
• सबसे सही तरीके: इससे यह पक्का होता है कि एजेंट के पास उन सभी सबसे सही तरीकों का ऐक्सेस हो जो हमारी टीम ने Chrome एक्सटेंशन बनाने के दौरान सालों में सीखे हैं.
• सबमिट करने के लिए तैयार है या नहीं: यह उस जानकारी को ट्रैक करता है जो आपको Chrome Web Store पर अपना एक्सटेंशन सबमिट करने के लिए ज़रूरी हो सकती है. इससे एक्सटेंशन को डिस्ट्रिब्यूट करना आसान हो जाता है.

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

इस स्किल की मदद से, आपका एजेंट पब्लिश करने के लिए ज़रूरी जानकारी को ट्रैक कर सकता है. इसमें कोड में मांगी गई हर अनुमति के अनुरोध के लिए दी गई वजहें शामिल हैं. उदाहरण के लिए, अगर आपने अपने कोडिंग एजेंट से साइड पैनल एपीआई का इस्तेमाल करके कोई एक्सटेंशन बनाने और उसे Chrome Web Store पर पब्लिश करने के लिए कहा, तो एजेंट को पता चल जाएगा कि उसे sidePanel अनुमति की ज़रूरत है. इसके बाद, यह वजह के साथ एक CHROMEWEBSTORE.md फ़ाइल बनाएगा. सबमिट करने के लिए तैयार होने पर, इस वजह की समीक्षा की जा सकती है. साथ ही, ज़रूरत पड़ने पर इसमें बदलाव किए जा सकते हैं. इसके बाद, इसे सीधे Developer Dashboard में कॉपी किया जा सकता है.

एजेंट के लिए Chrome DevTools की मदद से, एआई कोडिंग में मदद करने वाले टूल, Chrome के चालू इंस्टेंस में एक्सटेंशन इंस्टॉल और डीबग कर सकते हैं. खास तौर पर:

• एक्सटेंशन इंस्टॉल और अनइंस्टॉल करना.
• इंस्टॉल किए गए सभी एक्सटेंशन की सूची देखना और उन्हें फिर से लोड करना.
• एक्सटेंशन की कार्रवाइयां ट्रिगर करना.
• अपने एक्सटेंशन के हर हिस्से (पॉप-अप, साइड पैनल, सर्विस वर्कर) की जांच करें.

यहां एक प्रॉम्प्ट और वीडियो दिया गया है. इसमें दिखाया गया है कि यह सुविधा कैसे काम करती है:

Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.

इस मामले में, एजेंट को Manifest V3 फ़ाइल बनानी चाहिए और storage अनुमति का अनुरोध करना चाहिए. ऐसा इसलिए, क्योंकि उसे पता है कि उसे डेटा सेव रखना है. एजेंट अब एक्सटेंशन बना सकता है, उसे इंस्टॉल कर सकता है, उसे चलाकर देख सकता है, और उसकी स्थिरता की पुष्टि कर सकता है. इसके लिए, आपको चैट इंटरफ़ेस से बाहर जाने की ज़रूरत नहीं है.

यह एक आसान प्रॉम्प्ट का उदाहरण है. प्रॉम्प्ट लिखने की अलग-अलग तकनीकों के बारे में ज़्यादा जानने और अपने इस्तेमाल के उदाहरण के लिए सबसे सही तकनीक ढूंढने के लिए, प्रॉम्प्ट इंजीनियरिंग के बारे में हमारी गाइड देखें.

CHROMEWEBSTORE.md की मदद से, डिस्ट्रिब्यूशन को आसान बनाने के लिए प्रॉम्प्ट के उदाहरण

एक्सटेंशन स्किल इंस्टॉल करने और अपने एजेंट को निर्देश देने से ज़्यादातर काम हो जाएगा. हालांकि, अपने प्रॉम्प्ट में सटीक जानकारी देने से, आपको डेवलपमेंट के मौजूदा चरण के लिए बेहतर नतीजे मिल सकते हैं. यहां अपने एजेंट को CHROMEWEBSTORE.md फ़ाइल बनाने, अपडेट करने, और उसे मैनेज करने के लिए प्रॉम्प्ट देने का तरीका बताया गया है.

• पहली बार पब्लिश करना: जब आपके एक्सटेंशन में सभी सुविधाएं मौजूद हों और आपको स्टोर पर अपनी शुरुआती मौजूदगी जनरेट करनी हो.

Prepare the extension for publication on the Chrome Web Store.

• अनुमतियों और वजहों को अपडेट करना: Chrome Web Store, खास सुविधा देने की नीति को लागू करता है. साथ ही, आपके manifest.json में मांगी गई हर अनुमति के लिए, पूरी जानकारी देना ज़रूरी है.

We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.

• स्टोर से एक्सटेंशन अस्वीकार होने पर क्या करें: अगर समीक्षा के दौरान आपका एक्सटेंशन अस्वीकार कर दिया जाता है या उसे फ़्लैग किया जाता है, तो एजेंट को सीधे तौर पर अस्वीकार किए जाने की वजह बताएं. साथ ही, उसे नीति का पालन करने से जुड़ा मेटाडेटा अपडेट करने के लिए कहें.

Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.

नतीजा

एजेंट के लिए Chrome DevTools के साथ मॉडर्न वेब गाइडेंस की स्किल को जोड़ने से, आपको अच्छी क्वालिटी की सुविधाएं तेज़ी से बनाने में मदद मिलती है. साथ ही, यह पक्का किया जाता है कि आपका एक्सटेंशन स्टेबल हो और Chrome Web Store पर सबमिट करने के लिए तैयार हो.

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