Erweiterungen sind eine Ergänzung des Browsers, die zusätzliche und benutzerdefinierte Funktionen bietet. Eine Erweiterung, die die Browsernutzung verlangsamt oder beeinträchtigt, ist für den Nutzer problematisch und widerspricht dem Ziel von Chrome-Erweiterungen. Neben allgemeinen guten Programmiergewohnheiten sollten Entwickler die folgenden Praktiken befolgen, um sicherzustellen, dass ihre Erweiterungen mit maximaler Leistung ausgeführt werden.
Alles Mögliche aufschieben
Laden Sie Ressourcen erst, wenn sie benötigt werden. Nehmen Sie nur das auf, was zum Öffnen einer Erweiterung in der Startfunktion erforderlich ist. Laden Sie beim Start keine Elemente, die nur benötigt werden, wenn der Nutzer auf eine Schaltfläche klickt, oder Funktionen, die nur funktionieren, wenn der Nutzer angemeldet ist, bevor er die Möglichkeit dazu hat.
Wichtige Ereignisse verwalten
Ein effizientes Hintergrundskript enthält registrierte Ereignisse, die für die Erweiterung wichtig sind. Sie bleiben inaktiv, bis ein Listener ausgelöst wird, reagieren entsprechend und kehren dann in den inaktiven Zustand zurück. Es ist eine Belastung für die Systemressourcen, ein unnötiges Skript auszuführen.
Hintergrundskripts sollten im Manifest registriert werden und ihre Persistenz sollte nach Möglichkeit auf „false“ gesetzt werden.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
Ein Hintergrundskript darf nur dann dauerhaft aktiv bleiben, wenn die Erweiterung die chrome.webRequest API verwendet, um Netzwerkanfragen zu blockieren oder zu ändern. Die webRequest API ist nicht mit nicht persistenten Hintergrundseiten kompatibel.
{
"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"]
);
Inhaltskripte enthalten
Content-Scripts sollten wie die Geheimagenten einer Erweiterung funktionieren und die Webseite unauffällig lesen oder ändern, während die Erweiterung selbst für komplexere Logik zuständig ist. Sie sollten klare Ziele haben, um invasive Aktivitäten auf irrelevanten Seiten zu vermeiden. Im Idealfall sollten Content-Scripts beim Surfen nicht auffallen, abgesehen von der beabsichtigten Funktion.
Ziele deklarieren
Wenn eine Erweiterung Inhaltsscripts an unnötigen Stellen oder zu ungeeigneten Zeiten ausführt, kann dies zu einer Verlangsamung des Browsers und möglicherweise zu Funktionsfehlern führen. Sie können dies vermeiden, indem Sie Muster für den Abgleich im Manifest angeben und das Skript unter document_idle anstelle von document_start ausführen.
{
"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 zugreifen muss, wenn der Nutzer eine Aktion ausführt, sollte sie programmatisch eingefügt werden. Eine programmatische Einfügung wird nur ausgeführt, wenn ein Nutzer sie aufruft.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.fontSize="100px"'
});
});
Content-Scripts nur bei Bedarf verwenden
Für viele Erweiterungen ist möglicherweise kein Inhaltsskript erforderlich, um die gewünschte Funktionalität zu erreichen. Wenn Sie die declarativeContent API verwenden, werden Regeln für die Erweiterung festgelegt, um zu erkennen, wann relevante Bedingungen erfüllt sind. Das ist effizienter als ein Content-Script und erfordert weniger Code.
Wenn eine Erweiterung eine Seitenaktion für den Nutzer anzeigen musste, wenn er eine Website mit einem HTML5-<video>-Element besuchte, konnte sie eine deklarative Regel angeben.
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
Für Erweiterungen können dieselben allgemeinen Best Practices für die Websiteleistung angewendet werden, z. B. die Implementierung von Techniken der asynchronen Programmierung und die Minimierung und Komprimierung von Code.
Verwenden Sie Tools wie Lighthouse, um die Leistung einer Erweiterung zu bewerten und Bereiche zu identifizieren, die auf visuellen Erweiterungsseiten verbessert werden könnten.