דף זה תורגם על ידי Cloud Translation API.

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

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

סקירה כללית

במדריך הזה בונים מנהל כרטיסיות לארגון כרטיסיות התיעוד של התוספים ל-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"
  }
}

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

יוצרים תיקייה ב-images ומורידים את הסמלים אליה.

שלב 2: יוצרים את החלון הקופץ ומעצבים אותו

ממשק ה-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>

טיפ: אפשר להשתמש במצב המתנה ברמה העליונה על ידי הוספת type="module" לתג הסקריפט.

בשלב הבא, צריך לעצב את החלון הקופץ. יוצרים קובץ 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/*",
  ]
});

💡 האם אפשר להשתמש בממשקי ה-API של Chrome ישירות בחלון הקופץ?

חלון קופץ ודפי תוספים אחרים יכולים לקרוא לכל 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.
תחביר ההתפשטות המשמש להמרת קבוצת הרכיבים לארגומנטים בקריאה 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 ותיקיית התמונות.

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

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

פתיחת כמה דפי מסמכים

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

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

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

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

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

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

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

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

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

המשך בדיקה

אנחנו מקווים שנהניתם לבנות את תוסף Chrome ורוצים להמשיך בתהליך הלמידה לפיתוח Chrome. מומלץ לבחור במסלולי הלימוד הבאים:

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