As extensões são um acréscimo ao navegador, projetadas para fornecer funcionalidades complementares e personalizadas. Uma extensão que diminui a velocidade ou prejudica a experiência de navegação é problemática para o usuário e contrária ao objetivo da extensão do Chrome. Além dos bons hábitos gerais de programação, os desenvolvedores precisam seguir estas práticas para garantir que as extensões sejam executadas com desempenho máximo.
Adiar tudo o que é possível
Evite carregar recursos até que sejam necessários. Inclua apenas o que é necessário para abrir uma extensão na função de inicialização. Durante a inicialização, não carregue itens que são necessários apenas se o usuário clicar em um botão ou recursos que funcionam apenas quando o usuário estiver conectado antes de poder 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 com eles e retornam a um estado inativo. É um uso de recursos do sistema para manter um script desnecessário em execução.
Os scripts em segundo plano precisam ser registrados no manifesto com a persistência definida como falsa, se possível.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
A única ocasião de manter um script em segundo plano continuamente ativo é se a extensão usar 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"]
);
Apresentam scripts de conteúdo
Os scripts de conteúdo precisam 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 em uma lógica mais pesada. Eles precisam ter destinos claros 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 pelo comportamento intencional.
Declarar destinos
Uma extensão que executa scripts de conteúdo em locais desnecessários ou em momentos inadequados pode deixar o navegador mais lento 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 a injeção 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"'
});
});
Usar scripts de conteúdo somente quando necessário
Muitas extensões podem não precisar de um script de conteúdo para atingir a funcionalidade desejada. O uso da API declarativeContent vai definir regras para a extensão reconhecer quando as condições relevantes forem atendidas. Isso é mais eficiente que um script de conteúdo e usa menos código.
Se uma extensão precisar exibir uma ação de página para o usuário quando ele visitou um site com um elemento
<video> HTML5, ela poderá 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 de sites podem ser aplicadas a extensões, como a implementação de técnicas de programação assíncrona e a manutenção do código mínimo e compacto.
Use ferramentas, como o Lighthouse, para avaliar o desempenho das extensões e segmentar áreas que podem melhorar as páginas de extensão visual.