达到最佳效果

扩展程序是浏览器的附加组件,旨在提供补充和自定义功能。如果扩展程序会降低或损害浏览体验,则对用户来说是有问题的,并且与 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 等工具评估扩展程序的性能,并确定可改进视觉扩展网页的方面。