javascript - Chrome extension: create tab then inject content script into it

Question

Upon receiving a message from a content script I want to create a new tab and fill the page it opens dynamically (for now I'm just trying to turn the newly created page red).

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

This successfully creates a new tab and loads blankpage.html (which is just an HTML page with some text) fine, but fails to paint the background colour red. After inserting console.log() statements in various places and fooling around in the debugger, I have ascertained that turnTabRed is being called, tab.id is indeed the ID of the newly created tab and if I call document.body.style.backgroundColor="red" from the console, the background of the new tab turns red. I noticed that if I added

(*)

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

into the body of turnTabRed the title of the new tab would not be printed into the console, which suggested that the script was being injected too early, so I tried delaying the injection with setTimeout and when that failed, I tried listening for the status-complete event:

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

which also failed. Calling (*) after waiting with setTimeout did print the new tab's title along with all the others though.

What's wrong? How can I create a new tab, load an HTML page and then turn its background red?

Answer 1

The problem is that you cannot inject scripts into chrome-extension://* pages (which your blankpage.html is).

For example, change

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

to

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

in your original codeblock and it will change the background to red. As far as I know there is no way around injecting into chrome-extension://* pages (I would assume the reason for this is that it is a giant security concern). I'm not sure what your extension is trying to do, but injecting into a "live" page should work...maybe you can create some API to generate a new "blankpage" on your server whenever the chrome.runtime.onMessage.addListener fires?

EDIT

So you can't inject stuff into chrome-extension://* pages, but you can pass messages to them and use some subset of chrome API's inside those new pages as mentioned below. So using message passing you will be able to do exactly what you want (modify the new page), albeit in a roundabout way. Here is a really simple proof of concept that works for me:

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.js:

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