達到最佳成效

擴充功能是瀏覽器的額外功能，旨在提供補充和自訂功能。會拖慢瀏覽體驗或影響瀏覽體驗的擴充功能，會對使用者造成困擾，而且不會反對 Chrome 擴充功能目標。除了一般常見的程式設計習慣外，開發人員也應遵循這些做法，確保擴充功能能發揮最佳效能。

延遲所有項目

請勿在需要時載入資源。僅包含在啟動函式中開啟擴充功能所需的內容。請勿在啟動期間載入只有在使用者點選按鈕時才需要的資料，或是只有在使用者尚未登入後才可使用的功能。

管理重要活動

有效率的背景指令碼包含對擴充功能而言很重要的已註冊事件。它們會保持停滯狀態，直到觸發事件監聽器並據此採取行動，再返回停滯狀態。這會消耗系統資源，讓不需要的指令碼持續執行。

請在資訊清單中註冊背景指令碼，並盡可能將持續性指令碼設為 false。

{
  "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_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 即可為擴充功能設定規則，讓擴充功能識別何時符合相關條件。這種做法比內容指令碼更有效率，且使用的程式碼更少！

當使用者造訪含有 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 等工具，評估擴充功能的效能及目標區域，以改善視覺擴充功能頁面。