این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

مدیریت برگه ها

اولین مدیر تب‌های خود را بسازید.

نمای کلی

این آموزش یک مدیر تب برای سازماندهی تب‌های افزونه کروم و مستندات فروشگاه وب کروم شما ایجاد می‌کند.

در این راهنما، نحوه انجام موارد زیر را توضیح خواهیم داد:

با استفاده از Action API یک پنجره بازشو برای افزونه ایجاد کنید.
با استفاده از Tabs API، تب‌های خاصی را جستجو کنید.
حفظ حریم خصوصی کاربر از طریق مجوزهای میزبان محدود.
تمرکز برگه را تغییر دهید.
تب‌ها را به یک پنجره منتقل کنید و آنها را گروه‌بندی کنید.
تغییر نام گروه‌های تب با استفاده از TabGroups API

قبل از شروع

این راهنما فرض می‌کند که شما تجربه اولیه توسعه وب را دارید. توصیه می‌کنیم برای آشنایی با گردش کار توسعه افزونه، Hello World را بررسی کنید.

ساخت افزونه

برای شروع، یک دایرکتوری جدید به نام 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 ایجاد کنید و سپس آیکون‌ها را در آن دانلود کنید .

مرحله ۲: ایجاد و استایل‌دهی به پنجره پاپ‌آپ

API اکشن، اکشن افزونه (آیکون نوار ابزار) را کنترل می‌کند. وقتی کاربر روی اکشن افزونه کلیک می‌کند، یا کدی اجرا می‌شود یا مانند این مورد، یک پنجره بازشو (popup) باز می‌شود. با تعریف پنجره بازشو در فایل manifest.json شروع کنید:

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

یک پنجره بازشو (popup) شبیه به یک صفحه وب است با یک استثنا: نمی‌تواند جاوا اسکریپت را به صورت درون‌خطی اجرا کند. یک فایل 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;
}

مرحله ۳: مدیریت تب‌ها

رابط برنامه‌نویسی کاربردی (API) تب‌ها به یک افزونه اجازه می‌دهد تا تب‌ها را در مرورگر ایجاد، جستجو، تغییر و تنظیم مجدد کند.

درخواست مجوز

بسیاری از متدهای Tabs API می‌توانند بدون درخواست هیچ مجوزی مورد استفاده قرار گیرند. با این حال، ما به دسترسی به title و URL تب‌ها نیاز داریم؛ این ویژگی‌های حساس نیاز به مجوز دارند. می‌توانیم مجوز "tabs" را درخواست کنیم، اما این به ما امکان دسترسی به ویژگی‌های حساس همه تب‌ها را می‌دهد. از آنجایی که ما فقط تب‌های یک سایت خاص را مدیریت می‌کنیم، مجوزهای میزبان محدودی را درخواست خواهیم کرد.

مجوزهای محدود میزبان به ما این امکان را می‌دهند که با اعطای مجوزهای سطح بالا به سایت‌های خاص ، از حریم خصوصی کاربر محافظت کنیم. این کار دسترسی به ویژگی‌های title و URL و همچنین قابلیت‌های اضافی را فراهم می‌کند. کد هایلایت شده را به فایل manifest.json اضافه کنید:

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

💡 تفاوت‌های اصلی بین مجوزهای تب‌ها و مجوزهای میزبان چیست؟

هم مجوز "tabs" و هم مجوزهای میزبان دارای معایبی هستند.

مجوز "tabs" به یک افزونه امکان خواندن داده‌های حساس در همه برگه‌ها را می‌دهد. با گذشت زمان، این اطلاعات می‌تواند برای جمع‌آوری سابقه مرور کاربر استفاده شود. به این ترتیب، اگر این مجوز را درخواست کنید، کروم پیام هشدار زیر را در زمان نصب نمایش می‌دهد:

پنجره هشدار مجوز زبانه‌ها

مجوزهای میزبان به یک افزونه اجازه می‌دهد تا ویژگی‌های حساس یک تب منطبق را بخواند و پرس‌وجو کند، به‌علاوه اسکریپت‌هایی را به این تب‌ها تزریق کند. کاربران در زمان نصب پیام هشدار زیر را مشاهده خواهند کرد:

پنجره هشدار مجوز میزبان

این هشدارها می‌توانند برای کاربران نگران‌کننده باشند. برای یک تجربه کاربری بهتر، توصیه می‌کنیم مجوزهای اختیاری را پیاده‌سازی کنید.

