As extensões são um complemento do navegador, projetadas para oferecer recursos funcionalidade de armazenamento. Uma extensão que deixa a navegação mais lenta ou prejudica a experiência de navegação é problemática para o usuário e contra o objetivo da extensão do Chrome. Além dos bons hábitos de programação, os desenvolvedores precisam seguir estas práticas para garantir que as extensões sejam executadas com o melhor desempenho.
Adiar todo o possível
Evite carregar recursos até que sejam necessários. Inclua apenas o que é necessário para abrir um na função de inicialização. Não carregue durante a inicialização itens que são necessários apenas se o o usuário clica em um botão ou em recursos que funcionam somente quando o usuário está conectado para fazer isso.
Gerenciar eventos importantes
Um script de plano de fundo eficiente contém eventos registrados que são importantes para seus . Eles ficam em repouso até que um listener seja acionado, agem de acordo e depois retornam a um ambiente inativo. estado. Manter um script desnecessário em execução é um desperdício de recursos do sistema.
Os scripts em segundo plano precisam ser registrados no manifesto com a persistência definida como "false" se sempre que possível.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
A única ocasião para manter um script de segundo plano persistentemente ativo é se a extensão usar
API chrome.webRequest para bloquear ou modificar solicitações de rede. A API webRequest é incompatível
com páginas de fundo 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"]
);
Ter scripts de conteúdo
Os scripts de conteúdo funcionam como agentes secretos de uma extensão, lendo ou lendo sutilmente os modificar a página da Web, usando o núcleo da extensão para trabalhar com uma lógica mais pesada. Eles devem ter destinos claros para evitar atividades invasivas em páginas irrelevantes. O ideal é que os scripts de conteúdo sejam despercebido na experiência de navegação, exceto no comportamento intencional.
Declarar alvos
Uma extensão que executa scripts de conteúdo em locais desnecessários ou em momentos inapropriados pode causar
o navegador fique mais lento e possivelmente crie erros de funcionalidade. Para evitar isso, forneça valores de correspondência
padrões no manifesto e executar 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"'
});
});
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. Usar o
A API declarativeContent vai definir regras para a extensão reconhecer quando as condições relevantes
sejam atendidos. Isso é mais eficiente do que um script de conteúdo e usa menos código.
Se uma extensão precisar exibir uma ação de página ao usuário quando ele visitar um site com HTML5
<video>, ele 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 implementar técnicas de programação assíncrona e como manter o código mínimo e compacto.
Use ferramentas, como o Lighthouse, para avaliar o desempenho de uma extensão e segmentar áreas que poderia melhorar nas páginas de extensão visual.