As extensões podem aproveitar os mesmos benefícios de depuração que o Chrome DevTools oferece para páginas da Web, mas têm propriedades de comportamento únicas. Para se tornar um depurador mestre de extensão, é necessário entender esses comportamentos, saber como os componentes de extensão funcionam uns com os outros e onde identificar os bugs. Este tutorial fornece aos desenvolvedores uma compreensão básica da depuração de extensões.
Localizar os registros
As extensões são feitas de 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 para diferentes componentes de extensão.
Script em segundo plano
Navegue até a página de gerenciamento das extensões do Chrome em chrome://extensions e verifique se o modo de desenvolvedor está ativado. Clique no botão Load Descompactado e selecione o diretório de extensão corrompido. Depois que a extensão é carregada, ela precisa ter três botões: Details, Remove e Errors em letras vermelhas.
Clique no botão Erros para visualizar 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 ao 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 requer um "I" maiúsculo. Atualize o código para refletir a chamada correta, clique no botão Clear
all no canto superior direito e recarregue a extensão.
Pop-up
Agora que a extensão é inicializada corretamente, outros componentes podem ser testados. Atualize a 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.
Volte para a página de gerenciamento de extensões. O botão Erros reaparecerá. Clique nele para ver o novo registro.
Uncaught ReferenceError: tabs is not defined
Os erros de pop-up também podem ser visualizados inspecionando-o.
O erro tabs is undefined diz que a extensão não sabe onde injetar o script de conteúdo.
Para corrigir isso, chame o método tabs.query() e selecione 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 Clear all no canto superior direito e recarregue a extensão.
Script de conteúdo
Atualize a página, abra o pop-up e clique na caixa verde. E... não, o fundo ainda não mudou de cor! Volte para a página de gerenciamento de extensões e o botão Errors não vai aparecer. O culpado provável é o script de conteúdo, que é executado na página da Web.
Abra o painel DevTools da página da Web que a extensão está tentando alterar.
Apenas erros de tempo 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 diz 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 para o 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 que mesmo os desenvolvedores mais rápidos possam abrir o DevTools. Para visualizar essas solicitações, atualize a partir do painel de rede. Ele vai recarregar 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 entre origens. Consulte o artigo de permissões e as APIs do Chrome disponíveis para garantir que uma extensão esteja solicitando as permissões corretas no manifesto.
{
"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 a depuração de extensões, assista a Desenvolvimento e depuração. Saiba mais sobre o Chrome Devtools na documentação.