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

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

সম্ভাব্য সবকিছু বিলম্বিত করুন

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

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

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

ব্যাকগ্রাউন্ড স্ক্রিপ্টগুলি ম্যানিফেস্টে নিবন্ধিত হওয়া উচিত যদি সম্ভব হলে তাদের অধ্যবসায় মিথ্যা সেট করা হয়।

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

একটি ব্যাকগ্রাউন্ড স্ক্রিপ্ট ক্রমাগত সক্রিয় রাখার একমাত্র উপলক্ষ হল যদি এক্সটেনশনটি নেটওয়ার্ক অনুরোধগুলিকে ব্লক বা সংশোধন করতে chrome.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() ]
      }
    ]);
  });
});

কোড দক্ষতা মূল্যায়ন

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

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