Spitzenleistung erreichen

Erweiterungen sind eine Ergänzung des Browsers und bieten ergänzende und benutzerdefinierte Funktionalität. Erweiterungen, die das Browsen verlangsamen oder beeinträchtigen, sind für Nutzer problematisch. und widerspricht dem Ziel der Chrome-Erweiterung. Neben guten Programmiergewohnheiten Entwickler sollten diese Best Practices beachten, damit ihre Erweiterungen mit maximaler Leistung ausgeführt werden.

Alles Mögliche auf später verschieben

Laden Sie keine Ressourcen, bis sie benötigt werden. Geben Sie nur das an, was zum Öffnen eines Erweiterung in ihrer Startfunktion. Laden Sie während des Starts keine Elemente, die nur benötigt werden, auf eine Schaltfläche klicken oder Funktionen, die nur funktionieren, wenn der Nutzer vor der Nutzung die Möglichkeit, dies zu tun.

Wichtige Ereignisse verwalten

Ein effizientes Hintergrundskript enthält registrierte Ereignisse, die für die . Sie liegen inaktiv, bis ein Zuhörer ausgelöst wird, handeln entsprechend und kehren dann in den inaktiven Zustand zurück. Bundesstaat. Dadurch werden die Systemressourcen stark belastet, um die Ausführung eines nicht benötigten Skripts aufrechtzuerhalten.

Hintergrundskripte sollten im Manifest registriert und deren Persistenz auf "false" gesetzt sein, wenn möglich.

{
  "name": "High Performance Extension",
  "description" : "Sleepy Background Script",
  "version": "1.0",
  ...
  "background": {
   "scripts": ["background.js"],
   "persistent": false
  },
  ...
}

Ein Hintergrundskript sollte nur dann dauerhaft aktiv bleiben, wenn die Erweiterung chrome.webRequest API zum Blockieren oder Ändern von Netzwerkanfragen. Die webRequest API ist nicht kompatibel mit nicht persistenten Hintergrundseiten.

{
  "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"]
);

Enthält Scripts

Content-Skripte sollten als Geheimagenten einer Erweiterung fungieren, die vorsichtig auslesen Änderungen der Webseite, während der Erweiterungskern für komplexere Logik zuständig ist Sie sollten klare Ziele festlegen, um invasive Aktivitäten auf irrelevanten Seiten zu vermeiden. Idealerweise sollten Inhaltsskripte beim Surfen unbemerkt bleiben.

Ziele deklarieren

Eine Erweiterung, die Inhaltsskripte an unnötigen Stellen oder zu unpassenden Zeiten ausführt, kann verlangsamt und zu Funktionsfehlern führen kann. Dies lässt sich vermeiden, indem Sie Übereinstimmung Mustern im Manifest und führen das Skript unter document_idle statt document_start aus.

{
  "name": "High Performance Extension",
  "description" : "Superfly Superlight Content Scripts",
  "version": "1.0",
  ...
  "content_scripts": [
    {
      "js": ["content_script.js"],
      "matches": ["/*"],
      "run_at": "document_idle"
    }
  ]
  ...
}

Wenn eine Erweiterung nur auf eine Webseite mit der Aktion des Nutzers zugreifen muss, muss sie eingeschleust werden. Programmatisch garantiert. Eine programmatische Injektion wird nur ausgeführt, wenn ein Nutzer sie aufruft.

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'document.body.style.fontSize="100px"'
  });
});

Inhaltsskripte nur bei Bedarf verwenden

Viele Erweiterungen benötigen unter Umständen gar kein Content-Skript, um die gewünschte Funktionalität zu erreichen. Mit der Die declarativeContent API legt Regeln fest, damit die Erweiterung erkennt, wenn relevante Bedingungen erfüllt sind. erfüllt sind. Dies ist effizienter als ein Inhaltsskript und verwendet weniger Code.

Wenn eine Erweiterung eine Seitenaktion anzeigen muss, wenn der Nutzer eine Website mit einem HTML5- <video>-Element enthält, könnte eine deklarative Regel angegeben werden.

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() ]
      }
    ]);
  });
});

Codeeffizienz bewerten

Dieselben allgemeinen Verfahren für die Website-Leistung gelten auch für Erweiterungen wie die Implementierung von der asynchronen Programmierung und bei minimalem und kompaktem Code.

Mit Tools wie Lighthouse können Sie die Leistung einer Erweiterung bewerten und die Kampagnen auf Bereiche ausrichten, Seiten mit Bilderweiterungen verbessern können.