एजेंट के लिए Chrome DevTools की मदद से, आपका एजेंट ब्राउज़र सेशन शुरू कर सकता है. साथ ही, MCP सर्वर का इस्तेमाल करके Chrome एक्सटेंशन इंस्टॉल कर सकता है या उनसे इंटरैक्ट कर सकता है. इससे आपका कोडिंग एजेंट, एक्सटेंशन की लाइफ़साइकल को कंट्रोल कर सकता है. जैसे, इंस्टॉल करना, फिर से लोड करना, और कार्रवाइयां ट्रिगर करना.
अनपैक किए गए एक्सटेंशन को मैन्युअल तरीके से लोड करने, कोड में बदलाव करने पर हर बार एक्सटेंशन मैनेजमेंट पेज में जाकर रीलोड बटन पर क्लिक करने, और एक्सटेंशन को टेस्ट करने के लिए मैन्युअल तरीके से ट्रिगर करने के बजाय, अपने एआई एजेंट को पूरी प्रोसेस को अपने-आप मैनेज करने का निर्देश दें. इससे स्टैटिक कोड जनरेट करने और लाइव एक्सटेंशन टेस्टिंग के बीच के अंतर को कम करने में मदद मिलती है.
एक्सटेंशन टूल का इस्तेमाल करके, ये काम किए जा सकते हैं:
- एक्सटेंशन इंस्टॉल करें: किसी लोकल डायरेक्ट्री पाथ से अनपैक किया गया Chrome एक्सटेंशन इंस्टॉल करें.
- एक्सटेंशन की सूची: इंस्टॉल किए गए सभी Chrome एक्सटेंशन की सूची पाएं. इसमें उनके नाम, आईडी, वर्शन, और चालू होने की स्थिति शामिल है.
- एक्सटेंशन फिर से लोड करें: कोड में किए गए बदलावों को तुरंत लागू करने के लिए, अनपैक किए गए Chrome एक्सटेंशन को उसके आईडी के हिसाब से फिर से लोड करें.
- कार्रवाइयां ट्रिगर करना: एक्सटेंशन के आईडी के हिसाब से, उसके डिफ़ॉल्ट ऐक्शन को ट्रिगर करें. जैसे, मेन्यू खोलना या बैकग्राउंड स्क्रिप्ट ऐक्शन को लागू करना. इसके बारे में ज़्यादा जानने के लिए, एपीआई के दस्तावेज़ में chrome.action देखें.
- एक्सटेंशन अनइंस्टॉल करना: Chrome एक्सटेंशन को ब्राउज़र सेशन से उसके आईडी के हिसाब से हटाएं.
ज़रूरी शर्तें
एक्सटेंशन टूल का इस्तेमाल करने से पहले, पक्का करें कि आपके पास ये चीज़ें हों:
- एक्सपेरिमेंटल फ़्लैग: एक्सटेंशन कैटगरी, DevTools for Agents में डिफ़ॉल्ट रूप से चालू नहीं होती. आपको
--categoryExtensionsफ़्लैग के साथ एमसीपी सर्वर को कॉन्फ़िगर करना होगा. - अनपैक किए गए एक्सटेंशन:
install_extensionजैसे टूल के लिए, अनपैक किए गए एक्सटेंशन फ़ोल्डर का पूरा पाथ ज़रूरी होता है. इसलिए, ये टूल लोकल डेवलपमेंट के लिए सबसे सही होते हैं.
Chrome एक्सटेंशन टूल के इस्तेमाल के उदाहरण
अपने एजेंट को निर्देश दें कि वह एक्सटेंशन को डेवलप करते समय और बग ठीक करते समय, एक्सटेंशन के लाइफ़साइकल को मैनेज करे.
ध्यान दें: एजेंट के काम करने के तरीके के उदाहरणों से, संभावित व्यवहार के बारे में पता चलता है. आपका एजेंट अलग तरीके से काम कर सकता है.
एक्सटेंशन को तेज़ी से दोहराना और फिर से लोड करना
हर फ़ाइल में बदलाव के बाद एक्सटेंशन को मैन्युअल तरीके से रीलोड करने पर, डेवलपमेंट की प्रोसेस धीमी हो जाती है. अपने एजेंट को कोड ठीक करने के लिए कहें. साथ ही, एक्सटेंशन को तुरंत रीलोड करने के लिए कहें, ताकि मैन्युअल तरीके से किए जाने वाले बदलाव के बिना नए व्यवहार की पुष्टि की जा सके.
प्रॉम्प्ट का उदाहरण:
सामान्य तरीके का इस्तेमाल किया जा सकता है:
Verify the extension has access to the active tab.
इसके अलावा, ज़्यादा जानकारी भी दी जा सकती है:
Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.
एजेंट के काम करने का उदाहरण: आपका एजेंट, आपके फ़ाइल सिस्टम पर मौजूद manifest.json फ़ाइल में बदलाव करता है. इसके बाद, यह दिए गए आईडी का इस्तेमाल करके reload_extension टूल को चालू करता है.
आखिर में, यह trigger_extension_action टूल को कॉल करके एक्सटेंशन को चालू करता है. साथ ही, यह पुष्टि करता है कि कंसोल में अनुमति से जुड़ी कोई गड़बड़ी नहीं हुई है.
किसी टारगेट पेज पर एक्सटेंशन की डिफ़ॉल्ट कार्रवाई की जांच करना
आपको अक्सर यह जांच करनी होती है कि कोई कॉन्टेंट स्क्रिप्ट या एक्सटेंशन ऐक्शन, किसी वेबसाइट के साथ कैसे इंटरैक्ट करता है. इस प्रोसेस को ऑटोमेट करने के लिए, अपने एजेंट को साइट पर जाने, एक्सटेंशन इंस्टॉल करने, और इसे ट्रिगर करने का निर्देश दें.
प्रॉम्प्ट का उदाहरण:
सामान्य तरीके का इस्तेमाल किया जा सकता है:
Test my extension on example.com and verify it works correctly.
इसके अलावा, ज़्यादा जानकारी भी दी जा सकती है:
Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.
एजेंट के काम करने का उदाहरण: आपका एजेंट, navigate_page का इस्तेमाल करके टारगेट यूआरएल पर जाता है. इसके बाद, यह दिए गए ऐब्सलूट पाथ के साथ install_extension का इस्तेमाल करता है. एक्सटेंशन लोड होने के बाद, यह trigger_extension_action को
लागू करता है, ताकि उपयोगकर्ता के क्लिक का सिम्युलेट किया जा सके. आखिर में, यह list_console_messages का इस्तेमाल करके यह पुष्टि करता है कि कॉन्टेंट स्क्रिप्ट चली और उससे उम्मीद के मुताबिक आउटपुट मिला.
इंस्टॉल किए गए एक्सटेंशन की पुष्टि करना और उन्हें हटाना
ऑटोमेटेड टेस्टिंग के दौरान, आपको यह पुष्टि करनी पड़ सकती है कि एक्सटेंशन सही वर्शन के साथ सही तरीके से लोड हुआ है या नहीं. इसके अलावा, आपको इसे हटाना पड़ सकता है, ताकि अगली टेस्टिंग के लिए यह साफ़ तौर पर उपलब्ध हो.
प्रॉम्प्ट का उदाहरण:
Uninstall 'My Test Extension' from the browser.
एजेंट के काम करने का उदाहरण: आपका एजेंट, इंस्टॉल किए गए एक्सटेंशन और उनके मेटाडेटा की सूची पाने के लिए, list_extensions टूल का इस्तेमाल करता है. यह आउटपुट को पार्स करके, "My Test Extension" से जुड़े आईडी की पहचान करता है. इसके बाद, यह उस आईडी के साथ uninstall_extension टूल का इस्तेमाल करके, उसे ब्राउज़र से सुरक्षित तरीके से हटा देता है.
नया एक्सटेंशन बनाना और उसे टेस्ट करना
शुरुआत से नया Chrome एक्सटेंशन बनाने के लिए, आम तौर पर बॉयलरप्लेट फ़ाइलें बनानी पड़ती हैं. साथ ही, एक्सटेंशन की जांच करने के लिए, अनपैक की गई डायरेक्ट्री को ब्राउज़र में मैन्युअल तरीके से लोड करना पड़ता है. अपने एजेंट को शुरुआती कोड जनरेट करने, एक्सटेंशन लोड करने, और एक ही चरण में इसकी बुनियादी सुविधाओं की पुष्टि करने के लिए कहें. इससे आपको मैन्युअल तरीके से सेटअप करने की ज़रूरत नहीं पड़ेगी.
प्रॉम्प्ट का उदाहरण:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to '/tmp/gray-bg-ext', navigate to example.com, load the extension, and verify that it works.
एजेंट के काम करने का उदाहरण: आपका एजेंट, बुनियादी Manifest V3 manifest.json और बैकग्राउंड सर्विस वर्कर बनाता है. यह chrome.action.onClicked इवेंट को सुनता है. इसके बाद, यह टेस्ट पेज पर जाता है, install_extension को चालू करता है, और trigger_extension_action का इस्तेमाल करके उपयोगकर्ता के क्लिक को सिम्युलेट करता है. आखिर में, यह पुष्टि करने के लिए कि बॉयलरप्लेट काम कर रहा है, यह DOM की जांच करता है या स्क्रीनशॉट लेता है. इससे यह पता चलता है कि बैकग्राउंड ग्रे हो गया है.