এআই এজেন্ট ব্যবহার করে ক্রোম এক্সটেনশন ডিবাগ করুন

এজেন্টদের জন্য ক্রোম ডেভটুলস আপনার এজেন্টকে একটি এমসিপি সার্ভার ব্যবহার করে ব্রাউজার সেশন শুরু করতে এবং ক্রোম এক্সটেনশন ইনস্টল বা সেগুলোর সাথে ইন্টারঅ্যাক্ট করতে সক্ষম করে। এটি আপনার কোডিং এজেন্টকে এক্সটেনশনের জীবনচক্র নিয়ন্ত্রণ করতে দেয়: যেমন—ইনস্টল করা, রিলোড করা এবং বিভিন্ন অ্যাকশন ট্রিগার করা।

প্রতিবার কোড পরিবর্তন করার পর ম্যানুয়ালি একটি আনপ্যাক করা এক্সটেনশন লোড করা, এক্সটেনশন ম্যানেজমেন্ট পেজে রিলোড বোতামে ক্লিক করা এবং পরীক্ষা করার জন্য ম্যানুয়ালি এক্সটেনশনটি চালু করার পরিবর্তে, আপনার এআই এজেন্টকে সম্পূর্ণ প্রক্রিয়াটি স্বয়ংক্রিয়ভাবে পরিচালনা করার নির্দেশ দিন। এটি স্ট্যাটিক কোড জেনারেশন এবং লাইভ এক্সটেনশন টেস্টিংয়ের মধ্যকার ব্যবধান পূরণ করে।

আপনি এক্সটেনশন টুলগুলো ব্যবহার করে নিম্নলিখিত কাজগুলো করতে পারেন:

  • এক্সটেনশন ইনস্টল করুন: স্থানীয় ডিরেক্টরি পাথ থেকে একটি আনপ্যাক করা ক্রোম এক্সটেনশন ইনস্টল করুন।
  • এক্সটেনশনগুলির তালিকা: ইনস্টল করা সমস্ত ক্রোম এক্সটেনশনের একটি তালিকা পুনরুদ্ধার করুন, যার মধ্যে তাদের নাম, আইডি, সংস্করণ এবং সক্রিয় অবস্থা অন্তর্ভুক্ত থাকবে।
  • এক্সটেনশন রিলোড করুন: কোডের পরিবর্তনগুলো তাৎক্ষণিকভাবে প্রয়োগ করতে, আনপ্যাক করা ক্রোম এক্সটেনশনটিকে তার আইডি দিয়ে রিলোড করুন।
  • অ্যাকশন ট্রিগার করুন: কোনো এক্সটেনশনের আইডি ব্যবহার করে তার ডিফল্ট অ্যাকশন ট্রিগার করুন, যেমন একটি মেনু খোলা বা ব্যাকগ্রাউন্ড স্ক্রিপ্ট অ্যাকশন চালানো ( এপিআই ডকুমেন্টেশনে chrome.action দেখুন)।
    • এক্সটেনশন আনইনস্টল করুন: এর আইডি ব্যবহার করে ব্রাউজার সেশন থেকে একটি ক্রোম এক্সটেনশন সরিয়ে ফেলুন।

পূর্বশর্ত

এক্সটেনশন টুলগুলো ব্যবহার করার আগে, নিশ্চিত করুন যে আপনার কাছে নিম্নলিখিত জিনিসগুলো রয়েছে:

  • পরীক্ষামূলক ফ্ল্যাগ: DevTools for Agents-এ Extensions ক্যাটাগরিটি ডিফল্টরূপে সক্রিয় থাকে না। আপনাকে অবশ্যই --categoryExtensions ফ্ল্যাগ ব্যবহার করে MCP সার্ভারটি কনফিগার করতে হবে।
  • আনপ্যাক করা এক্সটেনশন: install_extension মতো টুলগুলির জন্য আনপ্যাক করা এক্সটেনশন ফোল্ডারের একটি অ্যাবসোলিউট পাথ প্রয়োজন হয়, যা এগুলিকে লোকাল ডেভেলপমেন্টের জন্য আদর্শ করে তোলে।

ক্রোম এক্সটেনশন টুলগুলির ব্যবহারের ক্ষেত্র

উন্নয়ন ও বাগ সংশোধনের সময় আপনার এজেন্টকে এক্সটেনশনের জীবনচক্র পরিচালনা করার নির্দেশ দিন।

দ্রষ্টব্য: এজেন্টের কার্য সম্পাদনের ধাপগুলো সম্ভাব্য আচরণের উদাহরণ। আপনার এজেন্ট ভিন্নভাবে কাজ করতে পারে।

দ্রুত পুনরাবৃত্তি করুন এবং একটি এক্সটেনশন পুনরায় লোড করুন

প্রতিটি ফাইল পরিবর্তনের পর ম্যানুয়ালি এক্সটেনশন রিলোড করলে ডেভেলপমেন্টের গতি কমে যায়। আপনার এজেন্টকে নির্দেশ দিন যেন এটি একটি কোড ফিক্স প্রয়োগ করে এবং ম্যানুয়াল হস্তক্ষেপ ছাড়াই নতুন আচরণ যাচাই করার জন্য অবিলম্বে এক্সটেনশনটি রিলোড করে।

উদাহরণ প্রম্পট:

আপনি একটি সাধারণ পদ্ধতি ব্যবহার করতে পারেন:

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 টুলটির মাধ্যমে ব্রাউজার থেকে এক্সটেনশনটিকে নিরাপদে মুছে ফেলে।

একটি নতুন এক্সটেনশন তৈরি করুন এবং এটি পরীক্ষা করুন।

প্রথম থেকে একটি নতুন ক্রোম এক্সটেনশন শুরু করতে সাধারণত বয়লারপ্লেট ফাইল তৈরি করতে হয় এবং পরীক্ষা করার জন্য আনপ্যাক করা ডিরেক্টরিটি ম্যানুয়ালি ব্রাউজারে লোড করতে হয়। আপনার এজেন্টকে প্রাথমিক কোড তৈরি করতে, এক্সটেনশনটি লোড করতে এবং এর মৌলিক কার্যকারিতা শুরু থেকে শেষ পর্যন্ত, এক ধাপে যাচাই করার নির্দেশ দিয়ে এই ম্যানুয়াল সেটআপটি এড়িয়ে যান।

উদাহরণ প্রম্পট:

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 ইন্সপেক্ট করে বা একটি স্ক্রিনশট নেয়, যা প্রমাণ করে যে বয়লারপ্লেটটি কার্যকরী।