浏览器拓展消息通信在页面闲置一段时间后失效是什么原因?

前段时间做了一个拓展,在公司内部某系统页面进行某些功能补充,通过创建一个右键菜单来实现。该菜单仅在该页面显示。

在拓展刚安装好的一段时间内功能是正常的,但是去其他页面做其他事一段时间后返回该页面,右键点击后功能失效了。通过调试发现,消息并没有接收到,而且chrome.tabs.sendMessage/chrome.runtime.onMessage API也存在间隔一段时间后通信失效的问题。

核心代码如下,在background中创建了一个右键菜单,点击菜单时通过postMessage发送消息给content,在content中监听消息,回调中执行相关逻辑。

// background
function onDecodeMenuClicked(tab, info) {
    const payload = {
        type: 'onDecodeMenuClicked',
        from: 'contextMenu',
        data: info
    };
    const origin = new URL(tab.url).origin
    window.postMessage(payload, origin);
}


function createContextMenus() {
    chrome.contextMenus.create({
        id: 'kibana-filed-decode',
        title: 'kibana field decode',
        contexts: ['page', 'selection'],
        documentUrlPatterns: ["*://aaa.bb.cc/*"],
    });

    chrome.contextMenus.onClicked.addListener(function(info, tab) {
        if (info.menuItemId === 'kibana-filed-decode') {
            chrome.scripting.executeScript({
                target: {
                    tabId: tab.id,
                },
                func: onDecodeMenuClicked,
                args: [tab, info]
            })
        }
    });
}

chrome.runtime.onInstalled.addListener(reason => {
    createContextMenus();
})


// content
function onMessageFromExtension(data, sender, response) {
    console.log('chrome.runtime.onMessage: ', data, sender);
    if (data && data.type === 'onDecodeMenuClicked') {
        console.log('onMessage event: ', data);
        // 调用其他干活的函数
    }

    response('收到消息了: ', sender);
}
chrome.runtime.onMessage.addListener(onMessageFromExtension);
阅读 877
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题