एजेंट के लिए Chrome DevTools की मदद से, आपका एजेंट ब्राउज़र सेशन शुरू कर सकता है. साथ ही, MCP सर्वर का इस्तेमाल करके Chrome एक्सटेंशन इंस्टॉल कर सकता है या उनसे इंटरैक्ट कर सकता है. इससे कोडिंग करने वाला आपका एजेंट, एक्सटेंशन के लाइफ़साइकल को कंट्रोल कर सकता है. जैसे, एक्सटेंशन इंस्टॉल करना, रीलोड करना, और ऐक्शन ट्रिगर करना.
एक्सटेंशन को मैन्युअल तरीके से लोड करने के बजाय, हर बार कोड में बदलाव करने पर एक्सटेंशन मैनेजमेंट पेज में रीलोड बटन पर क्लिक करें. साथ ही, एक्सटेंशन की जांच करने के लिए, उसे मैन्युअल तरीके से ट्रिगर करें. इसके बजाय, अपने एआई एजेंट को पूरी प्रोसेस को अपने-आप मैनेज करने का निर्देश दें. इससे, स्टैटिक कोड जनरेट करने और लाइव एक्सटेंशन की जांच करने के बीच का अंतर कम हो जाता है.
एक्सटेंशन टूल का इस्तेमाल करके, ये काम किए जा सकते हैं:
- एक्सटेंशन इंस्टॉल करना: Chrome के अनपैक्ड एक्सटेंशन को, लोकल डायरेक्ट्री पाथ से इंस्टॉल करना.
- एक्सटेंशन की सूची देखना: इंस्टॉल किए गए सभी Chrome एक्सटेंशन की सूची पाना. इसमें उनके नाम, आईडी, वर्शन, और चालू स्थिति शामिल होती है.
- एक्सटेंशन रीलोड करना: कोड में किए गए बदलावों को तुरंत लागू करने के लिए, Chrome के अनपैक्ड एक्सटेंशन को उसकी आईडी से रीलोड करना.
- ऐक्शन ट्रिगर करना: किसी एक्सटेंशन की आईडी से, उसका डिफ़ॉल्ट ऐक्शन ट्रिगर करना.
जैसे, मेन्यू खोलना या बैकग्राउंड स्क्रिप्ट ऐक्शन को लागू करना (ज़्यादा जानकारी के लिए,
एपीआई के दस्तावेज़ में chrome.action देखें).
- एक्सटेंशन अनइंस्टॉल करना: Chrome एक्सटेंशन को ब्राउज़र सेशन से उसकी आईडी के ज़रिए हटाना.
ज़रूरी शर्तें
एक्सटेंशन टूल का इस्तेमाल करने से पहले, पक्का करें कि आपके पास ये चीज़ें हों:
- एक्सपेरिमेंटल फ़्लैग: एजेंट के लिए DevTools में, एक्सटेंशन कैटगरी डिफ़ॉल्ट रूप से चालू नहीं होती. आपको MCP
सर्वर को
--categoryExtensionsफ़्लैग के साथ कॉन्फ़िगर करना होगा. - अनपैक्ड एक्सटेंशन:
install_extensionजैसे टूल के लिए, अनपैक्ड एक्सटेंशन फ़ोल्डर का पूरा पाथ ज़रूरी होता है. इसलिए, ये टूल लोकल डेवलपमेंट के लिए सही होते हैं. एक्सटेंशन फ़ोल्डर का ऐक्सेस: सर्वर, सिर्फ़ अपने Workspace रूट में मौजूद फ़ाइलें पढ़ सकता है. ये रूट, आपका MCP क्लाइंट उपलब्ध कराता है. जैसे, आपकी प्रोजेक्ट डायरेक्ट्री. अगर आपका क्लाइंट रूट उपलब्ध नहीं कराता है, तो सर्वर सिर्फ़ ओएस की अस्थायी डायरेक्ट्री को ऐक्सेस कर सकता है. macOS पर, यह डायरेक्ट्री
/tmpनहीं होती. अगर एक्सटेंशन फ़ोल्डर इन रूट से बाहर है, तोinstall_extensionटूल,Access deniedगड़बड़ी के साथ काम नहीं करता. किसी दूसरे फ़ोल्डर को अनुमति देने के लिए, अपने सर्वर के आर्ग्युमेंट में--filesystemRootफ़्लैग (उर्फ़--workspace) जोड़ें:"args": ["chrome-devtools-mcp@latest", "--categoryExtensions", "--filesystemRoot=/path/to/extensions"]ज़्यादा जानकारी के लिए, अस्थायी डायरेक्ट्री के बाहर मौजूद फ़ाइलों का ऐक्सेस देना लेख पढ़ें.
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 a 'gray-bg-ext' folder in my project, navigate to example.com, load the extension, and verify that it works.
एजेंट के काम करने का उदाहरण: आपका एजेंट, बुनियादी मेनिफ़ेस्ट V3 manifest.json और एक बैकग्राउंड सर्विस वर्कर बनाता है. यह वर्कर, chrome.action.onClicked इवेंट को सुनता है. इसके बाद, वह टेस्ट पेज पर जाता है, install_extension को शुरू करता है, और उपयोगकर्ता के क्लिक की गतिविधि को सिम्युलेट करने के लिए, trigger_extension_action का इस्तेमाल करता है. आखिर में, वह DOM की जांच करता है या स्क्रीनशॉट लेता है, ताकि यह पुष्टि की जा सके कि बैकग्राउंड ग्रे हो गया है. इससे यह साबित होता है कि बॉयलरप्लेट काम कर रहा है.