扩展程序是对浏览器的补充,旨在提供 功能如果扩展程序拖慢浏览速度或损害浏览体验, 用户和 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 等工具评估附加信息的效果,并定位到 可以改善视觉化附加信息网页