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

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

דחייה של כל מה שאפשר

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

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

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

אם אפשר, צריך לרשום סקריפטים של רקע במניפסט עם הערך false בהגדרה persistence.

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

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

{
  "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 יגדיר כללים לתוסף כדי לזהות מתי מתקיימים תנאים רלוונטיים. השיטה הזו יעילה יותר מסקריפט תוכן ומשתמשת בפחות קוד!

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

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 ולטרגט אזורים שאפשר לשפר בדפים של תוספים חזותיים.