ניהול הכרטיסיות

יצירת כלי לניהול כרטיסיות

סקירה כללית

במדריך הזה נבנה כלי לניהול כרטיסיות שיעזור לארגן את הכרטיסיות של התוסף ל-Chrome ואת הכרטיסיות של מסמכי התיעוד בחנות האינטרנט של Chrome.

החלון הקופץ של התוסף Tabs Manager
התוסף Tabs Manager

במדריך הזה נסביר איך לבצע את הפעולות הבאות:

  • יוצרים חלון קופץ של תוסף באמצעות 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"
  }
}

כדי לקבל מידע נוסף על מפתחות המניפסט האלה, אפשר לעיין במדריך בנושא זמן קריאה שבו מוסבר בפירוט על המטא-נתונים ועל הסמלים של התוסף.

יוצרים תיקייה בשם 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 APIs בחלון הקופץ?

חלון קופץ ודפים אחרים של תוספים יכולים לקרוא לכל Chrome API כי הם מוגשים מסכמת 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().

קיבוץ הכרטיסיות

ה-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 ותיקיית התמונות.

טעינת התוסף באופן מקומי

כדי לטעון תוסף מסוג unpacked במצב פיתוח, פועלים לפי השלבים במאמר Hello World.

פתיחת כמה דפי תיעוד

פותחים את המסמכים הבאים בחלונות שונים:

לוחצים על החלון הקופץ. הוא אמור להיראות כך:

החלון הקופץ של התוסף Tabs Manager
חלון קופץ של התוסף Tabs Manager

לוחצים על הלחצן 'כרטיסיות של קבוצות'. הוא אמור להיראות כך:

הכרטיסיות המקובצות בכלי לניהול כרטיסיות
כרטיסיות מקובצות באמצעות התוסף Tabs Manager

🎯 שיפורים אפשריים

בהתבסס על מה שלמדת היום, נסה להטמיע את אחת מהאפשרויות הבאות:

  • מתאימים אישית את גיליון הסגנונות של החלון הקופץ.
  • משנים את הצבע והשם של קבוצת הכרטיסיות.
  • ניהול הכרטיסיות של אתר תיעוד אחר.
  • הוספת תמיכה בביטול הקיבוץ של הכרטיסיות המקובצות.

ממשיכים לבנות!

כל הכבוד, סיימת את המדריך הזה 🎉. כדי להמשיך לפתח את הכישורים שלך, כדאי לעיין במדריכים נוספים בסדרה הזו:

Extension מה תלמדו
זמן קריאה כדי להוסיף רכיב לכל דף באופן אוטומטי.
מצב פוקוס כדי להריץ קוד בדף הנוכחי אחרי שלוחצים על פעולת התוסף.

עוד מידע

אנחנו מקווים שנהניתם ליצור את התוסף הזה ל-Chrome, ומזמינים אתכם להמשיך בתהליך הלמידה של פיתוח ל-Chrome. אנחנו ממליצים על תוכנית הלימודים הבאה:

  • במדריך למפתחים יש עשרות קישורים נוספים לחלקים במסמכי התיעוד שרלוונטיים ליצירה מתקדמת של תוספים.
  • לתוספים יש גישה לממשקי API מתקדמים שלא זמינים באינטרנט הפתוח. בתיעוד של Chrome APIs מוסבר על כל API.