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{动作:getDataArray"，来源: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:

问题:newtab-contentscript.js 似乎从未收到消息.

我创建选项卡或发送消息的方式是否有任何错误.您对如何解决此问题有任何建议吗?

解决方案

正如我们在评论中所讨论的，我猜也许 $(document).ready 来不及接收来自 的消息chrome.tabs.sendMessage，您可以通过比较回调内的 console.log 时间戳和新选项卡内容脚本的第一行的时间戳来测试它，如@wOxxOm 所述.>

我只是建议将消息​​逻辑移到后台(事件)页面并从 newtab-contentscript.js 开始消息传递，您可以在其中控制何时开始发送消息.

示例代码

背景.js

let source = null;chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {//从另一个内容脚本发送，用于保存源if(request.action === 'putSource') {来源 = request.source;chrome.tabs.create({ url: 'newtab.html' });}//从 newtab-contentscript 发送，以获取源if(request.action === 'getSource') {发送响应({来源:来源})；}});

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屋！