إدارة علامات التبويب

إنشاء أول مدير علامات التبويب

نظرة عامة

ينشئ هذا البرنامج التعليمي أداةً لإدارة علامات التبويب لتنظيم علامات تبويب إضافة Chrome وعلامات تبويب المستندات في "سوق Chrome الإلكتروني".

النافذة المنبثقة لإضافة "مدير علامات التبويب"
إضافة "مدير علامات التبويب"

في هذا الدليل، سنشرح كيفية القيام بما يلي:

  • أنشئ نافذة منبثقة لإضافة باستخدام Action API.
  • طلب بحث عن علامات تبويب محدَّدة باستخدام Tabs API
  • الحفاظ على خصوصية المستخدم من خلال أذونات المضيف المحدودة.
  • تغيير التركيز على علامة التبويب
  • نقل علامات التبويب إلى النافذة نفسها وتجميعها
  • إعادة تسمية مجموعات علامات التبويب باستخدام واجهة برمجة تطبيقات TabGroups

قبل البدء

يفترض هذا الدليل أن لديك خبرة أساسية في تطوير الويب. ننصحك بالاطّلاع على Hello World للاطّلاع على مقدمة حول سير عمل تطوير الإضافات.

إنشاء الإضافة

للبدء، أنشِئ دليلاً جديدًا يُسمى tabs-manager للاحتفاظ بملفات الإضافة. يمكنك تنزيل رمز المصدر الكامل من GitHub إذا كنت تفضّل ذلك.

الخطوة 1: إضافة بيانات الإضافات ورموزها

أنشئ ملفًا باسم 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 ثم نزِّل الرموز فيه.

الخطوة 2: إنشاء النافذة المنبثقة وتحديد نمطها

تتحكم واجهة برمجة تطبيقات الإجراء في إجراء الإضافة (رمز شريط الأدوات). عندما ينقر المستخدم على إجراء الإضافة، فسيتم تشغيل بعض التعليمات البرمجية أو فتح نافذة منبثقة، كما هو الحال في هذه الحالة. ابدأ بإعلان النافذة المنبثقة في manifest.json:

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

تشبه النافذة المنبثقة صفحة ويب باستثناء واحد، وهي أنها لا يمكنها تشغيل JavaScript مضمَّنة. أنشئ ملف 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>

بعد ذلك، ستقوم بتحديد نمط النافذة المنبثقة. أنشئ ملف 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;
}

الخطوة 3: إدارة علامات التبويب

تتيح Tabs API للإضافة إنشاء علامات التبويب والاستعلام عنها وتعديلها وإعادة ترتيبها في المتصفح.

طلب الإذن

يمكن استخدام العديد من الطرق في Tabs API بدون طلب أيّ إذن. ومع ذلك، نحتاج إلى الوصول إلى title وURL علامتَي التبويب، لأنّ هذه السمات الحسّاسة تتطلّب إذنًا. كان بإمكاننا طلب إذن ""tabs""، ولكنّ هذا سيمنح الإذن بالوصول إلى السمات الحسّاسة في جميع علامات التبويب. وبما أنّنا ندير علامات تبويب لموقع إلكتروني معيّن فقط، سنطلب أذونات مضيف محدود.

تتيح لنا أذونات المضيف تضييق نطاق حماية خصوصية المستخدم من خلال منح أذونات عالية المستوى لمواقع إلكترونية معيّنة. سيمنح ذلك إمكانية الوصول إلى السمتَين title وURL، بالإضافة إلى إمكانيات إضافية. أضِف الرمز المميّز إلى ملف manifest.json:

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

💡 ما هي الاختلافات الرئيسية بين إذن علامات التبويب وأذونات المضيف؟

لكل من إذن ""tabs"" وأذونات المضيف عيوب.

