কিভাবে 2026 সালে ম্যানিফেস্ট V3 সহ একটি ক্রোম এক্সটেনশন তৈরি করবেন: সম্পূর্ণ নির্দেশিকা

ম্যানিফেস্ট V3 এখন নতুন ক্রোম এক্সটেনশনের একমাত্র বিকল্প, এবং এটি আর্কিটেকচারকে অর্থপূর্ণভাবে পরিবর্তন করে: পটভূমি পৃষ্ঠাগুলি ক্ষণস্থায়ী পরিষেবা কর্মী হয়ে উঠেছে, দূরবর্তী কোড নির্বাহ নিষিদ্ধ করা হয়েছে, এবং নেটওয়ার্ক ইন্টারসেপশন একটি ঘোষণামূলক API এ সরানো হয়েছে। আপনি যদি V2 এ এক্সটেনশন ডেভেলপমেন্ট শিখে থাকেন, তবে বেশ কিছু অভ্যাস আর কাজ করে না। এই গাইড V3 নিয়মের অধীনে স্ক্র্যাচ থেকে একটি সম্পূর্ণ, কার্যকরী এক্সটেনশন তৈরি করে।

আমরা কি নির্মাণ করছি

একটি পৃষ্ঠা-টীকা এক্সটেনশন: এটি একটি টুলবার পপআপ যোগ করে, একটি বিষয়বস্তু স্ক্রিপ্ট ইনজেক্ট করে যা যেকোনো পৃষ্ঠায় নির্বাচিত পাঠ্য হাইলাইট করে, প্রতি ইউআরএল হাইলাইট সংরক্ষণ করে, এবংchrome.storageএর মাধ্যমে সিঙ্ক করে। . এটি V3 এর প্রতিটি অংশ অনুশীলন করে যা আপনি আসলে ব্যবহার করবেন — পপআপ UI, বিষয়বস্তু স্ক্রিপ্ট, পরিষেবা কর্মী, মেসেজিং, স্টোরেজ এবং অনুমতি।

ধাপ 1: প্রকল্পের কাঠামো এবং ম্যানিফেস্ট

এই ফাইলগুলি দিয়ে একটি ডিরেক্টরি তৈরি করুন। ম্যানিফেস্টটি হল এন্ট্রি পয়েন্ট এবং Chrome এটি প্রথমে পড়ে৷

my-extension/
  manifest.json
  background.js
  content.js
  popup.html
  popup.js
  styles.css
  icons/icon16.png icon48.png icon128.png

ম্যানিফেস্ট সংস্করণ 3, আপনার এন্ট্রি পয়েন্ট এবং অনুমতি ঘোষণা করে। অনুমতি ন্যূনতম রাখুন — প্রতিটি অতিরিক্ত অনুমতি পর্যালোচনাকে ধীর করে দেয় এবং ইনস্টলের সময় ব্যবহারকারীদের ভয় দেখায়।

