কোডিং এজেন্ট দিয়ে এক্সটেনশন তৈরি করুন

অ্যান্টিগ্র্যাভিটির মতো এআই কোডিং এজেন্টগুলো এখন বেশ নির্ভুলভাবে এক্সটেনশন কোড তৈরি করতে পারে। তবে, তাদের পূর্ণ সম্ভাবনাকে কাজে লাগাতে এবং উচ্চ-মানের ফলাফল নিশ্চিত করতে, আপনাকে তাদের সঠিক প্রেক্ষাপট এবং সরঞ্জাম সরবরাহ করতে হবে।

এই নির্দেশিকায় ব্যাখ্যা করা হয়েছে কীভাবে আপনার কোডিং এজেন্টগুলিতে সঠিক টুলগুলি সেটআপ করতে হয় এবং কীভাবে সেগুলি আপনাকে আরও দ্রুত ও উন্নত মানের এক্সটেনশন তৈরি করতে সাহায্য করতে পারে।

আমরা এক্সটেনশন ডেভেলপমেন্টের জন্য বিশেষভাবে ডিজাইন করা কোডিং এজেন্টদের জন্য একটি স্কিল তৈরি করেছি। এই স্কিলটি আমাদের বৃহত্তর উদ্যোগ ‘মডার্ন ওয়েব গাইডেন্স’ -এর একটি অংশ, যা এআই কোডিং এজেন্টদের ওয়েব প্ল্যাটফর্মের দক্ষতা, সেরা অনুশীলন এবং আধুনিক এপিআই প্যাটার্ন সরবরাহ করে।

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

সেটআপ

আধুনিক ওয়েব নির্দেশিকা

স্কিল প্যাকটি ব্যবহার করতে, আপনার পছন্দের পরিবেশে মডার্ন ওয়েব গাইডেন্স ইনস্টল করুন এবং এতে এক্সটেনশন স্কিলটি যুক্ত করুন। এখানে কিছু জনপ্রিয় টুলের জন্য নির্দেশাবলী দেওয়া হলো।

সিএলআই

বেশিরভাগ কোডিং এজেন্টের (Gemini CLI, Claude Code এবং Codex সহ) জন্য প্রস্তাবিত ইনস্টলেশন পদ্ধতি হলো Chrome টিমের তৈরি modern-web-guidance CLI-এর মাধ্যমে। modern-web-guidance CLI-এর মাধ্যমে স্কিলগুলো ইনস্টল করলে, সেগুলো স্বয়ংক্রিয়ভাবে হালনাগাদ থাকবে।

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

এটি আপনার পছন্দ অনুযায়ী স্কিলগুলো ইনস্টল করার জন্য একটি ইন্টারেক্টিভ উইজার্ড চালু করে। যখন অপশনগুলো দেখানো হবে, তখন আপনার কোডিং এজেন্ট(গুলো) নির্বাচন করুন এবং chrome-extensions ও modern-web-guidance উভয়ই বেছে নিন।

অ্যান্টিগ্র্যাভিটি

Antigravity ইনস্টল করার সময়, আপনি Modern Web Guidance প্লাগইনটি নির্বাচন করতে পারেন, যেটিতে এক্সটেনশন স্কিল অন্তর্ভুক্ত রয়েছে, অথবা আপনি Customizations > Build With Google Plugins > Modern Web Guidance- এর মাধ্যমে এটি যোগ করতে পারেন।

কোডিং এজেন্টদের জন্য ক্রোম ডেভটুলস

আপনি আপনার পছন্দের কোডিং এজেন্টের সাথে Chrome DevTools for agents-কে প্লাগইন, এক্সটেনশন অথবা MCP সার্ভার হিসেবে যুক্ত করতে পারেন।

এখানে সবচেয়ে জনপ্রিয় কিছু এজেন্টের নির্দেশাবলী দেওয়া হলো।

অ্যান্টিগ্র্যাভিটি

1. Antigravity IDE ডাউনলোড করুন (Antigravity ব্যবহার করার পরামর্শ দেওয়া হয় না, কারণ এটি আপনাকে ম্যানুয়ালি MCP সার্ভার কনফিগারেশন সম্পাদনা করার সুযোগ দেয় না)।

2. স্টার্টআপে, অথবা সেটিংস > কাস্টমাইজেশন- এ গিয়ে, 'বিল্ড উইথ গুগল'-এর অধীনে ক্রোম ডেভটুলস সক্রিয় করুন। এটি শুধুমাত্র ক্রোম ডেভটুলস স্কিলটি ইনস্টল করবে, কিন্তু এমসিপি সার্ভারটি নয়।

   

