Расширение Chrome: создайте вкладку, затем вставьте в нее скрипт контента

Question

После получения сообщения из сценария содержимого я хочу создать новую вкладку и заполнить страницу, которую она открывает динамически (сейчас я просто пытаюсь превратить вновь созданную страницу красный).

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"'} 
); 
} 

Это успешно создает новую вкладку и загружает blankpage.html (что просто HTML страница с текстом) мелкими, но не в состоянии нарисовать фон красного цвета. После вставки console.log() операторов в разных местах и ​​обманывания в отладчике я установил, что turnTabRed вызывается, tab.id действительно является идентификатором вновь созданной вкладки, и если я вызываю document.body.style.backgroundColor="red" с консоли, фон новой вкладки становится красным , Я заметил, что если я добавил

(*)

chrome.tabs.query(
    {}, function (tabArr) { for (var i = 0; tabArr[i]; i++)  
           console.log(tabArr[i].title); }); 

в тело turnTabRed название новой вкладки не будет печататься в консоли, который предположил, что сценарий был впрыскивают слишком рано, поэтому я попытался задерживая инъекцию setTimeout и когда это не удалось, я попытался прислушиваясь статус-полное событие:

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"'}); 
    }); 
} 

, который также не удалось. Вызов (*) после ожидания с setTimeout напечатал название новой вкладки вместе со всеми остальными.

Что случилось? Как создать новую вкладку, загрузить HTML-страницу, а затем повернуть ее на красный?

Answer 1

Проблема заключается в том, что вы не можете вводить скрипты в chrome-extension://* страниц (что ваш blankpage.html).

Например, изменить

{url: chrome.extension.getURL("blankpage.html")} 

в

{url: "http://www.google.com"} 

в оригинальном кодоблок и это изменит фон на красный. Насколько я знаю, нет никакого способа впрыскивать в chrome-extension://* страниц (я бы предположил, что причина в том, что это гигантская проблема безопасности). Я не уверен, что ваше расширение пытается сделать, но встраивание в «живую» страницу должно работать ... может быть, вы можете создать некоторый API для создания новой «пустой страницы» на вашем сервере всякий раз, когда срабатывает chrome.runtime.onMessage.addListener?

EDIT

Таким образом, вы не можешь вводить материала в chrome-extension://* страниц, но вы можете передать им сообщения и использовать некоторое подмножество хромированного API, внутри этих новых страниц, как указано ниже. Таким образом, используя передачу сообщений, вы сможете делать именно то, что хотите (изменить новую страницу), хотя и обходным путем. Вот очень простое доказательство концепции, которая работает для меня:

eventPage.js:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) 
    { 
    chrome.tabs.create({url: chrome.extension.getURL("blankpage.html")}, turnTabRed);  
    }); 

function turnTabRed(tab) 
{ 
    chrome.tabs.sendMessage(tab.id, {"action" : "setBackground"}); 
} 

blankpage.ЯШ:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    if(request.action == "setBackground") document.body.style.background = "red"; 
    });