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

  • 相关阅读:
    外键的三种形式
    MySQl创建用户和授权
    Django模板系统
    Django 简介
    jQuery
    JavaScript的BOM和DOM
    JS中的关键字和保留字
    Git 源码管理工具简单入门
    Git使用
    常见的三种SQL分页方式
  • 原文地址:https://www.cnblogs.com/taohuaya/p/14316986.html
Copyright © 2011-2022 走看看