3. Chrome DevTools MCP সার্ভার যোগ করতে Settings > Customization- এ যান, Add MCP server বোতামে ক্লিক করুন এবং Chrome DevTools অনুসন্ধান করুন।

   

   

   

4. MCP সার্ভার কনফিগারেশন খুলতে Open MCP Config-এ ক্লিক করুন। মনে রাখবেন, IDE-তে কনফিগারেশন ফাইলটি দেখতে হলে আপনাকে সেটিংস বন্ধ করতে হবে।

   

5. নিম্নলিখিত দুটি কনফিগারেশন প্যারামিটার যোগ করুন: --categoryExtensions (এক্সটেনশন টুলগুলি সক্রিয় করতে) এবং --autoConnect (একটি বিদ্যমান Chrome প্রোফাইলের সাথে সংযোগ স্থাপন সক্ষম করতে, যা Chrome-এর অন্তর্নির্মিত AI API ব্যবহার করার সময় বা সাইন-ইন করার প্রয়োজন হলে আবশ্যক)।

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

6. রিমোট ডিবাগিং চালু করতে, Chrome খুলুন, chrome://inspect/#remote-debugging এ যান এবং Allow remote debugging for this browser instance নির্বাচন করুন।

   

7. Antigravity IDE পুনরায় চালু করুন।

8. একটি নতুন ওয়ার্কস্পেস তৈরি করুন এবং একটি টেস্ট প্রম্পট তৈরি করুন: "একটি হ্যালো ওয়ার্ল্ড ক্রোম এক্সটেনশন তৈরি করুন। ক্রোম ডেভটুলস ব্যবহার করে পরীক্ষা করুন।" যখন এজেন্ট ব্রাউজারে এক্সটেনশনটি পরীক্ষা করা শুরু করবে, ক্রোম আপনাকে রিমোট ডিবাগিংয়ের অনুমতি চেয়ে একটি ডায়ালগ দেখাবে। 'অনুমতি দিন' (Allow) নির্বাচন করুন। রিমোট ডিবাগিং সেশনটি চালু থাকা অবস্থায়, ক্রোম একটি ব্যানার প্রদর্শন করবে যেখানে লেখা থাকবে "ক্রোম বর্তমানে স্বয়ংক্রিয় পরীক্ষা সফটওয়্যার দ্বারা নিয়ন্ত্রিত হচ্ছে"।

<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 mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

অন্যান্য এজেন্টরা

অন্যান্য এজেন্ট সেট আপ করার নির্দেশাবলীর জন্য, Chrome DevTools MCP GitHub- এ থাকা ডক্স দেখুন।

CHROMEWEBSTORE.md এজেন্টের নির্দেশাবলী

একটি এক্সটেনশন প্রকাশ করার একটি গুরুত্বপূর্ণ অংশ হলো ডেভেলপার ড্যাশবোর্ড পূরণ করা। এই স্কিলটি আপনার কোডিং এজেন্টকে দিয়ে একটি CHROMEWEBSTORE.md ফাইল তৈরি ও রক্ষণাবেক্ষণ করানোর মাধ্যমে এই কাজটি সম্পন্ন করে, যা কোডে অনুরোধ করা প্রতিটি অনুমতির যৌক্তিকতাসহ প্রয়োজনীয় তথ্য ট্র্যাক করে।

