הגעה לשיא הביצועים

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

דחיית כל פעולה אפשרית

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

ניהול אירועים חשובים

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

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

{
  "name": "High Performance Extension",
  "description" : "Sleepy Background Script",
  "version": "1.0",
  ...
  "background": {
   "scripts": ["background.js"],
   "persistent": false
  },
  ...
}

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

{
  "name": "High Performance Extension",
  "description" : "Persistent Background Script",
  "version": "1.0",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://<distracting social media site>.com/*"
  ],
 ...
}

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {redirectUrl: "/"};
  },
  {urls: ["https://social.media.distraction.com/*"]},
  ["blocking"]
);

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

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

הצהרה על יעדים

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

{
  "name": "High Performance Extension",
  "description" : "Superfly Superlight Content Scripts",
  "version": "1.0",
  ...
  "content_scripts": [
    {
      "js": ["content_script.js"],
      "matches": ["/*"],
      "run_at": "document_idle"
    }
  ]
  ...
}

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

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'document.body.style.fontSize="100px"'
  });
});

יש להשתמש בסקריפטים של תוכן רק במקרה הצורך

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

אם תוסף צריך להציג פעולה בדף בפני המשתמש כשהוא נכנס לאתר שמכיל רכיב <video>5 של HTML5, ניתן לציין בו כלל מוצהר.

chrome.runtime.onInstalled.addListener(function() {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            css: ["video"],
          })
        ],
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

הערכת היעילות של הקוד

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

מומלץ להשתמש בכלים כמו Lighthouse כדי להעריך את הביצועים של התוספים ולטרגט אזורים שעשויים להשתפר בדפים של תוספים חזותיים.