[英]Chrome Extension: create new tab(chrome.tabs.create) and executeScript in new tab…not working :(
I'm currently working on a Google Chrome extension that will allow a Pinterest user to easily pin multiple images from a page (a functionality that is currently not available). 我目前正在开发Google Chrome扩展程序,允许Pinterest用户轻松地从页面固定多个图像(目前无法使用的功能)。 To achieve this, the extension has a background page and two content scripts (contentScript1.js and contentScript2.js). 为实现此目的,扩展程序具有后台页面和两个内容脚本(contentScript1.js和contentScript2.js)。 For clarities sake I'll explain what my extension is supposed to do, and then elaborate on what problem is arising. 为清楚起见,我将解释我的扩展应该做什么,然后详细说明出现了什么问题。 My extension's (simplified) order of events goes like this: 我的扩展(简化)事件顺序如下:
Okay, everything works fine-and-dandy except contentScript2.js is executed in ANY CURRENT TAB. 好的,除了在任何当前选项卡中执行contentScript2.js之外,一切都工作正常。 So more specifically, if I opened up my browser right now, my tester function that is in contentScript2.js will be executed. 更具体地说,如果我现在打开浏览器,将执行contentScript2.js中的测试器功能。 However, my pinterest.com tab is only created at the appropriate time (when the submit button is clicked). 但是,我的pinterest.com选项卡仅在适当的时间创建(单击提交按钮时)。 From my understanding, I shouldn't need to use message passing between background.js and contentScript2.js, because of the default settings of chrome.tabs.create. 根据我的理解,我不需要在background.js和contentScript2.js之间使用消息传递,因为chrome.tabs.create的默认设置。 Nonetheless, I tried using message passing and it still didn't work ☹ 尽管如此,我尝试使用消息传递,它仍然无法正常工作☹
Here's the code: 这是代码:
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"]
}
]
}
and the background page: 和背景页面:
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'});
});
};
first content script: 第一个内容脚本:
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();
}
});
second content script 第二个内容脚本
contentScript2.js
function tester() {
console.log('pinterest script injected');
};
var tester = tester();
contentScript2.js
is executed in ANY CURRENT TABcontentScript2.js
在任何当前选项卡中执行
That's because, in your manifest, you've included it in your content_scripts
that load on <all_urls>
. 这是因为,在您的清单中,您已将其包含在加载<all_urls>
content_scripts
中。 It seems like you want to programmatically decide when to run the script, which is exactly what executeScript
is used for. 您似乎希望以编程方式决定何时运行脚本,这正是executeScript
的用途。
Simply remove contentScript2.js
from your manifest, and executeScript
will do the injection as you expect. 只需从清单中删除contentScript2.js
, executeScript
就会按预期进行注入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.