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

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

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

סקירה כללית

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

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

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

טיפ: כדי להשתמש בהמתנה ברמה העליונה, אפשר להוסיף את 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/*",
  ]
});

✨ אפשר להשתמש ב-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" });
  }
});

בדיקה שזה עובד

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

התוכן של התיקייה של מנהל הכרטיסיות: flash.json, popup.js, popup.css, popup.html ובתיקייה images.

טעינה מקומית של התוסף

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

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

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

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

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

🎯 שיפורים פוטנציאליים

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

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

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

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

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

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

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

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