إنشاء أول أداة لإدارة علامات التبويب
نظرة عامة
يرشدك هذا البرنامج التعليمي إلى إنشاء أداة لإدارة علامات التبويب لتنظيم علامات تبويب مستندات إضافة Chrome و"سوق Chrome الإلكتروني".
في هذا الدليل، سنشرح كيفية تنفيذ ما يلي:
- إنشاء نافذة منبثقة للإضافة باستخدام Action API
- طلب علامات تبويب معيّنة باستخدام Tabs API
- الحفاظ على خصوصية المستخدم من خلال أذونات المضيف المحدودة
- تغيير علامة التبويب التي يتم التركيز عليها
- نقل علامات التبويب إلى النافذة نفسها وتجميعها
- إعادة تسمية مجموعات علامات التبويب باستخدام TabGroups API
قبل البدء
يفترض هذا الدليل أنّ لديك خبرة أساسية في تطوير الويب. ننصحك بالاطّلاع على البرنامج التعليمي 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"
}
}
لمزيد من المعلومات عن مفاتيح ملف البيان هذه، يمكنك الاطّلاع على البرنامج التعليمي "وقت القراءة" الذي يشرح بيانات الإضافة الوصفية metadata ورموزها icons بالتفصيل.
أنشئ مجلدًا باسم images ثم نزِّل الرموز فيه.
الخطوة 2: إنشاء النافذة المنبثقة وتنسيقها
تتحكّم Action API في إجراء الإضافة (رمز شريط الأدوات). عندما ينقر المستخدم على إجراء الإضافة، سيتم إما تشغيل بعض الرموز أو فتح نافذة منبثقة، كما هو الحال هنا. ابدأ بتحديد النافذة المنبثقة في 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 API لأنّها يتم عرضها من الـ
chrome schema. على سبيل المثال، 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 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" });
}
});
اختبار ما إذا كانت الإضافة تعمل
تأكَّد من أنّ بنية ملف مشروعك تطابق شجرة الدليل التالية:
تحميل الإضافة محليًا
لتحميل إضافة تم فك ضغطها في وضع مطوّر البرامج، اتّبِع الخطوات الواردة في Hello World.
فتح بعض صفحات المستندات
افتح المستندات التالية في نوافذ مختلفة:
- تصميم واجهة المستخدم
- الاكتشاف في "سوق Chrome الإلكتروني"
- نظرة عامة على تطوير الإضافات
- تنسيق ملف البيان
- النشر في "سوق Chrome الإلكتروني"
انقر على النافذة المنبثقة. يجب أن تبدو على النحو التالي:
انقر على الزر "تجميع علامات التبويب". يجب أن تبدو على النحو التالي:
🎯 التحسينات المحتملة
استنادًا إلى ما تعلّمته اليوم، حاوِل تنفيذ أي مما يلي:
- تخصيص ورقة أنماط النافذة المنبثقة
- تغيير لون مجموعة علامات التبويب وعنوانها
- إدارة علامات تبويب موقع إلكتروني آخر للمستندات
- إضافة إمكانية فك تجميع علامات التبويب المجمّعة
مواصلة الإنشاء
تهانينا على إكمال هذا البرنامج التعليمي 🎉. واصِل تطوير مهاراتك من خلال إكمال البرامج التعليمية الأخرى في هذه السلسلة:
| الإضافة | ما ستتعلمه |
|---|---|
| وقت القراءة | إدراج عنصر تلقائيًا في كل صفحة |
| وضع التركيز | تشغيل الرمز على الصفحة الحالية بعد النقر على إجراء الإضافة |
مزيد من المعلومات
نأمل أن تكون قد استمتعت بإنشاء إضافة Chrome هذه وأن تكون متحمّسًا لمواصلة رحلة تعلّم تطوير Chrome. ننصحك باتّباع مسار التعلّم التالي:
- يحتوي دليل المطوّر على عشرات الروابط الإضافية إلى أجزاء من المستندات ذات الصلة بإنشاء الإضافات المتقدّمة.
- يمكن للإضافات الوصول إلى واجهات برمجة تطبيقات قوية تتجاوز ما هو متاح على الويب المفتوح. تشرح مستندات Chrome API كل واجهة برمجة تطبيقات.