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

יצירת מנהל הכרטיסיות הראשון.

סקירה כללית

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

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

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

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

ממשק ה-API של Action קובע את הפעולה של התוסף (סמל בסרגל הכלים). כשהמשתמש לוחץ על הפעולה של התוסף, הוא יפעיל קוד כלשהו או יפתח חלון קופץ, כמו במקרה הזה. מתחילים בהצהרה על חלון הקופץ ב-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 מעניין בקוד הזה

  • המיסדר שמשמש למיון מערך הכרטיסיות לפי השפה המועדפת על המשתמש.
  • תג התבנית שמשמש להגדרת רכיב 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 והתיקייה images.

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

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

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

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

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

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

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

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

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

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

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

ממשיכים לפתח!

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

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

מידע נוסף על היעדים

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