এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ট্যাব পরিচালনা করুন

আপনার প্রথম ট্যাব ম্যানেজারটি তৈরি করুন।

সংক্ষিপ্ত বিবরণ

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

এই নির্দেশিকায় আমরা নিম্নলিখিত বিষয়গুলো কীভাবে করতে হয় তা ব্যাখ্যা করব:

অ্যাকশন এপিআই ব্যবহার করে একটি এক্সটেনশন পপআপ তৈরি করুন।
ট্যাব এপিআই ব্যবহার করে নির্দিষ্ট ট্যাবগুলোর জন্য কোয়েরি করুন।
সীমিত হোস্ট পারমিশনের মাধ্যমে ব্যবহারকারীর গোপনীয়তা রক্ষা করুন।
ট্যাবটির ফোকাস পরিবর্তন করুন।
ট্যাবগুলোকে একই উইন্ডোতে নিয়ে এসে গ্রুপ করুন।
TabGroups API ব্যবহার করে ট্যাব গ্রুপগুলির নাম পরিবর্তন করুন।

শুরু করার আগে

এই নির্দেশিকাটি ধরে নেয় যে আপনার ওয়েব ডেভেলপমেন্টের প্রাথমিক অভিজ্ঞতা আছে। এক্সটেনশন ডেভেলপমেন্টের কার্যপ্রবাহ সম্পর্কে প্রাথমিক ধারণা পেতে আমরা 'হ্যালো ওয়ার্ল্ড' দেখে নেওয়ার পরামর্শ দিই।

এক্সটেনশনটি তৈরি করুন

শুরু করার জন্য, এক্সটেনশনটির ফাইলগুলো রাখার জন্য tabs-manager নামে একটি নতুন ডিরেক্টরি তৈরি করুন। আপনি চাইলে গিটহাব থেকে সম্পূর্ণ সোর্স কোডটি ডাউনলোড করতে পারেন।

ধাপ ১: এক্সটেনশন ডেটা এবং আইকন যোগ করুন

manifest.json নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি যোগ করুন:

