扩展程序是对浏览器的补充,旨在提供补充和自定义功能。会拖慢或损害浏览体验的扩展程序会给用户带来问题,并会违背 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 等工具评估扩展程序的效果,并定位可改进视觉扩展程序页面上的方面。