前段时间做了一个拓展,在公司内部某系统页面进行某些功能补充,通过创建一个右键菜单来实现。该菜单仅在该页面显示。
在拓展刚安装好的一段时间内功能是正常的,但是去其他页面做其他事一段时间后返回该页面,右键点击后功能失效了。通过调试发现,消息并没有接收到,而且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);