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

Question

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

1. 用户正在网上冲浪，并决定要从当前选项卡固定图像，因此他们单击了我的扩展程序的浏览器按钮！
2. 当点击浏览器按钮时，background.js 文件会向 contentScript1.js 发送一条消息，提示“嘿，抓取此页面上的每个 img 标签并允许用户选择‘em’”
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 中的测试器函数将被执行。但是，我的 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 就会按照您的预期进行注入。