Las extensiones se agregan al navegador, ya que están diseñadas para proporcionar funciones complementarias y personalizadas funcionalidad. Una extensión que ralentiza o afecta la experiencia de navegación es problemática para el usuario y contador para el objetivo de la extensión de Chrome. Además de los buenos hábitos de programación, los desarrolladores deben seguir estas prácticas para asegurarse de que sus extensiones se ejecuten al máximo rendimiento.
Difiere todo lo posible
Abstente de cargar recursos hasta que sean necesarios. Solo incluye lo necesario para abrir una en su función de inicio. No cargue durante el inicio elementos que solo sean necesarios si usuario hace clic en un botón, o funciones que solo funcionan cuando el usuario inicia sesión antes de que la oportunidad de hacerlo.
Administra eventos importantes
Una secuencia de comandos en segundo plano eficaz contiene eventos registrados que son importantes para su . Permanecen inactivos hasta que se activa un oyente, actúa en consecuencia y luego regresa a un estado inactivo para cada estado. Mantener una secuencia de comandos innecesaria en ejecución consume recursos del sistema.
Las secuencias de comandos en segundo plano deben registrarse en el manifiesto con su persistencia establecida en false si como sea 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 de forma persistente
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"]
);
Incluye secuencias de comandos de contenido
Las secuencias de comandos de contenido deben funcionar como agentes secretos de una extensión, leer sutilmente de modificar la página web mientras se confía en el núcleo de la extensión para trabajar con una lógica más pesada. Deberían tener objetivos claros para evitar la actividad invasiva en páginas irrelevantes. Idealmente, los guiones de contenido en la experiencia de navegación más allá del comportamiento intencional.
Cómo declarar destinos
Una extensión que ejecuta secuencias de comandos de contenido en ubicaciones innecesarias o en momentos inapropiados puede causar
el navegador se ralentice y genere errores de funcionalidad. Para evitar esto, proporciona coincidencias
patrones en el manifiesto y ejecutar 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 la inserte programáticamente. Una inyecció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 guiones 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 el
La API de declarativeContent establecerá reglas para que la extensión reconozca las condiciones relevantes.
los objetivos de la empresa. 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 la página al usuario cuando visitó un sitio con un código HTML5
<video>, 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 la las técnicas de programación asíncrona y mantener el código mínimo y compacto.
Use herramientas, como Lighthouse, para evaluar el rendimiento de una extensión y orientar los anuncios a las áreas que podrían mejorar las páginas de extensiones visuales.