Las extensiones son un complemento del navegador diseñado para proporcionar funcionalidad complementaria y personalizada. Una extensión que ralentiza o perjudica la experiencia de navegación es problemática para el usuario y va en contra del objetivo de la extensión de Chrome. Además de los buenos hábitos de codificación generales, los desarrolladores deben seguir estas prácticas para garantizar que sus extensiones se ejecuten con el máximo rendimiento.
Difiere todo lo posible
Evita cargar recursos hasta que sean necesarios. Incluye solo lo necesario para abrir una extensión en su función de inicio. No cargues elementos durante el inicio que solo sean necesarios si el usuario hace clic en un botón o funciones que solo funcionen cuando el usuario está conectado antes de que tenga la oportunidad de hacerlo.
Administra eventos importantes
Una secuencia de comandos en segundo plano eficiente contiene eventos registrados que son importantes para su extensión. Permanecen inactivos hasta que se activa un objeto de escucha, actúan en consecuencia y, luego, vuelven a un estado inactivo. Mantener en ejecución una secuencia de comandos innecesaria consume los recursos del sistema.
Las secuencias de comandos en segundo plano deben registrarse en el manifiesto con su persistencia establecida en false si es posible.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
La única ocasión para mantener una secuencia de comandos en segundo plano activa de forma persistente es si la extensión usa
chrome.webRequest API para bloquear o modificar solicitudes de red. La API de webRequest no es compatible con las páginas en segundo plano no persistentes.
{
"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"]
);
Contiene secuencias de comandos de contenido
Las secuencias de comandos de contenido deben funcionar como los agentes secretos de una extensión, leyendo o modificando sutilmente la página web mientras se basan en el núcleo de la extensión para trabajar con una lógica más pesada. Deben tener objetivos claros para evitar la actividad invasiva en páginas irrelevantes. Idealmente, las secuencias de comandos de contenido deben pasar desapercibidas en la experiencia de navegación, además del comportamiento intencional.
Declara objetivos
Una extensión que ejecuta secuencias de comandos de contenido en ubicaciones innecesarias o en momentos inadecuados puede hacer que el navegador se ralentice y, potencialmente, crear errores de funcionalidad. Para evitar esto, proporciona patrones
de coincidencia en el manifiesto y ejecuta la secuencia de comandos en document_idle en lugar de 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"
}
]
...
}
Si una extensión solo necesita acceder a una página web con la acción del usuario, haz que se inserte de forma programática. Una inserción programática solo se ejecutará cuando un usuario la invoque.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.fontSize="100px"'
});
});
Usa secuencias de comandos de contenido solo cuando sea necesario
Es posible que muchas extensiones no necesiten una secuencia de comandos de contenido para lograr la funcionalidad deseada. Si usas la
declarativeContent API, se establecerán reglas para que la extensión reconozca cuándo se cumplen las condiciones pertinentes. Esto es más eficiente que una secuencia de comandos de contenido y usa menos código.
Si una extensión necesita mostrar una acción de página al usuario cuando visita un sitio con un elemento HTML5
<video>, puede especificar una regla declarativa.
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() ]
}
]);
});
});
Evalúa la eficiencia del código
Las mismas prácticas generales para el rendimiento del sitio web se pueden aplicar a las extensiones, como implementar técnicas de programación asíncrona y mantener el código mínimo y compacto.
Usa herramientas, como Lighthouse, para evaluar el rendimiento de una extensión y las áreas objetivo que podrían mejorar en las páginas de extensión visuales.