As extensões podem aproveitar os mesmos benefícios de depuração que o Chrome DevTools oferece para páginas da web, mas elas têm propriedades de comportamento exclusivas. Para se tornar um depurador de extensões mestre, é necessário entender esses comportamentos, como os componentes de extensão funcionam entre si e onde encontrar bugs. Este tutorial oferece aos desenvolvedores uma compreensão básica das extensões de depuração.
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 de diferentes componentes de extensão.
Script de 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 Carregar descompactado e selecione o diretório de extensão corrompido. Depois que a
extensão for carregada, ela terá três botões: Detalhes, Remover e Erros em letras
vermelhas.
Clique no botão Erros para conferir o registro de erros. O sistema de extensões encontrou um problema no script de segundo plano.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Além disso, o painel do Chrome DevTools pode ser aberto para o script de 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 de segundo plano está tentando detectar o onInstalled evento, mas o nome da propriedade
exige um "I" maiúsculo. Atualize o código para refletir a chamada correta, clique no botão Limpar tudo no canto superior direito e recarregue a extensão.
Pop-up
Agora que a extensão é inicializada corretamente, outros componentes podem ser testados. Atualize esta página ou abra uma nova guia e acesse 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 reapareceu. Clique nele para conferir o novo registro.
Uncaught ReferenceError: tabs is not defined
Os erros de pop-up também podem ser visualizados inspecionando 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 tabs.query() método 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 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 plano de fundo ainda não mudou de cor. Volte para a página de gerenciamento de extensões e... não há botão Erros. O culpado provável é 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 superior e selecione a extensão.
O erro indica que color não está definido. A extensão não está transmitindo 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 de 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 o desenvolvedor mais rápido possa abrir o DevTools. Para conferir essas solicitações, atualize de dentro 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 às páginas da Web, elas geralmente precisam de permissão para usar determinados recursos, como cookies, armazenamento e XMLHttpRequest de origem cruzada. 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 extensões de depuração, assista a Desenvolvimento e depuração. Saiba mais sobre Chrome DevTools lendo a documentação.