擴充功能是瀏覽器的額外功能,旨在提供補充和自訂功能。會拖慢瀏覽體驗或影響瀏覽體驗的擴充功能,會對使用者造成困擾,而且不會反對 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 等工具,評估擴充功能的效能及目標區域,以改善視覺擴充功能頁面。