Chrome扩展程序：在新标签中创建新标签（chrome.tabs.create）并执行脚本...不工作:( [英] Chrome Extension: create new tab(chrome.tabs.create) and executeScript in new tab...not working :(

问题描述

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

1. 用户正在浏览网页，并决定要插入图像当前标签，所以他们点击我的扩展的浏览器按钮！


2. 当浏览器按钮被点击时，background.js文件向contentScript1.js发出消息说：嘿，抓住每一个img标签，并允许用户选择'em'。
   
3. contentScript1.js接收来自background.js的消息，该消息调用一个函数来抓取所有图像并附加一个提交按钮


4. 用户点击他们想要的图片，然后点击提交按钮


5. 点击提交按钮后，contentScript1.js触发message to background.js


6. 当background.js从contentScript1.js收到消息时，它将用户重定向到pinterest.com以允许锁定。 *注意：当选项卡是用pinterest.com的url创建的，pinterest.com现在是活动选项卡（chrome.tabs.create的扩展默认值），
   
7. 在后台.js创建新标签，它在当前标签中执行contentScript2.js，它现在是pinterest.com。

好的，一切正常除了contentScript2.js以外，还有其他细节都在ANY CURRENT TAB中执行。更具体地说，如果我现在打开我的浏览器，我的测试函数将在contentScript2.js中执行。但是，我的pinterest.com选项卡只在适当的时候创建（点击提交按钮时）。根据我的理解，我不应该使用background.js和contentScript2.js之间的消息传递，因为chrome.tabs.create的默认设置。尽管如此，我尝试使用消息传递，但它仍然无法工作☹

以下是代码：

<$ p $ manifest.json：

{
manifest_version：2，

name：Pin'em，
description：只需点击两下即可将多个图片固定到不同的Pinterest板子上，
version：1.1，

permissions：[
标签，
< 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

//单击浏览器图标时，当前选项卡被选中
//将消息发送到contentScript1.js
chrome.browserAction.onClicked.addListener（function（）{
chrome。 tabs.getSelected（null，function（tab）{
chrome.tabs.sendMessage（tab.id，'displayImages'）;
}）;
}）;

//当收到'redirectImages'消息时
//创建一个新标签页（url = http://pinterest.com）
//扩展名执行contentScript2.js in pinterest.com
chrome.extension.onMessage.addListener（function（request，sender，sendResponse）{
if（request.action ==='redirectImages'）{
sendResponse（{received ：'success'}）;
injectScript（）;
}
}）;

函数injectScript（）{
chrome.tabs.create（{url：'http://pinterest.com'}，函数（标签）{
chrome.tabs。 executeScript（tab.id，{file：'src / contentScript2'}）;
}）;
};

第一个内容脚本：

  contentScript1.js 
 
函数sendMess（）{
 chrome.extension.sendMessage（{action：'redirectImages'}，function（response）{
成功= response.received; 
 console.log（成功）; 
}）; 
}; 
 
 
函数appendImages（）{
 //...does stuff to make a overlay and 
 //...grabs img tags，and displayed for用户选择
 //...发现一个提交按钮class ='submit-images'
}; 
 $ b $（document）.on（'click'，'＃submit-images'，function（e）{
 // ..做魔法，你不用担心（我认为？）
 sendMess（）; 
}）; 
 
 
 chrome.extension.onMessage.addListener（function（request，sender，sendResponse）{
 if（request ===displayImages）{
 appendImages ）; 
} 
}）; 
  

第二个内容脚本

  contentScript2.js 
 
函数tester（）{
 console.log（'pinterest脚本注入'）; 
}; 
 
 var tester = tester（）; 
  

解决方案

contentScript2.js 在任何CURRENT TAB中执行

这是因为，已经将它包含在载入< all_urls> 的 content_scripts 中。看起来你想以编程方式决定何时运行脚本，这正是使用 executeScript 的地方。

只需从清单中删除 contentScript2.js ，然后 executeScript 就可以按照预期进行注入。

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). To achieve this, the extension has a background page and two content scripts (contentScript1.js and 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:

1. A user is surfing the Web, and decides they want to pin an image from the current tab, so they click my extension’s browser button!
2. When the browser button is clicked, the background.js file fires a message to contentScript1.js to say "hey, grab every img tag on this page and allow for the user can select ‘em"
3. contentScript1.js receives the message from background.js, which invokes a function that grabs all images and appends a submit button to the page
4. The user clicks the images they want, and then clicks the submit button
5. When the submit button is clicked, contentScript1.js fires a message to background.js
6. When background.js receives the message from contentScript1.js, it redirects the user to pinterest.com to allow for pinning. *Note: when the tab is created with a url of pinterest.com, pinterest.com is now the active tab (a chrome extension default of chrome.tabs.create),
7. After background.js creates the new tab, it executes contentScript2.js in the current tab, which is now pinterest.com

Okay, everything works fine-and-dandy except contentScript2.js is executed in ANY CURRENT TAB. So more specifically, if I opened up my browser right now, my tester function that is in contentScript2.js will be executed. However, my pinterest.com tab is only created at the appropriate time (when the submit button is clicked). 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. 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 TAB

That's because, in your manifest, you've included it in your content_scripts that load on <all_urls>. It seems like you want to programmatically decide when to run the script, which is exactly what executeScript is used for.

Simply remove contentScript2.js from your manifest, and executeScript will do the injection as you expect.

这篇关于Chrome扩展程序：在新标签中创建新标签（chrome.tabs.create）并执行脚本...不工作:(的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！