{
  "manifest_version": 3,
  "name": "Page Highlighter",
  "version": "1.0.0",
  "description": "Highlight and save text on any page.",
  "permissions": ["storage", "activeTab", "scripting"],
  "host_permissions": ["http://*/*", "https://*/*"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content.js"],
      "css": ["styles.css"],
      "run_at": "document_idle"
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

পছন্দactiveTab আপনি যখন পারেন বিস্তৃত হোস্ট অনুমতির উপর। ব্যবহারকারী আপনার এক্সটেনশন আইকনে ক্লিক করার পরেই এটি বর্তমান ট্যাবে অ্যাক্সেস মঞ্জুর করে, যা পর্যালোচনায় ন্যায়সঙ্গত করা অনেক সহজ।

ধাপ 2: পরিষেবা কর্মী একটি পটভূমি পাতা নয়

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

// background.js

// WRONG under V3 — this resets every time the worker restarts.
// let highlightCount = 0;

chrome.runtime.onInstalled.addListener(async () => {
  const { highlights } = await chrome.storage.local.get('highlights');
  if (!highlights) {
    await chrome.storage.local.set({ highlights: {} });
  }
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'SAVE_HIGHLIGHT') {
    saveHighlight(message.payload).then(() => sendResponse({ ok: true }));
    // Returning true keeps the message channel open for the async reply.
    return true;
  }
});

async function saveHighlight({ url, text }) {
  const { highlights = {} } = await chrome.storage.local.get('highlights');
  const forPage = highlights[url] || [];
  forPage.push({ text, createdAt: Date.now() });
  highlights[url] = forPage;
  await chrome.storage.local.set({ highlights });
}

বার্তায় শ্রোতা মিস করা সহজ এবং একটি ক্লাসিক বাগ ঘটায়: আপনার অ্যাসিঙ্ক হ্যান্ডলার সম্পূর্ণ হয় কিন্তু প্রেরক কখনই প্রতিক্রিয়া পায় না, কারণ শ্রোতা অনির্ধারিত ফিরে আসার পর Chrome চ্যানেল বন্ধ করে দেয়।return trueধাপ 3: বিষয়বস্তুর স্ক্রিপ্ট

কন্টেন্ট স্ক্রিপ্ট পৃষ্ঠার DOM-এ চলে কিন্তু একটি বিচ্ছিন্ন জাভাস্ক্রিপ্ট জগতে। তারা DOM পড়তে এবং সংশোধন করতে পারে, কিন্তু পৃষ্ঠার নিজস্ব জাভাস্ক্রিপ্ট ভেরিয়েবল দেখতে পারে না। সেই বিচ্ছিন্নতা একটি নিরাপত্তা বৈশিষ্ট্য, চারপাশে কাজ করার সীমাবদ্ধতা নয়।

নোট করুন

// content.js
document.addEventListener('mouseup', async () => {
  const selection = window.getSelection();
  const text = selection.toString().trim();
  if (text.length < 3) return;

  const range = selection.getRangeAt(0);
  const mark = document.createElement('mark');
  mark.className = 'ext-highlight';

  try {
    range.surroundContents(mark);
  } catch {
    // surroundContents throws when the selection crosses element boundaries.
    return;
  }

  await chrome.runtime.sendMessage({
    type: 'SAVE_HIGHLIGHT',
    payload: { url: location.href, text }
  });

  selection.removeAllRanges();
});

চারপাশেtry/catch. যখনই নির্বাচন একাধিক উপাদান বিস্তৃত করে তখন এটি নিক্ষেপ করে, যা বাস্তব পৃষ্ঠাগুলিতে ক্রমাগত ঘটে। এটি পরিচালনা করা হল একটি এক্সটেনশন যা আপনার পরীক্ষার পৃষ্ঠায় কাজ করে এবং যেটি সর্বত্র কাজ করে তার মধ্যে পার্থক্য।surroundContentsধাপ 4: পপআপ

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

ইনলাইন স্ক্রিপ্ট এক্সটেনশন বিষয়বস্তু নিরাপত্তা নীতি দ্বারা ব্লক করা হয়, তাই

<!-- popup.html -->
<!DOCTYPE html>
<html>
  <head><meta charset="utf-8"></head>
  <body style="width:320px;font:14px system-ui;padding:12px">
    <h1 style="font-size:15px;margin:0 0 8px">Highlights on this page</h1>
    <ul id="list"></ul>
    <script src="popup.js"></script>
  </body>
</html>

রেফারেন্স বাধ্যতামূলক — আপনি সরাসরি HTML এ জাভাস্ক্রিপ্ট রাখতে পারবেন না।<script src>ব্যবহার করুন

// popup.js
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
const { highlights = {} } = await chrome.storage.local.get('highlights');
const items = highlights[tab.url] || [];

const list = document.getElementById('list');
if (items.length === 0) {
  list.innerHTML = '<li>No highlights yet.</li>';
} else {
  for (const item of items) {
    const li = document.createElement('li');
    li.textContent = item.text;   // textContent, never innerHTML
    list.appendChild(li);
  }
}

বরংtextContent একটি ওয়েব পৃষ্ঠা থেকে উদ্ভূত যে কোনো মান জন্য. হাইলাইট করা টেক্সট হল আক্রমণকারী-নিয়ন্ত্রিত ডেটা, এবং এটি থেকে HTML তৈরি করা আপনার এক্সটেনশনের সুবিধাপ্রাপ্ত প্রেক্ষাপটে একটি সহজবোধ্য XSS রুট।innerHTMLধাপ 5: স্টোরেজ চয়েস

Chrome আপনাকে তিনটি স্টোরেজ এলাকা দেয় এবং ভুল বাছাই নীরব ব্যর্থতার কারণ হয়।

এলাকা

API চলে গেছে। আপনি যদি অনুরোধগুলি ব্লক বা পুনঃনির্দেশ করতে চান, তাহলেstorage.syncব্যবহার করুন৷ , যেখানে আপনি স্ট্যাটিক নিয়ম নিবন্ধন করেন যা Chrome নিজেই মূল্যায়ন করে। আপনার এক্সটেনশন কখনই অনুরোধটি দেখে না।

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

ধাপ 7: লোড এবং ডিবাগwebRequestখুলুনdeclarativeNetRequest, বিকাশকারী মোড সক্ষম করুন এবং “লোড আনপ্যাকড” নির্বাচন করুন। তিনটি পৃথক কনসোল বিদ্যমান এবং কোনটি খুলতে হবে তা জেনে ঘন্টা বাঁচায়:

{
  "permissions": ["declarativeNetRequest"],
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

সেবা কর্মী:

আপনার এক্সটেনশন কার্ডে “পরিষেবা কর্মী” লিঙ্কে ক্লিক করুন

পপআপ:chrome://extensions পপআপে ডান-ক্লিক করুন এবং পরিদর্শন করুন

• বিষয়বস্তুর স্ক্রিপ্ট: সাধারণ পৃষ্ঠা DevTools কনসোল, প্রসঙ্গ নির্বাচক সহ আপনার এক্সটেনশনে সেট করা আছে
• যদি পরিষেবা কর্মী মৃত বলে মনে হয়, তবে এটি প্রত্যাশিত – এটি প্রায় 30 সেকেন্ড নিষ্ক্রিয়তার পরে শেষ হয়ে যায়। একটি ইভেন্ট ট্রিগার করুন এবং এটি পুনরায় চালু হয়।ধাপ 8: প্রকাশনা
• ধাপ 8: প্রকাশনাধাপ 8: প্রকাশনা

ধাপ 8: প্রকাশনা

ধাপ 8: প্রকাশনা

এক্সটেনশন ডিরেক্টরি বিষয়বস্তু জিপ করুন (ঘেরা ফোল্ডার নয়) এবং Chrome ওয়েব স্টোর ডেভেলপার ড্যাশবোর্ডের মাধ্যমে আপলোড করুন, যার জন্য এককালীন নিবন্ধন ফি প্রয়োজন৷ পর্যালোচনার সময় আপনার অনুমতির উপর ব্যাপকভাবে নির্ভর করে: শুধুমাত্রactiveTabব্যবহার করে একটি এক্সটেনশন৷ এবংstorage সাধারণত দ্রুত পর্যালোচনা সাফ করে, যখন বিস্তৃত হোস্ট অনুমতি প্লাসscripting ম্যানুয়াল পর্যালোচনা আকর্ষণ করে এবং যথেষ্ট বেশি সময় নিতে পারে। তালিকায় প্রতিটি অনুমতির জন্য একটি স্পষ্ট যুক্তি লিখুন — পর্যালোচকরা অস্পষ্ট ব্যাখ্যা প্রত্যাখ্যান করেন।

সাধারণ ভুল

পরিষেবা কর্মী বিশ্বব্যাপী রাষ্ট্র সংরক্ষণ. এটি সমাপ্তিতে অদৃশ্য হয়ে যায়। ব্যবহার করুনchrome.storage.

ভুলে যাওয়াreturn true async বার্তা শ্রোতাদের মধ্যে। প্রতিক্রিয়া কখনই আসে না এবং ব্যর্থতা নীরব থাকে।

অনুরোধ করা হচ্ছে<all_urls> যখনactiveTab করতে হবে এটি পর্যালোচনাকে ধীর করে এবং ইনস্টল কমিয়ে দেয়।

দূরবর্তী কোড লোড হচ্ছে। V3 এটাকে সরাসরি নিষেধ করে। সমস্ত এক্সিকিউটেবল কোড অবশ্যই প্যাকেজে পাঠাতে হবে, যার মানে কোন CDN স্ক্রিপ্ট এবং কোনeval.

উপসংহার

ম্যানিফেস্ট V3 বিকাশ কয়েকটি শৃঙ্খলায় নেমে আসে:পরিষেবা কর্মীকে রাষ্ট্রহীন হিসাবে বিবেচনা করুন এবং সমস্ত রাষ্ট্রকে রাখুনchrome.storage, কাজ করে এমন সংকীর্ণ অনুমতিগুলির জন্য অনুরোধ করুন, ব্যবহার করুন একটি পৃষ্ঠা থেকে উৎসারিত কিছুর জন্য, মনে রাখবেনtextContent async বার্তা হ্যান্ডলারদের জন্য, এবং প্যাকেজের ভিতরে কোডের প্রতিটি লাইন পাঠানreturn true. শুরু থেকেই সেই সীমাবদ্ধতাগুলি নিয়ে তৈরি করুন এবং প্ল্যাটফর্মটি আপনার পথের বাইরে থেকে যায় — এগুলিকে একটি V2-আকৃতির নকশায় ফিরিয়ে আনা যেখানে ব্যথা থাকে।. শুরু থেকেই সেই সীমাবদ্ধতাগুলি নিয়ে তৈরি করুন এবং প্ল্যাটফর্মটি আপনার পথের বাইরে থেকে যায় — এগুলিকে একটি V2-আকৃতির নকশায় ফিরিয়ে আনা যেখানে ব্যথা থাকে।