Chrome extension: create tab then inject content script into it

google-chrome-extension, javascript

Solution

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

Problem

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?

Original source