As extensões são um complemento do navegador, projetadas para oferecer funcionalidades suplementares e personalizadas. Uma extensão que diminui ou prejudica a experiência de navegação é problemática para o usuário e contrária ao objetivo das extensões do Chrome. Além de bons hábitos gerais de programação, os desenvolvedores precisam seguir estas práticas para garantir que as extensões estejam funcionando com desempenho máximo.
Adiar tudo o que for possível
Não carregue recursos até que eles sejam necessários. Inclua apenas o que for necessário para abrir uma extensão na função de inicialização. Não carregue coisas durante a inicialização que só são necessárias se o usuário clicar em um botão ou recursos que funcionam apenas quando o usuário faz login antes de ter a chance de fazer isso.
Gerenciar eventos importantes
Um script em segundo plano eficiente contém eventos registrados que são importantes para a extensão. Eles ficam inativos até que um listener seja acionado, agem de acordo e depois voltam a um estado inativo. Manter um script desnecessário em execução causa uma perda de recursos do sistema.
Os scripts em segundo plano precisam ser registrados no manifesto com a persistência definida como "false", se possível.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
A única ocasião em que um script em segundo plano precisa ficar ativo de forma persistente é se a extensão usa a
API chrome.webRequest para bloquear ou modificar solicitações de rede. A API webRequest é incompatível com páginas em segundo plano não 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"]
);
Contém scripts de conteúdo
Os scripts de conteúdo devem funcionar como agentes secretos de uma extensão, lendo ou modificando sutilmente a página da Web enquanto dependem do núcleo da extensão para trabalhar com uma lógica mais pesada. Elas precisam ter metas claras para evitar atividades invasivas em páginas irrelevantes. O ideal é que os scripts de conteúdo passem despercebidos na experiência de navegação, exceto por um comportamento proposital.
Declarar destinos
Uma extensão que executa scripts de conteúdo em locais desnecessários ou em momentos inadequados pode causar
a lentidão do navegador e possivelmente criar erros de funcionalidade. Para evitar isso, forneça padrões
de correspondência no manifesto e execute o script em document_idle em vez 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"
}
]
...
}
Se uma extensão só precisar acessar uma página da Web com a ação do usuário, faça com que ela seja injetada programaticamente. Uma injeção programática só é executada quando um usuário a invoca.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.fontSize="100px"'
});
});
Use scripts de conteúdo somente quando necessário
Muitas extensões não precisam de um script de conteúdo para realizar a funcionalidade desejada. Usar a API declarativeContent vai definir regras para que a extensão reconheça quando as condições relevantes forem atendidas. Isso é mais eficiente do que um script de conteúdo e usa menos código.
Se uma extensão precisasse mostrar uma ação de página ao usuário quando ele visitasse um site com um elemento <video> HTML5, ela poderia especificar uma regra 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() ]
}
]);
});
});
Avaliar a eficiência do código
As mesmas práticas gerais de desempenho do site podem ser aplicadas a extensões, como a implementação de técnicas de programação assíncrona e a manutenção de um código mínimo e compacto.
Use ferramentas como o Lighthouse para avaliar o desempenho de uma extensão e identificar áreas que podem ser melhoradas nas páginas de extensão visual.