Question

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

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

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

以下是代码：

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的{{1}}中。您似乎希望以编程方式决定何时运行脚本，这正是<all_urls>所用的内容。

只需从您的清单中删除executeScript，contentScript2.js即可按预期进行注射。

Chrome扩展程序：在新标签中创建新标签（chrome.tabs.create）和executeScript ...无法正常工作:(

1 个答案: