Chrome扩展程序会创建新标签并将信息从popup.js发送到新标签的内容脚本 [英] Chrome extension create new tab and send message from popup.js to content script of new tab

问题描述

我正在开发一个Chrome扩展，其中我的popup.js从当前页面上的内容脚本接收消息并创建一个数组。然后在一个按钮上按下，popup.js创建一个新选项卡（其中有一个内容脚本正在运行）并向该内容脚本发送一条包含该数组的消息。

我的popup.js：

  //此邮件已发送从一个不同的内容脚本（当前页面），这里没有显示
 chrome.runtime.onMessage.addListener（function（request，sender）{
 
 if（request.action === getSource）{
 var arr = JSON.parse（request.source）; 
 
 //创建新选项卡
 chrome.tabs.create（{url：newtab.html }，function（tab）{
 
 //发送消息到新标签
 chrome.tabs.sendMessage（tab.id {
 action：getDataArray，
来源：JSON.stringify（arr）
））; 
} 
}）; 
  

newtab-contentscript.js：

  $（document）.ready（function（）{
 
 chrome.runtime.onMessage.addListener（function（request，sender）{
 $ b $ if（request.action ===getDataArray）{
 $（＃结果）。html（JSON.parse（request.source））; 
} 
}）; 
  
 
 
 
 newtab.html：
 < script src = NEWTAB-contentscript.js >< /脚本> 
  
问题：newtab-contentscript.js从未接收到消息。
 
 
 
我是如何创建标签或发送邮件的错误。你有什么建议来解决这个问题吗？
解决方案
正如我们在评论中所讨论的，我猜可能 $（document）.ready 从 chrome.tabs.sendMessage 接收消息已经太迟了，您可以通过比较时间戳 console.log 在回调和新标签的内容脚本的第一行中，如@ wOxxOm提到的那样。
 
 
 
我只是建议将消息​​逻辑移动到后台（事件）页面，并启动从 newtab-contentscript.js 传递的消息，以便控制何时开始发送消息。 
 
 
 
示例代码 
 
 
 background.js 
  let source = null; 
 
 chrome.runtime.onMessage.addListener（function（request，sender，sendResponse）{
 //从另一个内容脚本发送，用于保存源
 if（request.action ==='putSource'）{
 source = request.source; 
 chrome.tabs.create（{url：'newtab.html'}）; 
} 
 // （request.action ==='getSource'）{
 sendResponse（{source：source}）; 
} 
}从newtab-contentscript发送，获取源
。 ）; 
  
 newtab-contentscript.js  
 
 
  chrome.runtime.sendMessage（{action：'getSource'}，function（response）{
 $（'＃result'）。html（response.source）; 
 }）; 
  
 
I am developing a chrome extension where my popup.js receives a message from a content script on the current page and creates an array. Then on a button press, popup.js creates a new tab (which has a content script running) and sends that content script a message containing the array. 


My popup.js:
//this message is sent from a different content script (for current page), not shown here
chrome.runtime.onMessage.addListener(function(request, sender) {

    if (request.action === "getSource") {
        var arr = JSON.parse(request.source);

        //create new tab 
        chrome.tabs.create({url: "newtab.html"}, function(tab){

            //send message to new tab
            chrome.tabs.sendMessage(tab.id{
            action: "getDataArray",
            source: JSON.stringify(arr)
        });
    }
});
newtab-contentscript.js:
$(document).ready( function() {

    chrome.runtime.onMessage.addListener(function(request, sender) {

      if (request.action === "getDataArray") {
        $("#result").html(JSON.parse(request.source));
      }
});
newtab.html:
<script src="newtab-contentscript.js"></script>
Problem: The newtab-contentscript.js never seems to receive the message.

Are the any mistakes with how I am creating a tab or sending the message. Do you have any suggestions to how to fix this issue?
解决方案
As we discussed in the comments, I guess maybe $(document).ready is too late to receive messages from chrome.tabs.sendMessage, you can test it by comparing timestamps of console.log inside the callback and on the first line of the new tab's content scripts, as @wOxxOm mentioned.

I just suggest moving message logic to background (event) page and starting the message passing from newtab-contentscript.js, in which you could control when to start sending the message.

A sample code

background.js
let source = null;

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // sent from another content script, intended for saving source
    if(request.action === 'putSource') {
        source = request.source;
        chrome.tabs.create({ url: 'newtab.html' });
    }
    // sent from newtab-contentscript, to get the source
    if(request.action === 'getSource') {
        sendResponse({ source: source });
    }
});
newtab-contentscript.js
chrome.runtime.sendMessage({action: 'getSource'}, function(response) {
    $('#result').html(response.source);
});


                        
这篇关于Chrome扩展程序会创建新标签并将信息从popup.js发送到新标签的内容脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！