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

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

סקירה כללית

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

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

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

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

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

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

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

שלב 2: הפעלת התוסף

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

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

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

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

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

האירוע הראשון ש-Service Worker יאזין לו הוא 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;
}

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

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

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

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

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

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

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

• ברוכים הבאים לתיעוד התוספים ל-Chrome
• פרסום בחנות האינטרנט של Chrome
• Scripting API

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

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

לשם כך:

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

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

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

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

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

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

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

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