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

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