{
  "manifest_version": 3,
  "name": "Tab Manager for Chrome Dev Docs",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

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

একটি images ফোল্ডার তৈরি করুন এবং আইকনগুলো সেখানে ডাউনলোড করুন ।

ধাপ ২: পপআপটি তৈরি ও স্টাইল করুন

অ্যাকশন এপিআই এক্সটেনশনের অ্যাকশন (টুলবার আইকন) নিয়ন্ত্রণ করে। যখন ব্যবহারকারী এক্সটেনশন অ্যাকশনে ক্লিক করেন, তখন এটি হয় কিছু কোড চালাবে অথবা একটি পপআপ খুলবে, যেমন এই ক্ষেত্রে। manifest.json এ পপআপটি ডিক্লেয়ার করার মাধ্যমে শুরু করুন:

{
  "action": {
    "default_popup": "popup.html"
  }
}

একটি পপআপ একটি ওয়েব পেজের মতোই, তবে একটি ব্যতিক্রম আছে: এটি ইনলাইন জাভাস্ক্রিপ্ট চালাতে পারে না। একটি popup.html ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি যোগ করুন:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./popup.css" />
  </head>
  <body>
    <template id="li_template">
      <li>
        <a>
          <h3 class="title">Tab Title</h3>
          <p class="pathname">Tab Pathname</p>
        </a>
      </li>
    </template>

    <h1>Google Dev Docs</h1>
    <button>Group Tabs</button>
    <ul></ul>

    <script src="./popup.js" type="module"></script>
  </body>
</html>

পরামর্শ : স্ক্রিপ্ট ট্যাগে type="module" যোগ করে আপনি টপ লেভেল await ব্যবহার করতে পারেন।

এরপর, আপনি পপআপটি স্টাইল করবেন। একটি popup.css ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি যোগ করুন:

body {
  width: 20rem;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin: 1rem 0;
}

li {
  padding: 0.25rem;
}
li:nth-child(odd) {
  background: #80808030;
}
li:nth-child(even) {
  background: #ffffff;
}

h3,
p {
  margin: 0;
}

ধাপ ৩: ট্যাবগুলো পরিচালনা করুন

ট্যাব এপিআই একটি এক্সটেনশনকে ব্রাউজারে ট্যাব তৈরি, অনুসন্ধান, পরিবর্তন এবং পুনর্বিন্যাস করার সুযোগ দেয়।

অনুমতির জন্য অনুরোধ করুন

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

সীমিত হোস্ট পারমিশন নির্দিষ্ট সাইটগুলিতে উন্নত অনুমতি প্রদানের মাধ্যমে ব্যবহারকারীর গোপনীয়তা রক্ষা করতে সাহায্য করে। এর মাধ্যমে title এবং URL প্রপার্টির পাশাপাশি অতিরিক্ত ক্ষমতাও পাওয়া যাবে। হাইলাইট করা কোডটি manifest.json ফাইলে যোগ করুন:

{
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

💡 ট্যাব পারমিশন এবং হোস্ট পারমিশনের মধ্যে প্রধান পার্থক্যগুলো কী কী?

"tabs" পারমিশন এবং হোস্ট পারমিশন উভয়েরই অসুবিধা রয়েছে।

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

ট্যাব অনুমতি সতর্কীকরণ ডায়ালগ

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

হোস্ট অনুমতি সতর্কীকরণ ডায়ালগ

এই সতর্কবার্তাগুলো ব্যবহারকারীদের জন্য উদ্বেগজনক হতে পারে। আরও ভালো অনবোর্ডিং অভিজ্ঞতার জন্য, আমরা ঐচ্ছিক অনুমতি (optional permissions) প্রয়োগ করার পরামর্শ দিই।

ট্যাবগুলি অনুসন্ধান করুন

আপনি tabs.query() মেথড ব্যবহার করে নির্দিষ্ট URL থেকে ট্যাবগুলো পেতে পারেন। একটি popup.js ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি যোগ করুন:

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 আমি কি পপ-আপে সরাসরি ক্রোম এপিআই ব্যবহার করতে পারি?

একটি পপআপ এবং অন্যান্য এক্সটেনশন পেজ যেকোনো ক্রোম এপিআই কল করতে পারে, কারণ সেগুলো ক্রোম স্কিমা থেকে পরিবেশিত হয়। উদাহরণস্বরূপ, chrome-extension://EXTENSION_ID/popup.html ।

একটি ট্যাবে মনোযোগ দিন

প্রথমে, এক্সটেনশনটি ট্যাবের নামগুলো (অন্তর্ভুক্ত HTML পেজগুলোর শিরোনাম) বর্ণানুক্রমিকভাবে সাজাবে। তারপর, যখন তালিকার কোনো আইটেমে ক্লিক করা হবে, তখন এটি tabs.update() ব্যবহার করে সেই ট্যাবে ফোকাস করবে এবং windows.update() ব্যবহার করে উইন্ডোটিকে সামনে নিয়ে আসবে। popup.js ফাইলে নিম্নলিখিত কোডটি যোগ করুন:

...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));

const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
  const element = template.content.firstElementChild.cloneNode(true);

  const title = tab.title.split("-")[0].trim();
  const pathname = new URL(tab.url).pathname.slice("/docs".length);

  element.querySelector(".title").textContent = title;
  element.querySelector(".pathname").textContent = pathname;
  element.querySelector("a").addEventListener("click", async () => {
    // need to focus window as well as the active tab
    await chrome.tabs.update(tab.id, { active: true });
    await chrome.windows.update(tab.windowId, { focused: true });
  });

  elements.add(element);
}
document.querySelector("ul").append(...elements);
...

💡 এই কোডে ব্যবহৃত আকর্ষণীয় জাভাস্ক্রিপ্ট

