הוספת סקריפטים לכרטיסייה הפעילה

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

סקירה כללית

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

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

  • משתמשים ב-service worker של התוסף בתור מנהל האירוע.
  • לשמור על פרטיות המשתמשים באמצעות ההרשאה "activeTab".
  • להריץ קוד כשהמשתמש לוחץ על סמל סרגל הכלים של התוסף.
  • הוספה והסרה של גיליון סגנונות באמצעות Scripting API.
  • משתמשים במקש קיצור כדי להריץ קוד.

לפני שמתחילים

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

פיתוח התוסף

בשלב הראשון, יוצרים ספרייה חדשה בשם focus-mode שתכלול את הקבצים של התוסף. אם אתם מעדיפים, תוכלו להוריד את קוד המקור המלא מ-GitHub.

שלב 1: מוסיפים את הנתונים והסמלים של התוסף

יוצרים קובץ בשם manifest.json ומוסיפים את הקוד הבא.

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "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 והסמלים של התוסף.

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

שלב 2: מאתחלים את התוסף

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

מתחילים ברישום של קובץ השירות בקובץ manifest.json:

{
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

יוצרים קובץ בשם background.js ומוסיפים את הקוד הבא:

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

האירוע הראשון שסוכן השירות שלנו יקשיב לו הוא runtime.onInstalled(). השיטה הזו מאפשרת לתוסף להגדיר מצב ראשוני או להשלים משימות מסוימות במהלך ההתקנה. תוספים יכולים להשתמש ב-Storage API וב-IndexedDB כדי לאחסן את מצב האפליקציה. עם זאת, במקרה הזה, מאחר שאנחנו מטפלים רק בשני מצבים, נשתמש בטקסט של תג הפעולה עצמו כדי לעקוב אחרי המצב של התוסף – 'מופעל' או 'מושבת'.

שלב 3: מפעילים את הפעולה של התוסף

פעולת התוסף קובעת איזה סמל יופיע בסרגל הכלים של התוסף. לכן, בכל פעם שהמשתמש לוחץ על סמל התוסף, הוא יפעיל קוד כלשהו (כמו בדוגמה הזו) או יציג חלון קופץ. מוסיפים את הקוד הבא כדי להצהיר על פעולת התוסף בקובץ manifest.json:

{
  ...
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  ...
}

שימוש בהרשאה activeTab כדי להגן על פרטיות המשתמשים

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

ההרשאה הזו מופעלת כשהמשתמש מפעיל את התוסף. במקרה כזה, המשתמש מפעיל את התוסף בלחיצה על פעולת התוסף.

💡 אילו אינטראקציות אחרות של משתמשים מאפשרות את ההרשאה activeTab בתוסף שלי?

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

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

כדי להשתמש בהרשאה "activeTab", מוסיפים אותה למערך ההרשאות של המניפסט:

{
  ...
  "permissions": ["activeTab"],
  ...
}

שלב 4: מעקב אחרי המצב של הכרטיסייה הנוכחית

אחרי שהמשתמש ילחץ על הפעולה של התוסף, התוסף יבדוק אם כתובת ה-URL תואמת לדף מסמכי עזרה. לאחר מכן, המערכת תבדוק את המצב של הכרטיסייה הנוכחית ותגדיר את המצב הבא. מוסיפים את הקוד הבא לקובץ background.js:

const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON';

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
  }
});

שלב 5: הוספה או הסרה של גיליון הסגנונות

עכשיו הגיע הזמן לשנות את הפריסה של הדף. יוצרים קובץ בשם focus-mode.css ומוסיפים את הקוד הבא:

* {
  display: none !important;
}

html,
body,
*:has(article),
article,
article * {
  display: revert !important;
}

[role='navigation'] {
  display: none !important;
}

article {
  margin: auto;
  max-width: 700px;
}

להוסיף או להסיר את גיליון הסגנונות באמצעות Scripting API. מתחילים בהצהרה על ההרשאה "scripting" במניפסט:

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}

לבסוף, מוסיפים את הקוד הבא לקטע background.js כדי לשנות את הפריסה של הדף:

  ...
    if (nextState === "ON") {
      // Insert the CSS file when the user turns the extension on
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // Remove the CSS file when the user turns the extension off
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

💡 האם אפשר להשתמש ב-Scripting API כדי להחדיר קוד במקום גיליון סגנונות?

כן. אפשר להשתמש ב-scripting.executeScript() כדי להחדיר JavaScript.

אופציונלי: הקצאת מקש קיצור

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

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

המפתח "_execute_action" מפעיל את אותו הקוד כמו האירוע action.onClicked(), כך שאין צורך בקוד נוסף.

בודקים שהכול עובד

מוודאים שמבנה הקבצים של הפרויקט נראה כך:

התוכן של התיקייה של מצב התמקדות: manifest.json,‏ background.js,‏ focus-mode.css והתיקייה images.

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

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

בדיקת התוסף בדף תיעוד

קודם כול, פותחים אחד מהדפים הבאים:

לאחר מכן, לוחצים על הפעולה של התוסף. אם הגדרתם מקשי קיצור, תוכלו לבדוק אותם על ידי הקשה על Ctrl + B או על Cmd + B.

הוא אמור להיראות כך:

התוסף של מצב הריכוז כבוי
התוסף של מצב הריכוז מושבת

לזה:

התוסף של מצב ריכוז מופעל
התוסף 'מצב ריכוז' מופעל

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

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

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

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

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

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

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

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