達到最佳成效

擴充功能為瀏覽器之外，主要用來提供補充和自訂 功能。如果擴充功能會拖慢瀏覽速度或影響瀏覽體驗， 針對 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 等工具評估額外資訊成效，並指定需要的額外資訊指定 可以改善視覺額外資訊頁面