Erweiterungen sind eine Ergänzung des Browsers und stellen zusätzliche und benutzerdefinierte Funktionen bereit. Eine Erweiterung, die das Surfen verlangsamt oder beeinträchtigt, ist für den Nutzer problematisch und dem Ziel der Chrome-Erweiterung zuwider. Neben den allgemein guten Programmiergewohnheiten sollten Entwickler diese Praktiken befolgen, um sicherzustellen, dass ihre Erweiterungen mit Spitzenleistung ausgeführt werden.
Alles Mögliche auf später verschieben
Laden Sie keine Ressourcen, bis sie benötigt werden. Geben Sie nur die Elemente an, die zum Öffnen einer Erweiterung in der Startfunktion erforderlich sind. Laden Sie während des Starts keine Elemente, die nur benötigt werden, wenn der Nutzer auf eine Schaltfläche klickt, oder Funktionen, die nur dann 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 ihre Erweiterung wichtig sind. Sie liegen inaktiv, bis ein Zuhörer ausgelöst wird, reagieren entsprechend und kehren dann in den Ruhezustand zurück. Die Systemressourcen werden stark belastet, um die Ausführung eines nicht benötigten Scripts aufrechtzuerhalten.
Hintergrundskripts sollten im Manifest registriert werden und ihre Persistenz sollte nach Möglichkeit auf „false“ gesetzt sein.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
Ein Hintergrundskript muss 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"]
);
Enthält Content-Skripts
Inhaltsskripts sollten als Geheimagent einer Erweiterung fungieren und dabei auf subtile Weise die Webseite lesen oder ändern, während der Erweiterungskern für komplexere Logiken herangezogen wird. Sie sollten klare Ziele haben, um invasive Aktivitäten auf irrelevanten Seiten zu vermeiden. Idealerweise sollten Inhaltsskripte beim Surfen unbemerkt bleiben, abgesehen von bewusstem Verhalten.
Ziele deklarieren
Eine Erweiterung, die Inhaltsskripte an unnötigen Speicherorten oder zu unangemessenen Zeiten ausführt, kann dazu führen, dass der Browser langsamer wird und Funktionsfehler verursachen. Dies lässt sich vermeiden, indem Sie Übereinstimmungsmuster im Manifest angeben und das Skript unter document_idle statt 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 mit der Aktion des Nutzers zugreifen muss, lassen Sie sie programmatisch einschleusen. 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"'
});
});
Content-Skripts nur bei Bedarf verwenden
Viele Erweiterungen benötigen unter Umständen gar kein Inhaltsskript, um die gewünschte Funktionalität ausführen zu können. Mit der declarativeContent API werden Regeln festgelegt, damit die Erweiterung erkennen kann, wenn relevante Bedingungen erfüllt sind. Dies ist effizienter als ein Inhaltsskript und verwendet weniger Code.
Wenn eine Erweiterung dem Nutzer beim Besuch einer Website mit einem HTML5-<video>-Element eine Seitenaktion anzeigen muss, könnte 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
Dieselben allgemeinen Praktiken für die Websiteleistung können auch auf Erweiterungen angewendet werden, z. B. die Implementierung von Techniken der asynchronen Programmierung und einen minimalen und kompakten Code.
Verwenden Sie Tools wie Lighthouse, um die Leistung einer Erweiterung zu bewerten und Regionen auszuwählen, in denen Seiten mit Bilderweiterungen verbessert werden können.