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

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

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

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

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

सेटअप

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

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

CLI

ज़्यादातर कोडिंग एजेंट (इनमें 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 इंस्टॉल करते समय, मॉडर्न वेब गाइडेंस प्लगिन चुना जा सकता है. इसमें एक्सटेंशन स्किल शामिल होती है. इसके अलावा, इसे पसंद के मुताबिक बनाना > Google के प्लगिन की मदद से बनाना > मॉडर्न वेब गाइडेंस के ज़रिए भी जोड़ा जा सकता है.

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

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

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

Antigravity

एजेंट के लिए Chrome DevTools के एमसीपी सर्वर का इस्तेमाल करने के लिए, कस्टम एमसीपी सर्वर इंस्टॉल करने से जुड़े निर्देश पाने के लिए, Antigravity के दस्तावेज़ देखें. एमसीपी सर्वर के कॉन्फ़िगरेशन में यह जोड़ें:

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

Claude Code

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

अन्य एजेंट

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

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

एक्सटेंशन पब्लिश करने के लिए, डेवलपर डैशबोर्ड भरना ज़रूरी है. स्किल, 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 वेब स्टोर पर अपना एक्सटेंशन सबमिट करने के लिए पड़ सकती है. इससे, डिस्ट्रिब्यूशन आसान हो जाता है.

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

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

एजेंट के लिए 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 वेब स्टोर, खास सुविधा देने की नीति लागू करता है. साथ ही, आपके `manifest.json` में मांगी गई हर अनुमति के लिए, वजहें देना ज़रूरी है.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 वेब स्टोर पर सबमिट करने के लिए तैयार हो.

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