Rozszerzenie Chrome: utwórz kartę, a następnie wstrzyknij do niej skrypt zawartości
Po otrzymaniu wiadomości ze skryptu treści chcę utworzyć nową kartę i wypełnić stronę, którą otwiera dynamicznie (na razie próbuję tylko zmienić nowo utworzoną stronę na czerwoną).
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"'}
);
}
To z powodzeniem tworzy nową kartę i ładujeblankpage.html
(która jest po prostu stroną HTML z jakimś tekstem) dobrze, ale nie maluje koloru tła czerwonego. Po włożeniuconsole.log()
stwierdzenia w różnych miejscach i wygłupianie się w debuggerze, stwierdziłem toturnTabRed
jest nazywany,tab.id
jest rzeczywiście identyfikatorem nowo utworzonej karty i jeśli zadzwoniędocument.body.style.backgroundColor="red"
z konsoli tło nowej karty zmienia kolor na czerwony. Zauważyłem to, gdybym dodał
(*)
chrome.tabs.query(
{}, function (tabArr) { for (var i = 0; tabArr[i]; i++)
console.log(tabArr[i].title); });
do ciałaturnTabRed
tytuł nowej karty nie byłby drukowany na konsoli, co sugerowało, że skrypt był wstrzykiwany zbyt wcześnie, więc próbowałem opóźnić wstrzyknięcie za pomocąsetTimeout
a gdy to się nie powiodło, próbowałem nasłuchiwać zdarzenia zakończenia stanu:
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"'});
});
}
który również zawiódł. Dzwonienie (*) po odczekaniu zsetTimeout
wydrukował tytuł nowej karty wraz ze wszystkimi innymi.
Co jest nie tak? Jak mogę utworzyć nową kartę, załadować stronę HTML, a następnie obrócić jej tło czerwone?