Extensão do Chrome: crie uma guia e injete um script de conteúdo nela
Ao receber uma mensagem de um script de conteúdo, quero criar uma nova guia e preencher a página que ela abre dinamicamente (por enquanto, estou apenas tentando transformar a página recém-criada em vermelho).
eventPage.js:
// ... code that injects another content script, works fine
// Problem code...
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse)
{
chrome.tabs.create({url: chrome.extension.getURL("blankpage.html")},
turnTabRed);
});
function turnTabRed(tab)
{
chrome.tabs.executeScript(
tab.id,
{code: 'document.body.style.backgroundColor="red"'}
);
}
Isso cria com sucesso uma nova guia e carregablankpage.html
(que é apenas uma página HTML com algum texto), mas não consegue pintar a cor de fundo em vermelho. Depois de inserirconsole.log()
declarações em vários lugares e brincando no depurador, verifiquei queturnTabRed
está sendo chamado,tab.id
é realmente o ID da guia recém-criada e se eu chamardocument.body.style.backgroundColor="red"
no console, o plano de fundo da nova guia fica vermelho. Eu notei que se eu adicionasse
(*)
chrome.tabs.query(
{}, function (tabArr) { for (var i = 0; tabArr[i]; i++)
console.log(tabArr[i].title); });
no corpo deturnTabRed
o título da nova guia não seria impresso no console, o que sugeria que o script estava sendo injetado muito cedo, então tentei adiar a injeção comsetTimeout
e quando isso falhou, tentei ouvir o evento status-complete:
function turnTabRed(tab)
{
chrome.tabs.onUpdated.addListener(
function(tabUpdatedId, changeInfo, tabUpdated)
{
if (tabUpdatedId == tab.id && changeInfo.status &&
changeInfo.status == 'complete')
chrome.tabs.executeScript(
tabUpdatedId,
{code: 'document.body.style.backgroundColor="red"'});
});
}
que também falhou. Ligando (*) depois de esperar comsetTimeout
imprimiu o título da nova guia junto com todas as outras.
O que há de errado? Como posso criar uma nova guia, carregar uma página HTML e depois tornar o plano de fundo vermelho?