我目前正在开发一个 Google Chrome 扩展程序，该扩展程序将允许 Pinterest 用户轻松地从一个页面固定多个图像（该功能目前不可用）。为此，扩展程序有一个背景页面和两个内容脚本（contentScript1.js 和 contentScript2.js）。为了清楚起见，我将解释我的扩展应该做什么，然后详细说明出现了什么问题。我的扩展的（简化的）事件顺序如下：
- 用户正在网上冲浪，并决定要从当前选项卡固定图像，因此他们单击了我的扩展程序的浏览器按钮！
- 当点击浏览器按钮时，background.js 文件会向 contentScript1.js 发送一条消息，说“嘿，抓取此页面上的每个 img 标签并允许用户选择它们”</li>
- contentScript1.js 接收来自 background.js 的消息，它调用一个抓取所有图像并将提交按钮附加到页面的函数
- 用户点击自己想要的图片，然后点击提交按钮
- 单击提交按钮时，contentScript1.js 会向 background.js 发送一条消息
- 当 background.js 收到来自 contentScript1.js 的消息时，它会将用户重定向到 pinterest.com 以允许固定。*注意：当使用 pinterest.com 的 url 创建选项卡时，pinterest.com 现在是活动选项卡（chrome.tabs.create 的 chrome 扩展默认值），
- 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();