סקירה כללית על ארכיטקטורה

תוספים הם חבילות מכווצות של HTML, CSS, JavaScript, תמונות וקבצים אחרים שבהם נעשה שימוש בפלטפורמת האינטרנט, ומתאימים אישית את חוויית הגלישה ב-Google Chrome. התוספים נוצרים באמצעות טכנולוגיית אינטרנט, והם יכולים להשתמש באותם ממשקי API שהדפדפן מספק לאינטרנט הפתוח.

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

אפשר להשתמש בתוספים כדי להפוך את דפדפן Chrome לדפדפן עם ההתאמה האישית ביותר.

קובצי תוספים

התוספים משתנים מבחינת סוגי הקבצים וכמות הספריות, אבל לכולם צריך להיות [מניפסט][docs-מניפסט]. חלק מהתוספים הבסיסיים אך השימושיים עשויים לכלול רק את המניפסט ואת סמל סרגל הכלים.

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

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

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

התוסף הזה של Google Mail Checker משתמש בפעולת דפדפן:

צילום מסך של התוסף Google Mail Checker

התוסף של Mappy משתמש בפעולת דף ובסקריפט תוכן:

צילום מסך של התוסף Mappy

הפניה לקבצים

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

<img src="images/my_image.png">

בנוסף, ניתן לגשת לכל קובץ גם באמצעות כתובת URL מוחלטת.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

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

בזמן עבודה על תוסף לא ארוז, מזהה התוסף יכול להשתנות. באופן ספציפי, המזהה של תוסף לא ארוז ישתנה אם התוסף ייטען מהספרייה אחרת, והמזהה ישתנה שוב כשהתוסף יארוז בחבילה. אם הקוד של התוסף מסתמך על כתובת URL מוחלטת, אפשר להשתמש בשיטה chrome.runtime.getURL() כדי להימנע מקידוד בתוך הקוד של המזהה במהלך הפיתוח.

אדריכלות

הארכיטקטורה של תוסף תלויה בפונקציונליות שלו, אבל תוספים חזקים רבים יכללו רכיבים מרובים:

סקריפט רקע

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

אלמנטים בממשק המשתמש

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

דפי ממשק משתמש של תוספים, כמו חלון קופץ, יכולים להכיל דפי HTML רגילים עם לוגיקת JavaScript. התוספים יכולים גם לקרוא ל-tabs.create או ל-window.open() כדי להציג קובצי HTML נוספים שקיימים בתוסף.

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

חלון דפדפן שמכיל פעולת דף עם חלון קופץ

סקריפטים של תוכן

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

חלון דפדפן עם פעולת דף וסקריפט תוכן

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

מראה נתיב תקשורת בין סקריפט התוכן לתוסף ההורה

דף האפשרויות

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

שימוש בממשקי API של Chrome

בנוסף לגישה לאותם ממשקי API כמו דפי אינטרנט, תוספים יכולים להשתמש גם בממשקי API ספציפיים לתוספים, שיוצרים שילוב הדוק עם הדפדפן. גם לתוספים וגם לדפי אינטרנט יש גישה ל-method window.open() הרגיל כדי לפתוח כתובת URL, אבל תוספים יכולים לציין באיזה חלון של כתובת ה-URL צריך להציג את אותה כתובת URL באמצעות המתודה tabs.create של Chrome API.

שיטות אסינכרוניות לעומת שיטות סינכרוניות

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

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

אם השיטה tabs.query הייתה סינכרונית, היא עשויה להיראות בערך כמו בדוגמה הבאה.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

הגישה הזו תיכשל כי query() הוא אסינכרוני. היא מוחזרת בלי להמתין לסיום העבודה ולא מחזירה ערך. שיטה מסוימת היא אסינכרונית כשפרמטר הקריאה החוזרת (callback) זמין בחתימה שלה.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

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

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

בקוד שלמעלה, השורות מתבצעות בסדר הבא: 1, 4, 2. פונקציית הקריאה החוזרת (callback) שצוינה ב-query() מופעלת ולאחר מכן מבצעת את שורה 2, אבל רק לאחר שזמין מידע לגבי הכרטיסייה שנבחרה. העדכון מתבצע זמן מה אחרי החזרה של query(). update() הוא אסינכרוני, אבל הקוד לא משתמש בפרמטר של קריאה חוזרת (callback), כי התוסף לא משפיע על תוצאות העדכון.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

השיטה הזו מחזירה את כתובת ה-URL באופן סינכרוני כ-string ולא מבצעת פעולה אסינכרונית אחרת.

פרטים נוספים

למידע נוסף, מומלץ לעיין במסמכי העזר של Chrome API ולצפות בסרטון הבא.

תקשורת בין הדפים

בדרך כלל, רכיבים שונים בתוסף צריכים לתקשר זה עם זה. דפי HTML שונים יכולים למצוא אחד את השני באמצעות השיטות chrome.extension, כמו getViews() ו-getBackgroundPage(). ברגע שיש לדף הפניה לדפי תוספים אחרים, הראשון יכול להפעיל פונקציות בדפים האחרים ולשנות את ה-DOMs שלהם. בנוסף, לכל רכיבי התוסף יש גישה לערכים שמאוחסנים באמצעות storage API ולתקשר באמצעות העברת הודעות.

שמירת נתונים ובמצב פרטי

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

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

כדי לזהות אם חלון מסוים נמצא במצב פרטי, צריך לבדוק את המאפיין incognito של האובייקט הרלוונטי ב-tabs.Tab או windows.Window.

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

מעבר לשלב הבא

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