رسیدن به اوج عملکرد

افزونه ها افزودنی به مرورگر هستند که برای ارائه عملکردهای تکمیلی و سفارشی طراحی شده اند. افزونه‌ای که سرعت مرور را کاهش می‌دهد یا آن را مختل می‌کند، برای کاربر مشکل‌ساز است و با هدف برنامه افزودنی 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> 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 برای ارزیابی عملکرد افزونه ها و مناطقی که می توانند در صفحات افزونه بصری بهبود پیدا کنند، استفاده کنید.