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

أنشئ أول مدير لعلامات التبويب.

نظرة عامة

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

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

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

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

قبل البدء

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

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

للبدء، أنشِئ دليلاً جديدًا باسم 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 مباشرةً في النافذة المنبثقة؟

يمكن للنافذة المنبثقة وصفحات الإضافات الأخرى استدعاء أي واجهة برمجة تطبيقات 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 مثير للاهتمام ويُستخدَم في هذا الرمز

  • أداة Collator: تُستخدم لترتيب مصفوفة علامات التبويب حسب لغة المستخدم المفضّلة.
  • تُستخدم علامة النموذج تحديد عنصر 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" });
  }
});

اختبار إمكانية العمل

تأكَّد من تطابق بنية ملف مشروعك مع شجرة الدليل التالية:

محتويات مجلد مدير علامات التبويب: تار.json، وpopup.js، وpopup.css، وpopup.html، ومجلد الصور.

تحميل الإضافة محليًا

لتحميل إضافة تم فك ضغطها في وضع مطوّر البرامج، يُرجى اتّباع الخطوات الواردة في Hello World.

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

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

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

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

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

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

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

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

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

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

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

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

الاطّلاع على معلومات إضافية

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

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