As extensões podem aproveitar os mesmos benefícios de depuração que as Chrome DevTools oferecem para páginas da Web, mas elas têm propriedades de comportamento exclusivas. Para se tornar um depurador de extensão mestre, é necessário entender esses comportamentos, como os componentes de extensão funcionam entre si e onde encontrar bugs. Este tutorial oferece aos desenvolvedores um entendimento básico das extensões de depuração.
Localizar os registros
As extensões são compostas por muitos componentes diferentes, e esses componentes têm responsabilidades individuais. Faça o download de uma extensão corrompida aqui para começar a localizar registros de erros de diferentes componentes da extensão.
Script em segundo plano
Acesse a página de gerenciamento de extensões do Chrome em chrome://extensions e verifique se o modo de desenvolvedor
está ativado. Clique no botão Load Unpacked e selecione o diretório de extensão corrompido. Depois que a
extensão for carregada, ela terá três botões: Details, Remove e Errors em letras
vermelhas.
Clique no botão Errors para acessar o registro de erros. O sistema de extensões encontrou um problema no script em segundo plano.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Além disso, o painel do Chrome DevTools pode ser aberto para o script em segundo plano selecionando o link azul ao lado de Inspecionar visualizações.
Volte para o código.
chrome.runtime.oninstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
O script em segundo plano está tentando detectar o evento onInstalled, mas o nome
da propriedade exige um "I" em maiúsculas. Atualize o código para refletir a chamada correta, clique no botão Limpar
tudo no canto superior direito e atualize a extensão.
Pop-up
Agora que a extensão é inicializada corretamente, outros componentes podem ser testados. Refresque esta página ou abra uma nova guia e navegue até qualquer página em developer.chrome.com, abra o pop-up e clique no quadrado verde. E... nada acontece.
Navegue de volta para a página de gerenciamento de extensões. O botão Errors reapareceu. Clique nele para acessar o novo registro.
Uncaught ReferenceError: tabs is not defined
Os erros de pop-up também podem ser visualizados ao inspecionar o pop-up.
O erro tabs is undefined indica que a extensão não sabe onde injetar o script de conteúdo.
Isso pode ser corrigido chamando o método tabs.query() e selecionando a guia ativa.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = color;'});
});
};
Atualize o código, clique no botão Limpar tudo no canto superior direito e atualize a extensão.
Script de conteúdo
Atualize a página, abra o pop-up e clique na caixa verde. E não, o plano de fundo ainda não mudou de cor. Navegue de volta para a página de gerenciamento de extensões e... não há o botão Errors. O provável culpado é o script de conteúdo, que é executado na página da Web.
Abra o painel do DevTools da página da Web que a extensão está tentando alterar.
Somente erros de execução, console.warning e console.error, serão registrados na página de gerenciamento de extensões.
Para usar o DevTools no script de conteúdo, clique na seta suspensa ao lado de top e selecione a extensão.
O erro informa que color não está definido. A extensão não pode transmitir a variável corretamente.
Corrija o script injetado para transmitir a variável de cor ao código.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Guias de extensão
Os registros das páginas de extensão exibidas como uma guia, como páginas de substituição e opções de página inteira, podem ser encontrados no console da página da Web e na página de gerenciamento de extensões.
Monitorar solicitações de rede
O pop-up geralmente faz todas as solicitações de rede necessárias antes mesmo que os desenvolvedores mais rápidos possam abrir o DevTools. Para conferir essas solicitações, atualize o painel de rede. Ele recarrega o pop-up sem fechar o painel do DevTools.
Declarar permissões
Embora as extensões tenham recursos semelhantes aos das páginas da Web, elas geralmente precisam de permissão para usar determinados recursos, como cookies, armazenamento e XMLHttpRequsts de origem cruzada. Consulte o artigo sobre permissões e as APIs do Chrome disponíveis para garantir que uma extensão esteja solicitando as permissões corretas no manifest.
{
"name": "Broken Background Color",
"version": "1.0",
"description": "Fix an Extension!",
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
Próximas etapas
Para mais informações sobre como depurar extensões, assista Como desenvolver e depurar. Leia a documentação para saber mais sobre o Chrome DevTools.