[英]Chrome Extension: create new tab(chrome.tabs.create) and executeScript in new tab…not working :(
我目前正在开发Google Chrome扩展程序,允许Pinterest用户轻松地从页面固定多个图像(目前无法使用的功能)。 为实现此目的,扩展程序具有后台页面和两个内容脚本(contentScript1.js和contentScript2.js)。 为清楚起见,我将解释我的扩展应该做什么,然后详细说明出现了什么问题。 我的扩展(简化)事件顺序如下:
好的,除了在任何当前选项卡中执行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();
contentScript2.js
在任何当前选项卡中执行
这是因为,在您的清单中,您已将其包含在加载<all_urls>
content_scripts
中。 您似乎希望以编程方式决定何时运行脚本,这正是executeScript
的用途。
只需从清单中删除contentScript2.js
, executeScript
就会按预期进行注入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.