zoukankan      html  css  js  c++  java
  • chrome扩展-sendResponse不等待异步功能(chrome extension

    描述:
     
        1. content-script 1 中的 就是给 backgroun 发送了一个 message。(content-script 1 中的内容我就不贴出来了)
     
        2. background 拿到 message 之后 会打开一个 新的标签页, 这个标签页会注入 content-script 2  
     
        3. content-script 2  收到消息后 要在异步中 sendMessage到 background 中。
     
    问题:
       最后一步 在setTimeout 中 sendMessage到 background 中时,拿不到message,同时 background 控制台还报如下错误。
       Unchecked runtime.lastError: The message port closed before a response was received.  意思大致是:不受控制的运行时。lastError:在收到响应之前关闭的消息端口。没有拿到 response 想要 ,就关闭了这次通信。
     
    background.js 监听 其它 content-script 1 发来的消息
    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse){
        console.log('这里是后台', request,'|||||||||||||', sender, '||||||||||||', sendResponse);
        if(request.message === 'autoReply'){
            console.log('后台已经收到',request.data);
            sendResponse('我后台已收到');
            // 打开一个新窗口
            chrome.tabs.create({url: 'https://xxx.com/'}, tab => {
                console.log('新打开的 tab 信息', tab);
                if(!tab.id){
                    sendResponse({
                        state: 'rejected',
                        message: '打开新窗口失败'
                    })
                    return;
                }
                console.log('新tab id', tab.id);
                // 轮询 打开的新窗口 status 状态
                let timer = setInterval(()=>{
                    chrome.tabs.get(tab.id, (tab)=>{
                        if(tab.status === 'complete'){
                            // 取消轮询
                            timer && clearTimeout(timer);
                            console.log('页面加载完成了, 一秒后开始发送消息 到 content-script 2');
                            // 延迟1s 后给 新打开的 标签页 发送 message
                            setTimeout(()=>{
                                chrome.tabs.sendMessage(tab.id, {
                                    message: request.message,
                                    data: request.data
                                }, function(response){
                                    // 一会主要看这里的打印情况
                                    console.log('dongdong.js 的回复', response);
                                });
                            }, 1000)
                        }
                    });
                }, 1000);
    
            });
        }
    });
    content-script 2:
    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse){
        console.log('content-script 2 收到消息', request);
        if(request.message === 'autoReply'){
            console.log('cs-dd.js 3秒后执行了自动回复')
    /*         
            // 正常在这里写 sendResponse 是没有 会提的 background.js 会正常打印 response
            sendResponse({
                message: "content-script 2 已经收到"
            });
     */
            setTimeout(()=>{
                // 在这个异步 中进行 sendResponse 时候 background.js 打印的 response 为 undefined
                sendResponse({
                    message: "content-script 2 执行了自动回复"
                });
    
                // do something ....
                // autoReply( request.data );
            }, 3000)
        }
        // onMessage 返回 true 时候 sendResponse 就可以写在异步当中了
        // return true;
    });
    解决方法:
    onMessage的回调应返回 true ,以保持内部消息通道开放,以便sendResponse可以异步工作。
     
    调整后的 content-script 2
    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse){
        console.log('content-script 2 收到消息', request);
        if(request.message === 'autoReply'){
            console.log('cs-dd.js 3秒后执行了自动回复')
    /*         
            // 正常在这里写 sendResponse 是没有 会提的 background.js 会正常打印 response
            sendResponse({
                message: "content-script 2 已经收到"
            });
     */
            setTimeout(()=>{
                // 在这个异步 中进行 sendResponse 时候 background.js 打印的 response 为 undefined
                sendResponse({
                    message: "content-script 2 执行了自动回复"
                });
    
                // do something ....
                // autoReply( request.data );
            }, 3000)
        }
        // onMessage 返回 true 时候 sendResponse 就可以写在异步当中了
        return true;
    });

    当 return true; 时,在异步中 sendResponse 就可以成功到达 background 中。


    参考:https://www.it1352.com/2107077.html

  • 相关阅读:
    P1144 最短路计数 题解 最短路应用题
    C++高精度加减乘除模板
    HDU3746 Teacher YYF 题解 KMP算法
    POJ3080 Blue Jeans 题解 KMP算法
    POJ2185 Milking Grid 题解 KMP算法
    POJ2752 Seek the Name, Seek the Fame 题解 KMP算法
    POJ2406 Power Strings 题解 KMP算法
    HDU2087 剪花布条 题解 KMP算法
    eclipse创建maven项目(详细)
    maven的作用及优势
  • 原文地址:https://www.cnblogs.com/taohuaya/p/14316986.html
Copyright © 2011-2022 走看看