Chrome 扩展：创建新标签（chrome.tabs.create）并在新标签中执行脚本......不工作:(

Question

我目前正在开发一个 Google Chrome 扩展程序，它允许 Pinterest 用户轻松地从一个页面固定多个图像（目前不可用的功能）。为了实现这一点，扩展有一个背景页面和两个内容脚本（contentScript1.js 和 contentScript2.js）。为了清楚起见，我将解释我的扩展程序应该做什么，然后详细说明出现了什么问题。我的扩展程序的（简化的）事件顺序是这样的：

1. 用户正在网上冲浪，并决定从当前选项卡固定图像，因此他们单击我的扩展程序的浏览器按钮！
2. 当浏览器按钮被点击时，background.js 文件会向 contentScript1.js 发送一条消息说“嘿，抓住这个页面上的每个 img 标签并允许用户选择它们”
3. contentScript1.js 从 background.js 接收消息，它调用一个函数来抓取所有图像并将提交按钮附加到页面
4. 用户点击自己想要的图片，然后点击提交按钮
5. 单击提交按钮时，contentScript1.js 会向 background.js 发送一条消息
6. 当 background.js 收到来自 contentScript1.js 的消息时，它会将用户重定向到 pinterest.com 以允许固定。*注意：当使用 pinterest.com 的 url 创建选项卡时，pinterest.com 现在是活动选项卡（chrome.tabs.create 的 chrome 扩展默认值），
7. background.js 创建新标签后，在当前标签中执行 contentScript2.js，现在是 pinterest.com

好的，除了 contentScript2.js 在任何当前选项卡中执行之外，一切都运行良好。更具体地说，如果我现在打开浏览器，将执行 contentScript2.js 中的 tester 函数。但是，我的 pinterest.com 选项卡仅在适当的时间（单击提交按钮时）创建。根据我的理解，由于 chrome.tabs.create 的默认设置，我不需要在 background.js 和 contentScript2.js 之间使用消息传递。尽管如此，我尝试使用消息传递，但仍然无效？

这是代码：

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"]
    }
  ]
}

和背景页面：

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

第一个内容脚本：

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

第二个内容脚本

contentScript2.js

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

var tester = tester();

Answer 1

contentScript2.js 在任何当前选项卡中执行

那是因为，在您的清单中，您已将其包含content_scripts在<all_urls>. 似乎您想以编程方式决定何时运行脚本，这正是executeScript用于的目的。

只需contentScript2.js从您的清单中删除，executeScript就会按照您的预期进行注入。