ব্যবহারকারীর পছন্দের ভাষা অনুযায়ী ট্যাব অ্যারেটি সাজানোর জন্য কোলেটর ব্যবহার করা হয়।
প্রতিটি আইটেম তৈরি করার জন্য document.createElement() ব্যবহার না করে, এমন একটি HTML এলিমেন্ট সংজ্ঞায়িত করতে টেমপ্লেট ট্যাগ ব্যবহার করা হয়, যা ক্লোন করা যায়।
ইউআরএল কনস্ট্রাক্টরটি ইউআরএল তৈরি এবং পার্স করতে ব্যবহৃত হয়।
append() কলে সেটের উপাদানগুলোকে আর্গুমেন্টে রূপান্তর করতে স্প্রেড সিনট্যাক্স ব্যবহার করা হয়।

ট্যাবগুলিকে গ্রুপ করুন

TabGroups API এক্সটেনশনটিকে গ্রুপের নাম দিতে এবং একটি ব্যাকগ্রাউন্ড রঙ বেছে নিতে দেয়। হাইলাইট করা কোডটি যোগ করে ম্যানিফেস্টে "tabGroups" পারমিশনটি যুক্ত করুন:

{
  "permissions": [
    "tabGroups"
  ]
}

popup.js ফাইলে নিম্নলিখিত কোডটি যোগ করে এমন একটি বাটন তৈরি করুন যা tabs.group() ব্যবহার করে সমস্ত ট্যাবকে একত্রিত করে বর্তমান উইন্ডোতে নিয়ে আসবে।

const button = document.querySelector("button");
button.addEventListener("click", async () => {
  const tabIds = tabs.map(({ id }) => id);
  if (tabIds.length) {
    const group = await chrome.tabs.group({ tabIds });
    await chrome.tabGroups.update(group, { title: "DOCS" });
  }
});

এটি কাজ করে কিনা পরীক্ষা করুন

আপনার প্রোজেক্টের ফাইল কাঠামোটি নিম্নলিখিত ডিরেক্টরি ট্রি-র সাথে মেলে কিনা তা যাচাই করুন:

ট্যাব ম্যানেজার ফোল্ডারের বিষয়বস্তুগুলো হলো: manifest.json, popup.js, popup.css, popup.html, এবং images ফোল্ডার।

আপনার এক্সটেনশনটি স্থানীয়ভাবে লোড করুন

ডেভেলপার মোডে একটি আনপ্যাক করা এক্সটেনশন লোড করতে, Hello World- এ দেওয়া ধাপগুলো অনুসরণ করুন।

কয়েকটি ডকুমেন্টেশন পৃষ্ঠা খুলুন

নিম্নলিখিত নথিগুলি বিভিন্ন উইন্ডোতে খুলুন:

পপআপটিতে ক্লিক করুন। এটি দেখতে এইরকম হবে:

‘Group tabs’ বাটনটিতে ক্লিক করুন। এটি দেখতে এইরকম হবে:

🎯 সম্ভাব্য উন্নয়ন

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

পপআপ স্টাইল শীটটি কাস্টমাইজ করুন।
ট্যাব গ্রুপের রঙ ও শিরোনাম পরিবর্তন করুন।
অন্য একটি ডকুমেন্টেশন সাইটের ট্যাবগুলো পরিচালনা করুন।
গ্রুপ করা ট্যাবগুলোকে আনগ্রুপ করার সুবিধা যোগ করুন।

নির্মাণ চালিয়ে যান!

এই টিউটোরিয়ালটি শেষ করার জন্য অভিনন্দন 🎉। এই সিরিজের অন্যান্য টিউটোরিয়ালগুলো সম্পন্ন করে আপনার দক্ষতা আরও বাড়াতে থাকুন:

সম্প্রসারণ	আপনি যা শিখবেন
পড়ার সময়	প্রতিটি পৃষ্ঠায় স্বয়ংক্রিয়ভাবে একটি উপাদান যুক্ত করতে।
ফোকাস মোড	এক্সটেনশন অ্যাকশনে ক্লিক করার পর বর্তমান পেজে কোড রান করার জন্য।

অন্বেষণ চালিয়ে যান

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

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