Chrome Extension: create new tab(chrome.tabs.create) and executeScript in new tab...not working :(

Question

I’m currently working on a Google Chrome extension that will allow a Pinterest user to easily pin multiple images from a page (a functionality that is currently not available). To achieve this, the extension has a background page and two content scripts (contentScript1.js and contentScript2.js). For clarities sake I’ll explain what my extension is supposed to do, and then elaborate on what problem is arising. My extension’s (simplified) order of events goes like this:

1. A user is surfing the Web, and decides they want to pin an image from the current tab, so they click my extension’s browser button!
2. When the browser button is clicked, the background.js file fires a message to contentScript1.js to say “hey, grab every img tag on this page and allow for the user can select ‘em”
3. contentScript1.js receives the message from background.js, which invokes a function that grabs all images and appends a submit button to the page
4. The user clicks the images they want, and then clicks the submit button
5. When the submit button is clicked, contentScript1.js fires a message to background.js
6. When background.js receives the message from contentScript1.js, it redirects the user to pinterest.com to allow for pinning. *Note: when the tab is created with a url of pinterest.com, pinterest.com is now the active tab (a chrome extension default of chrome.tabs.create),
7. After background.js creates the new tab, it executes contentScript2.js in the current tab, which is now pinterest.com

Okay, everything works fine-and-dandy except contentScript2.js is executed in ANY CURRENT TAB. So more specifically, if I opened up my browser right now, my tester function that is in contentScript2.js will be executed. However, my pinterest.com tab is only created at the appropriate time (when the submit button is clicked). From my understanding, I shouldn’t need to use message passing between background.js and contentScript2.js, because of the default settings of chrome.tabs.create. Nonetheless, I tried using message passing and it still didn’t work ☹

Here's the code:

manifest.json:

    {
  "manifest_version" : 2,

  "name" : "Pin 'em",
  "description" : "Pin multiple images to different Pinterest boards in just two clicks",
  "version" : "1.1",

  "permissions" : [
     "tabs", 
     "<all_urls>"
  ],

  "browser_action" : {
    "default_icon" : "images/icon.png"
  },

  "background" : {
      "page" : "background.html",
      "persistent" : false
    },

  "content_scripts" : [
  {
    "matches" : ["<all_urls>"],
    "js" : ["lib/jquery.min.js", "src/contentScript1.js", "src/contentScript2.js"],
    "css" : ["stylesheets/style.css"]
    }
  ]
}

and the background page:

background.js

//when browser icon is clicked, current tab is selected
//sends message to contentScript1.js 
chrome.browserAction.onClicked.addListener(function() {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendMessage(tab.id, 'displayImages');
  });
}); 

//when message 'redirectImages' is received
//a new tab is created (url = http://pinterest.com)
//extension executes contentScript2.js in pinterest.com
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'redirectImages') {
    sendResponse({received : 'success'});
    injectScript();  
  }
});

function injectScript() {
  chrome.tabs.create({url : 'http://pinterest.com'}, function(tab) { 
    chrome.tabs.executeScript(tab.id, {file: 'src/contentScript2'});
  });
};

first content script:

contentScript1.js

function sendMess() {
  chrome.extension.sendMessage({action : 'redirectImages'}, function(response) {
    success = response.received;
    console.log(success);
  });
};


function appendImages() {
  //...does stuff to make a pretty overlay and
  //...grabs img tags, and displays for user to select to select
  //...appends a submit button with class='submit-images' 
};

$(document).on('click', '#submit-images', function(e) {
 //..does magic that you need not worry about (i think?)
 sendMess();
});


chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { 
  if (request === "displayImages") {
    appendImages();
  }
}); 

second content script

contentScript2.js

    function tester() {
  console.log('pinterest script injected');
};

var tester = tester();

Answer 1

contentScript2.js is executed in ANY CURRENT TAB

That's because, in your manifest, you've included it in your content_scripts that load on <all_urls>. It seems like you want to programmatically decide when to run the script, which is exactly what executeScript is used for.

Simply remove contentScript2.js from your manifest, and executeScript will do the injection as you expect.