在Google Chrome浏览器扩展程序弹出窗口中发送异步消息

马修·西亚拉米塔罗(Matthew Ciaramitaro)

我一直在研究异步函数调用,以及如何将变量设置为它们的值,并且在使用过程中遇到了很多麻烦。我想创建一个端口来发送带有content.js扩展名的文件的消息

为此,我需要接收已打开的窗口的选项卡,并idchrome.tabs.connect()函数中使用其属性此实现无法接通任何console.log()电话,但我对异步编程的了解不够深,无法理解。有人能帮忙吗?我的问题是两个文件没有通信,因此端口没有打开。

<script language = "Javascript">
    function foo(callback){
        var port = chrome.tabs.connect(chrome.tabs.query({ currentWindow: true, active: true }, function(tabs) {
            //sets curTab to current tab
            console.log(tabs[0]);
            var curTab;
            setTimeout(function(tabs) {
                curTab = tabs[0];
                console.log(curTab);
            }, 5000);

        }),{name: "mode"})

         //both files are preset to this so no need to message
        var mode = "on";

        document.getElementById("stop").onclick = function(){
            if(mode === "off")
                mode = "on";
            else
                mode = "off";
            setMode();
            console.log("clikityclik");
        };


        console.log(mode);


        function setMode(){
            /*sends message to port*/
            if(port)
                port.postMessage({newMode: mode});
            else{
                console.log("error: port not created");
            }
        }   
    }

content.js文件中的相关代码如下。我一次调用此函数

function getMode(){
    /*receives message from port
    **communicates with sandboxed.html
    */
    chrome.runtime.onConnect.addListener(function(port) {
        console.assert(port.name == "mode");
        port.onMessage.addListener(function(msg) {
            if (msg.newMode){
                mode = msg.newMode;
                console.log("Mesage received: "+mode);
            }
            else
                console.log("error receiving new mode, last mode was: " + mode);
        });
    });

}

该程序的目标是让第一个脚本在content.js单击div时将消息发送到,并让“ content.js”文件在发送消息时接收这些消息。

马修·西亚拉米塔罗(Matthew Ciaramitaro)

解决方案是创建一个带有选项卡输入的创建端口的函数。基本上,getTab将尝试获取选项卡的值,如果我们有一个选项卡,它将运行回调函数,createPort函数包含创建端口所需的信息以及单击的事件处理程序div

function getTab(callback){
    chrome.tabs.query({ currentWindow: true, active: true }, function(tabs) {
        console.log(tabs[0]);
        callback(tabs[0]);
    });
}   

function createPort(tab){
    var port = chrome.tabs.connect(tab.id,{name: "mode"});

    document.getElementById("stop").onclick = function(){
        if(mode === "off")
            mode = "on";
        else
            mode = "off";
        setMode(port);
        console.log("clikityclik");
    };
}
var mode = "on"; //mode is preset to on in content.js
getTab(createPort);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Google Chrome浏览器扩展manifest.json文件

浏览器扩展:在浏览器操作弹出窗口和后台脚本之间发送消息(带有响应)

Google Chrome /网络浏览器扩展程序:符合要求

Google Chrome浏览器扩展程序审核时间流程

Google Chrome浏览器运行缓慢

Google Chrome浏览器扩展程序未同步

Google Chrome浏览器扩展程序重定向其他页面

Google Chrome浏览器扩展程序,可重新启动Google Chrome浏览器

Google Chrome浏览器代理设置?

当我关闭并打开Google Chrome浏览器后,扩展程序消失了

是否可以将URL从Google Chrome(或其他浏览器)窗口中所有打开的选项卡复制到电子邮件中?

是否有Opera浏览器扩展程序,该扩展程序将在弹出窗口中按一个按钮

是否有可能让Google Chrome浏览器始终在单独的窗口中打开快捷方式?

下载Google Chrome浏览器(armhf?)

Google Chrome浏览器的字体问题

Google Chrome浏览器首页37

Google Chrome扩展程序-简单的jQuery,可在浏览器中打开标签

一个Google Chrome扩展程序可以有几个浏览器操作图标吗?

Google Chrome扩展程序:始终可见的弹出窗口

在Google Chrome浏览器中浏览时,如何阻止Windows商店弹出?

Google Chrome浏览器不断崩溃

Google Chrome浏览器崩溃

关闭浏览器窗口后,如何防止Google Chrome浏览器删除会话Cookie?

我可以将我的Google Chrome浏览器扩展程序开源吗?

如何在Google Chrome浏览器中检索隐藏的扩展程序

仅在浏览器不是Google Chrome浏览器时显示消息

Google Chrome浏览器行为异常

显示Google Chrome浏览器扩展程序按钮

在 Google Chrome 扩展程序中获取打开的弹出窗口