يمنح الإذن "tabs" الإضافة إمكانية قراءة البيانات الحسّاسة في جميع علامات التبويب. وبمرور الوقت، يمكن استخدام هذه المعلومات لجمع سجلّ التصفُّح الخاص بالمستخدم. وبالتالي، إذا طلبت الحصول على هذا الإذن، سيعرض Chrome رسالة التحذير التالية عند التثبيت:

مربع حوار تحذيري بشأن إذن علامات التبويب

تسمح أذونات المضيف للإضافة بقراءة السمات الحساسة لعلامة التبويب المطابقة وطلب البحث عنها، بالإضافة إلى إدخال نصوص برمجية في علامات التبويب هذه. ستظهر رسالة التحذير التالية للمستخدمين أثناء التثبيت:

مربّع حوار تحذيري بشأن إذن المضيف

قد تكون هذه التحذيرات مفيدة للمستخدمين. للاستفادة من تجربة إعداد أفضل، ننصحك بتنفيذ أذونات اختيارية.

الاستعلام عن علامات التبويب

يمكنك استرداد علامات التبويب من عناوين URL محدَّدة باستخدام طريقة tabs.query(). أنشئ ملف popup.js وأضف الرمز التالي:

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

💡 هل يمكنني استخدام واجهات Chrome API مباشرةً في النافذة المنبثقة؟

يمكن أن تؤدي النافذة المنبثقة وصفحات الإضافات الأخرى إلى استدعاء أي واجهة برمجة تطبيقات Chrome لأنها يتم عرضها من مخطط Chrome. مثلاً: 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);
...

💡 تم استخدام محتوى JavaScript مثير للاهتمام في هذا الرمز البرمجي

  • أداة الربط المستخدَمة لترتيب مصفوفة علامات التبويب حسب اللغة المفضّلة لدى المستخدم.
  • علامة النموذج المستخدَمة لتحديد عنصر HTML يمكن نسخه بدلاً من استخدام document.createElement() لإنشاء كل عنصر.
  • دالة إنشاء عنوان URL المستخدمة لإنشاء عناوين URL وتحليلها.
  • بنية الانتشار المستخدَمة لتحويل مجموعة العناصر إلى وسيطات في استدعاء append().

تجميع علامات التبويب

تسمح واجهة برمجة تطبيقات 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.

فتح بعض صفحات المستندات

افتح المستندات التالية في نوافذ مختلفة:

انقر على النافذة المنبثقة. يُفترض أن يظهر على النحو التالي:

النافذة المنبثقة لإضافة &quot;مدير علامات التبويب&quot;
النافذة المنبثقة لإضافة "مدير علامات التبويب"

انقر على الزر "تجميع علامات التبويب". يُفترض أن يظهر على النحو التالي:

علامات التبويب المجمّعة في &quot;مدير علامات التبويب&quot;
علامات التبويب المجمّعة باستخدام إضافة "مدير علامات التبويب"

🎯 التحسينات المحتملة

بناءً على ما تعلمته اليوم، حاول تنفيذ أي مما يلي:

  • تخصيص ورقة أنماط النافذة المنبثقة.
  • تغيير لون مجموعة علامات التبويب وعنوانها
  • يمكنك إدارة علامات التبويب في موقع إلكتروني آخر مخصّص للمستندات.
  • إتاحة إلغاء تجميع علامات التبويب المجمَّعة

استمر في البناء!

تهانينا على الانتهاء من هذا البرنامج التعليمي 🎉. استمر في تطوير مهاراتك من خلال إكمال برامج تعليمية أخرى في هذه السلسلة:

الإضافة ما سوف تتعلمه
وقت القراءة لإدراج عنصر في كل صفحة تلقائيًا.
وضع التركيز لتشغيل الرمز في الصفحة الحالية بعد النقر على إجراء الإضافة

مواصلة الاستكشاف

نأمل أن تكون قد استمتعت بإنشاء إضافة Chrome هذه ونتطلّع إلى مواصلة رحلة التعلّم المتعلّقة بتطوير Chrome. نوصي بالمسار التعليمي التالي: