達到最佳成效

擴充功能是瀏覽器的附加功能，可提供補充和自訂功能。如果擴充功能會降低或損害瀏覽體驗，對使用者來說就是問題，也違反了 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 等工具評估擴充功能的效能，並找出可改善視覺擴充功能網頁的領域。