Las extensiones son un complemento del navegador y están diseñadas para proporcionar funciones complementarias y personalizadas. Una extensión que ralentiza o afecta la experiencia de navegación resulta problemática para el usuario y contrarrestar el objetivo de la extensión de Chrome. Además de los buenos hábitos de programación generales, los desarrolladores deben seguir estas prácticas para garantizar que sus extensiones se ejecuten al máximo rendimiento.
Posponer 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 haya accedido antes de que pueda hacerlo.
Administra eventos importantes
Una secuencia de comandos en segundo plano eficaz contiene eventos registrados que son importantes para su extensión. Permanecen inactivos hasta que se activa un objeto de escucha, actúan según corresponda y, luego, vuelven a un estado inactivo. Es un agotamiento de los recursos del sistema para mantener en ejecución una secuencia de comandos innecesaria.
Las secuencias de comandos en segundo plano deben registrarse en el manifiesto con la 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 la
API de chrome.webRequest para bloquear o modificar las solicitudes de red. La API de webRequest no es compatible con 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"]
);
Incluir secuencias de comandos de contenido
Las secuencias de comandos de contenido deben funcionar como los agentes secretos de una extensión, ya que deben leer o modificar sutilmente la página web y, a su vez, depender del núcleo de la extensión para trabajar con una lógica más. Deben tener objetivos claros para evitar la actividad invasiva en páginas irrelevantes. Idealmente, las secuencias de comandos de contenido deberían pasar desapercibidas en la experiencia de navegación, además del comportamiento intencional.
Cómo declarar objetivos
Una extensión que ejecuta secuencias de comandos de contenido en ubicaciones innecesarias o en momentos inapropiados puede hacer que el navegador se ralentice y cree errores de funcionalidad. Para evitarlo, 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 manera programática. Una inyección programática solo se ejecuta cuando un usuario la invoca.
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. Con la
API de declarativeContent, se establecerán reglas para que la extensión reconozca cuándo se cumplen las
condiciones relevantes. Esto es más eficiente que una secuencia de comandos de contenido y usa menos código.
Si una extensión necesitara mostrar una acción de página al usuario cuando visitó un sitio con un elemento
<video> de HTML5, podría 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 de segmentación que podrían mejorar en las páginas de extensiones visuales.