আপনি যখন "Let's publish this" বা "Prepare this extension for the store"-এর মতো বাক্যাংশ ব্যবহার করবেন তখন স্কিলটি সক্রিয় হবে, কিন্তু আপনার এজেন্টিক ওয়ার্কফ্লোকে আরও সহজ করতে, আপনার এজেন্টের সিস্টেম নির্দেশাবলীতে নিম্নলিখিতটি যোগ করুন (উদাহরণস্বরূপ, 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.

কোডিং এজেন্ট ব্যবহার করে আপনার এক্সটেনশনটি তৈরি ও পরীক্ষা করুন।

মডার্ন ওয়েব গাইডেন্সে অন্তর্ভুক্ত এক্সটেনশন স্কিলটি এজেন্টদের তিনটি প্রধান উপায়ে সাহায্য করে:

• আপ-টু-ডেট এপিআই জ্ঞান: এটি এজেন্টদের সর্বশেষ এপিআই সম্পর্কে শিক্ষা দেয়, যা আপনার ব্যবহৃত মডেলটি প্রশিক্ষিত হওয়ার পরে প্রকাশিত হয়ে থাকতে পারে।
• সর্বোত্তম অনুশীলন: এটি নিশ্চিত করে যে, ক্রোম এক্সটেনশন তৈরি করতে গিয়ে আমাদের দল বছরের পর বছর ধরে যে সর্বোত্তম অনুশীলনগুলো শিখেছে, এজেন্টরা যেন সেগুলোর সবকটিই ব্যবহার করতে পারে।
• জমা দেওয়ার প্রস্তুতি: এটি আপনার এক্সটেনশনটি ক্রোম ওয়েব স্টোরে জমা দেওয়ার জন্য প্রয়োজনীয় তথ্য সংরক্ষণ করে, যা বিতরণকে আরও সহজ করে তোলে।

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

এই দক্ষতাটি আপনার এজেন্টকে প্রকাশের জন্য প্রয়োজনীয় তথ্য ট্র্যাক করতেও সাহায্য করে, যার মধ্যে কোডে অনুরোধ করা প্রতিটি অনুমতির যৌক্তিকতাও অন্তর্ভুক্ত। উদাহরণস্বরূপ, যদি আপনি আপনার কোডিং এজেন্টকে সাইড প্যানেল এপিআই (Side Panel API) ব্যবহার করে একটি এক্সটেনশন তৈরি করতে এবং ক্রোম ওয়েব স্টোরে (Chrome Web Store) প্রকাশ করতে বলেন, তাহলে এজেন্টটি বুঝতে পারবে যে এটির sidePanel অনুমতির প্রয়োজন। এরপর এটি একটি যৌক্তিকতা সহ CHROMEWEBSTORE.md ফাইলটি তৈরি করবে। যখন আপনি জমা দেওয়ার জন্য প্রস্তুত হবেন, তখন আপনি এই যৌক্তিকতাটি পর্যালোচনা করতে পারেন, প্রয়োজনে যেকোনো পরিবর্তন করতে পারেন এবং সরাসরি ডেভেলপার ড্যাশবোর্ডে (Developer Dashboard) এটি কপি করে দিতে পারেন।

এজেন্টদের জন্য ক্রোম ডেভটুলস এআই কোডিং অ্যাসিস্ট্যান্টদের একটি চলমান ক্রোম ইনস্ট্যান্সে এক্সটেনশন ইনস্টল এবং ডিবাগ করতে সক্ষম করে, বিশেষত:

• এক্সটেনশন ইনস্টল ও আনইনস্টল করুন।
• ইনস্টল করা সমস্ত এক্সটেনশনের তালিকা তৈরি করুন এবং সেগুলি পুনরায় লোড করুন।
• এক্সটেনশন অ্যাকশনগুলো চালু করুন।
• আপনার এক্সটেনশনের প্রতিটি পৃষ্ঠতল (পপআপ, সাইড প্যানেল, সার্ভিস ওয়ার্কার) পরিদর্শন করুন।

এখানে একটি নির্দেশ এবং একটি ভিডিও রয়েছে যা দেখায় যে বাস্তবে এটি কীভাবে কাজ করে:

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

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

এটি একটি সাধারণ প্রম্পট উদাহরণ। বিভিন্ন প্রম্পট কৌশল সম্পর্কে আরও জানতে এবং আপনার ব্যবহারের ক্ষেত্রে কোনটি সবচেয়ে ভালো কাজ করে তা খুঁজে পেতে, আমাদের প্রম্পট ইঞ্জিনিয়ারিং গাইডটি দেখুন।

CHROMEWEBSTORE.md ব্যবহার করে বিতরণ প্রক্রিয়াকে আরও সহজ করার জন্য কিছু উদাহরণ নিচে দেওয়া হলো।

যদিও এক্সটেনশন স্কিল ইনস্টল করা এবং আপনার এজেন্টে নির্দেশনা যোগ করাই বেশিরভাগ কাজ করে দেবে, আপনার ডেভেলপমেন্টের বর্তমান পর্যায়ে প্রম্পটগুলো সুনির্দিষ্ট হলে আরও ভালো ফলাফল পাওয়া যেতে পারে। আপনার CHROMEWEBSTORE.md ফাইলটি তৈরি, আপডেট এবং রক্ষণাবেক্ষণ করার জন্য কীভাবে আপনার এজেন্টকে প্রম্পট করবেন, তার একটি সংক্ষিপ্ত নির্দেশিকা এখানে দেওয়া হলো।

• প্রথমবার প্রকাশ : যখন আপনার এক্সটেনশনটির সমস্ত ফিচার সম্পন্ন হয় এবং আপনি আপনার স্টোরে এটি প্রথমবার প্রকাশ করতে চান।

Prepare the extension for publication on the 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.

উপসংহার

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

আপনার পরবর্তী প্রকল্পে এই টুলগুলো নিয়ে পরীক্ষা-নিরীক্ষা শুরু করুন এবং দেখুন কীভাবে এগুলো প্রাথমিক প্রোটোটাইপ থেকে প্রকাশনা পর্যন্ত আপনার এক্সটেনশন ডেভেলপমেন্টের প্রক্রিয়াকে আরও সহজ করে তুলতে পারে।