सबसे अच्छी परफ़ॉर्मेंस पाएं

एक्सटेंशन, ब्राउज़र का एक अतिरिक्त हिस्सा हैं, जिन्हें अतिरिक्त और कस्टमाइज़ की गई सुविधा देने के लिए डिज़ाइन किया गया है. ऐसा एक्सटेंशन जो ब्राउज़िंग के अनुभव को धीमा या बंद कर देता है, उपयोगकर्ता के लिए समस्या पैदा करता है और Chrome एक्सटेंशन उद्देश्य के उलट होता है. सामान्य अच्छी कोडिंग आदतों के अलावा, डेवलपर को इन तरीकों का भी पालन करना चाहिए, ताकि यह पक्का किया जा सके कि उनके एक्सटेंशन बेहतर परफ़ॉर्मेंस पर चल रहे हैं.

हर चीज़ को कुछ समय के लिए रोकें

जब तक संसाधनों की ज़रूरत न हो, तब तक उन्हें लोड न करें. किसी एक्सटेंशन को उसके स्टार्टअप फ़ंक्शन में खोलने के लिए, सिर्फ़ ज़रूरी चीज़ों को शामिल करें. शुरू होने के दौरान, ऐसी चीज़ें लोड न करें जिनकी ज़रूरत सिर्फ़ तब होती है, जब उपयोगकर्ता किसी बटन पर क्लिक करता है. इसके अलावा, ऐसी सुविधाएं लोड न करें जो तब काम करती हों, जब उपयोगकर्ता के लॉग इन करने से पहले ही उसे इस्तेमाल करने की अनुमति हो.

ज़रूरी इवेंट मैनेज करें

एक बेहतर बैकग्राउंड स्क्रिप्ट में रजिस्टर किए गए ऐसे इवेंट शामिल होते हैं जो उनके एक्सटेंशन के लिए ज़रूरी होते हैं. ये तब तक शांत पड़े रहते हैं, जब तक कोई सुनने वाला ट्रिगर न हो जाए. इसके बाद, ये नियम और आवाज़ के हिसाब से काम करते हुए फिर से शांत स्थिति में आ जाते हैं. ग़ैर-ज़रूरी स्क्रिप्ट को चालू रखने के लिए, सिस्टम के संसाधन तेज़ी से खर्च होते हैं.

अगर हो सके, तो बैकग्राउंड स्क्रिप्ट को मेनिफ़ेस्ट में रजिस्टर किया जाना चाहिए. साथ ही, उनके बने रहने की स्थिति को 'गलत' पर सेट करना चाहिए.

{
  "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 एपीआई का इस्तेमाल करने पर, एक्सटेंशन के लिए नियम सेट किए जा सकेंगे. इससे यह पता चलेगा कि ज़रूरी शर्तें कब पूरी होती हैं. यह कॉन्टेंट स्क्रिप्ट की तुलना में ज़्यादा असरदार है और कम कोड का इस्तेमाल करता है!

अगर किसी एक्सटेंशन को 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 जैसे टूल का इस्तेमाल करके एक्सटेंशन की परफ़ॉर्मेंस का आकलन करें और उन हिस्सों को टारगेट करें जिन्हें विज़ुअल एक्सटेंशन पेजों पर बेहतर बनाया जा सकता था.