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

افزونه‌ها افزونه‌هایی هستند که به مرورگر اضافه می‌شوند و برای ارائه قابلیت‌های تکمیلی و سفارشی طراحی شده‌اند. افزونه‌ای که سرعت مرورگر را کاهش دهد یا تجربه مرور را مختل کند، برای کاربر مشکل‌ساز است و با هدف افزونه‌های کروم در تضاد است. علاوه بر عادات خوب کدنویسی، توسعه‌دهندگان باید این شیوه‌ها را نیز دنبال کنند تا مطمئن شوند افزونه‌هایشان با حداکثر عملکرد اجرا می‌شوند.

هر چیز ممکن را به تعویق بیندازید

از بارگذاری منابع تا زمانی که به آنها نیاز نیست، خودداری کنید. فقط آنچه را که برای باز کردن یک افزونه لازم است در تابع راه‌اندازی آن قرار دهید. مواردی را که فقط در صورت کلیک کاربر روی یک دکمه مورد نیاز هستند، یا ویژگی‌هایی را که فقط زمانی که کاربر وارد سیستم می‌شود، قبل از اینکه فرصتی برای انجام این کار داشته باشد، بارگذاری نکنید.

مدیریت رویدادهای مهم

یک اسکریپت پس‌زمینه کارآمد شامل رویدادهای ثبت‌شده‌ای است که برای افزونه‌شان مهم هستند. آن‌ها تا زمانی که یک شنونده فعال نشود، غیرفعال می‌مانند، سپس بر اساس آن عمل می‌کنند و سپس به حالت غیرفعال برمی‌گردند. اجرای یک اسکریپت غیرضروری، منابع سیستم را به شدت مصرف می‌کند.

اسکریپت‌های پس‌زمینه باید در مانیفست ثبت شوند و در صورت امکان، پایداری آن‌ها روی false تنظیم شود.

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

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

اگر یک افزونه نیاز داشته باشد هنگام بازدید کاربر از سایتی با عنصر <video> در HTML5، یک عملکرد صفحه را به او نمایش دهد، می‌تواند یک قانون اعلانی (declarative rule) تعیین کند.

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