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

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

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

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

קובצי תוספים

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

קובץ המניפסט, שנקרא 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

הפניות לקבצים

ניתן להתייחס לקבצים של תוסף באמצעות כתובת URL יחסית, בדיוק כמו קבצים ב-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 היחסית.

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

ארכיטקטורה

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

סקריפט ברקע

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

רכיבים בממשק המשתמש

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

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

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

חלון דפדפן שמכיל פעולת דף שמציגה חלון קופץ

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

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

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

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

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

דף האפשרויות

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

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

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

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

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

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

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

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

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

// 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. פונקציית קריאה חוזרת המשתנה query() נקרא ואז מבצע את שורה 2, אבל רק אחרי מידע על הכרטיסייה שנבחרה זמינה. התהליך הזה קורה זמן מה אחרי החזרת המוצרים על ידי query(). למרות הקוד update() הוא אסינכרוני, ולכן הקוד לא משתמש בפרמטר של קריאה חוזרת, כי התוסף לא משתמש בו כל דבר עם תוצאות העדכון.

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

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

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

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

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

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

עבור לשלב הבא

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