কোডিং এজেন্টের সাহায্যে এক্সটেনশন তৈরি করা

Antigravity-এর মতো AI কোডিং এজেন্ট এখন অসাধারণ নির্ভুলতার সাথে এক্সটেনশন কোড জেনারেট করতে পারে। তবে, তাদের সম্ভাবনাকে সত্যিকার অর্থে আনলক করতে এবং খুব ভালো কোয়ালিটির ফলাফল নিশ্চিত করতে, আপনাকে তাদের সঠিক প্রসঙ্গ এবং টুল প্রদান করতে হবে।

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

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

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

সেট-আপ করুন

মডার্ন ওয়েব নির্দেশিকা

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

CLI

বেশিরভাগ কোডিং এজেন্টের (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

Antigravity ইনস্টল করার সময়, আপনি মডার্ন ওয়েব নির্দেশিকা প্লাগ-ইন বেছে নিতে পারেন যার মধ্যে এক্সটেনশন স্কিল অন্তর্ভুক্ত থাকে অথবা আপনি কাস্টমাইজেশন > Build With Google প্লাগ-ইন > মডার্ন ওয়েব নির্দেশিকা বিকল্পের মাধ্যমে এটি যোগ করতে পারেন।

কোডিং এজেন্টের জন্য Chrome DevTools

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

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

Antigravity

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

2. স্টার্টআপে অথবা সেটিংস > কাস্টমাইজেশন-এ গিয়ে Build with Google-এর অধীনে Chrome DevTools চালু করুন। এটি শুধুমাত্র Chrome DevTools স্কিল ইনস্টল করবে, MCP সার্ভার নয়।

   

3. Chrome DevTools MCP সার্ভার যোগ করতে, সেটিংস > কাস্টমাইজেশন বিকল্পে যান, MCP সার্ভার যোগ করুন বোতামে ক্লিক করুন এবং Chrome DevTools সার্চ করুন।

   

   

   

4. MCP সার্ভার কনফিগারেশন খুলতে MCP কনফিগারেশন খুলুন বিকল্পে ক্লিক করুন। মনে রাখবেন, 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-এ নেভিগেট করুন এবং এই ব্রাউজার ইনস্ট্যান্সের জন্য রিমোট ডিবাগিং চালু করুন বিকল্প বেছে নিন।

   

7. Antigravity IDE রিস্টার্ট করুন।

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

<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 Code

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

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

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

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

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

আপনি "এটি প্রকাশ করা যাক" বা "স্টোরের জন্য এই এক্সটেনশনটি প্রস্তুত করো" এর মতো বাক্যাংশ ব্যবহার করলে স্কিলটি ট্রিগার হবে, তবে আপনার এজেন্টিক ওয়ার্কফ্লো স্ট্রিমলাইন করতে, আপনার এজেন্টের সিস্টেম নির্দেশাবলীতে নিম্নলিখিতগুলি যোগ করুন (যেমন, ~/.gemini/GEMINI.md Antigravity-এর জন্য বা ~/.claude/CLAUDE.md Claude-এর জন্য):

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.

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

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

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

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

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

এজেন্টের জন্য Chrome DevTools, AI কোডিং অ্যাসিস্ট্যান্টকে চালু থাকা 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 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.

উপসংহার

এজেন্টের জন্য Chrome DevTools-এর সাথে মডার্ন ওয়েব নির্দেশিকা স্কিল একত্রিত করলে, আপনি খুব ভাল কোয়ালিটির ফিচার দ্রুত তৈরি করতে পারবেন এবং আপনার এক্সটেনশন যাতে স্থিতিশীল থাকে ও Chrome ওয়েব স্টোরে জমা দেওয়ার জন্য প্রস্তুত থাকে তাও নিশ্চিত করতে পারবেন।

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