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

admin管理员组

文章数量:1287986

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 to allow for pinning. *Note: when the tab is created with a url of pinterest, pinterest 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

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 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 = )
//extension executes contentScript2.js in pinterest
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'redirectImages') {
    sendResponse({received : 'success'});
    injectScript();  
  }
});

function injectScript() {
  chrome.tabs.create({url : ''}, 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();

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. to allow for pinning. *Note: when the tab is created with a url of pinterest., pinterest. 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.

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. 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.)
//extension executes contentScript2.js in pinterest.
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'redirectImages') {
    sendResponse({received : 'success'});
    injectScript();  
  }
});

function injectScript() {
  chrome.tabs.create({url : 'http://pinterest.'}, 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();

• javascript
• google-chrome-extension

Share Improve this question Follow edited May 31, 2013 at 17:30 Rob W 349k8787 gold badges807807 silver badges682682 bronze badges asked May 31, 2013 at 17:11 user2441282user2441282 8311 gold badge22 silver badges44 bronze badges 7

• 1 I assume crome.tabs.executeScript is a typo? – apsillers Commented May 31, 2013 at 17:15
• 1 In your manifest, you're including src/pinterestScript2.js in your set of content scripts to be injected in <all_urls>. Is src/pinterestScript2.js different from contentScript2? – apsillers Commented May 31, 2013 at 17:20
• thanks apsillers! I've fiddled with the manifest.json matches. Could you elaborate on how one would include two content scripts with different matches? – user2441282 Commented May 31, 2013 at 17:22
• also, that was a typo. checking now. If that was the problem I'm going to do a few head shakes to myself ;) – user2441282 Commented May 31, 2013 at 17:23
• oh i changed the name of my content scripts for this question. pretend that my manifest includes contentScript2.js – user2441282 Commented May 31, 2013 at 17:25

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 7

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.

本文标签：