সর্বোচ্চ পারফরম্যান্সে পৌঁছান

এক্সটেনশন হলো ব্রাউজারের একটি সংযোজন, যা অতিরিক্ত এবং কাস্টমাইজড কার্যকারিতা প্রদানের জন্য ডিজাইন করা হয়েছে। কোনো এক্সটেনশন যদি ব্রাউজিং অভিজ্ঞতাকে ধীর করে দেয় বা ব্যাহত করে, তবে তা ব্যবহারকারীর জন্য সমস্যাজনক এবং ক্রোম এক্সটেনশনের উদ্দেশ্যের পরিপন্থী। সাধারণ ভালো কোডিং অভ্যাসের পাশাপাশি, ডেভেলপারদের উচিত তাদের এক্সটেনশনগুলো যেন সর্বোচ্চ পারফরম্যান্সে চলে তা নিশ্চিত করতে এই অনুশীলনগুলো অনুসরণ করা।

সম্ভব সবকিছু স্থগিত করুন

প্রয়োজন না হওয়া পর্যন্ত রিসোর্স লোড করা থেকে বিরত থাকুন। একটি এক্সটেনশন খোলার জন্য যা যা প্রয়োজন, শুধু সেগুলোই এর স্টার্টআপ ফাংশনে অন্তর্ভুক্ত করুন। স্টার্টআপের সময় এমন কিছু লোড করবেন না যা শুধুমাত্র ব্যবহারকারী কোনো বোতামে ক্লিক করলেই প্রয়োজন হয়, অথবা এমন ফিচার যা ব্যবহারকারী লগ ইন করার পরেই কাজ করে, এবং যা ব্যবহারকারী ক্লিক করার সুযোগ পাওয়ার আগেই লোড করা হয়।

গুরুত্বপূর্ণ ইভেন্টগুলি পরিচালনা করুন

একটি কার্যকর ব্যাকগ্রাউন্ড স্ক্রিপ্টে এমন সব রেজিস্টার্ড ইভেন্ট থাকে যা এর সম্প্রসারণের জন্য গুরুত্বপূর্ণ। একটি লিসেনার ট্রিগার না হওয়া পর্যন্ত এগুলো নিষ্ক্রিয় থাকে, ট্রিগার হলে সেই অনুযায়ী কাজ করে এবং তারপর আবার নিষ্ক্রিয় অবস্থায় ফিরে যায়। একটি অপ্রয়োজনীয় স্ক্রিপ্ট চালু রাখা সিস্টেম রিসোর্সের অপচয় ঘটায়।

সম্ভব হলে, ব্যাকগ্রাউন্ড স্ক্রিপ্টগুলোকে ম্যানিফেস্টে রেজিস্টার করার সময় সেগুলোর পার্সিস্টেন্স 'ফলস' সেট করা উচিত।

{
  "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_start এর পরিবর্তে document_idle এ চালিয়ে এটি এড়ান।

{
  "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() ]
      }
    ]);
  });
});

কোডের কার্যকারিতা মূল্যায়ন করুন

ওয়েবসাইটের পারফরম্যান্সের জন্য প্রযোজ্য সাধারণ পদ্ধতিগুলো এক্সটেনশনের ক্ষেত্রেও প্রয়োগ করা যেতে পারে, যেমন অ্যাসিঙ্ক্রোনাস প্রোগ্রামিংয়ের কৌশল বাস্তবায়ন করা এবং কোডকে সংক্ষিপ্ত ও সুসংহত রাখা।

একটি এক্সটেনশনের পারফরম্যান্স মূল্যায়ন করতে এবং এক্সটেনশনের ভিজ্যুয়াল পেজগুলোর উন্নতির ক্ষেত্রগুলো চিহ্নিত করতে লাইটহাউসের মতো টুল ব্যবহার করুন।