پرس و جو از تب‌ها

شما می‌توانید تب‌ها را از URL های خاص با استفاده از متد tabs.query() بازیابی کنید. یک فایل popup.js ایجاد کنید و کد زیر را به آن اضافه کنید:

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

💡 آیا می‌توانم مستقیماً از APIهای کروم در پنجره‌ی بازشو استفاده کنم؟

یک پنجره بازشو و سایر صفحات افزونه می‌توانند هر API کروم را فراخوانی کنند زیرا از طرحواره کروم ارائه می‌شوند. به عنوان مثال 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);
...

💡 جاوا اسکریپت جالبی که در این کد استفاده شده است

از Collator برای مرتب‌سازی آرایه تب‌ها بر اساس زبان ترجیحی کاربر استفاده می‌شود.
تگ قالبی که برای تعریف یک عنصر HTML استفاده می‌شود و می‌تواند به جای استفاده از document.createElement() برای ایجاد هر آیتم، کپی شود.
سازنده‌ی URL که برای ایجاد و تجزیه‌ی URLها استفاده می‌شود.
سینتکس Spread که برای تبدیل مجموعه عناصر به آرگومان‌ها در فراخوانی append() استفاده می‌شود.

گروه بندی تب ها

API مربوط به TabGroups به افزونه اجازه می‌دهد تا گروه را نامگذاری کرده و رنگ پس‌زمینه را انتخاب کند. با اضافه کردن کد هایلایت شده، مجوز "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 و پوشه تصاویر.

افزونه خود را به صورت محلی بارگذاری کنید

برای بارگذاری یک افزونه‌ی باز نشده در حالت توسعه‌دهنده، مراحل موجود در Hello World را دنبال کنید.

چند صفحه مستندات را باز کنید

اسناد زیر را در پنجره‌های مختلف باز کنید:

روی پنجره بازشو کلیک کنید. باید چیزی شبیه به این باشد:

روی دکمه‌ی «گروه‌بندی تب‌ها» کلیک کنید. باید چیزی شبیه به این باشد:

🎯 پیشرفت‌های بالقوه

بر اساس آنچه امروز آموخته‌اید، سعی کنید هر یک از موارد زیر را اجرا کنید:

برگه سبک پنجره بازشو را سفارشی کنید.
رنگ و عنوان گروه تب را تغییر دهید.
مدیریت تب‌های یک سایت مستندسازی دیگر.
پشتیبانی برای خارج کردن تب‌های گروه‌بندی‌شده از حالت گروه‌بندی اضافه شد.

به ساختن ادامه بده!

تبریک می‌گویم که این آموزش را تمام کردید 🎉. با تکمیل آموزش‌های دیگر این مجموعه، مهارت‌های خود را توسعه دهید:

پسوند	آنچه یاد خواهید گرفت
زمان خواندن	برای درج خودکار یک عنصر در هر صفحه.
حالت فوکوس	برای اجرای کد در صفحه فعلی پس از کلیک روی اکشن افزونه.

ادامه کاوش

امیدواریم از ساخت این افزونه کروم لذت برده باشید و برای ادامه سفر یادگیری توسعه کروم خود هیجان‌زده باشید. مسیر یادگیری زیر را توصیه می‌کنیم:

راهنمای توسعه‌دهندگان ده‌ها لینک اضافی به مستندات مربوط به ایجاد افزونه‌های پیشرفته دارد.
افزونه‌ها به APIهای قدرتمندی فراتر از آنچه در وب آزاد موجود است، دسترسی دارند. مستندات APIهای کروم، هر API را به طور کامل شرح می‌دهد.

مدیریت برگه ها با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

نمای کلی

قبل از شروع

ساخت افزونه

مرحله ۱: اضافه کردن داده‌ها و آیکون‌های افزونه

مرحله ۲: ایجاد و استایل‌دهی به پنجره پاپ‌آپ

مرحله ۳: مدیریت تب‌ها

درخواست مجوز

پرس و جو از تب‌ها

تمرکز روی یک تب

گروه بندی تب ها

تست کنید که کار می‌کند

افزونه خود را به صورت محلی بارگذاری کنید

چند صفحه مستندات را باز کنید

🎯 پیشرفت‌های بالقوه

به ساختن ادامه بده!

ادامه کاوش

مدیریت برگه ها