预加载页面消息的脚本失败
Chrome扩展中出现了一些奇怪的事情。
内容脚本：
console.log('content');
chrome.extension.onRequest.addListener(function(request, sender, sendResponse){
console.log('request received');
sendResponse();
});
chrome.extension.sendRequest( JSON.stringify({'msg': 'page_loaded'}) );
它只是监听扩展消息，并在加载页面时将消息发送到后台。
后台脚本：
console.log('bg');
chrome.extension.onRequest.addListener(function(request, sender, sendResponse){
sendResponse();
chrome.tabs.sendRequest(
sender.tab.id,
JSON.stringify({'msg': 'page_loaded_bg_receive'}),
function(){
console.log('sendRequest page_loaded_bg_receive callback');
});
});
它正在侦听消息并将消息发送到发件人选项卡。
它似乎在工作，至少在大多数情况下，页面日志中显示'收到请求'。
在用户点击“输入”之前，输入Chrome的URL有时会加载输入的地址。 这是一个奇怪的行为：页面加载，content-script运行，将消息发送到后台，但是当后台发回消息时 - 它会失败并显示后台日志消息：
端口错误：无法建立连接。 接收结束不存在。 miscellaneous_bindings：184 chromeHidden.Port.dispatchOnDisconnect miscellaneous_bindings：184
这是Chrome的错误吗？ 如何将消息发送到预加载标签？
这是重现此类行为的人为最小样本。 我需要在处理消息后多次调用'chrome.tabs.sendRequest'，因此调用'sendResponse'不是解决方案。
解决方案基于文章https://developers.google.com/chrome/whitepapers/pagevisibility。 如果document.webkitVisibilityState不是'hidden'或'prerender'，我在其他地方听'webkitvisibilitychange'并等待document.webkitVisibilityState不是'hidden'或'prerender'，我运行内容脚本代码。 我认为检查'prerender'就足够了，但是当我打开一个新的空标签页时，它会加载document.webkitVisibilityState ='hidden'页面，并且此页面也没有收到后台消息。
function isDocumentReady() {
return document.webkitVisibilityState != "hidden" && document.webkitVisibilityState != "prerender";
}
if (isDocumentReady())
main();
else {
function onVisibilityChange() {
if (!isDocumentReady())
return;
document.removeEventListener(
"webkitvisibilitychange",
onVisibilityChange,
false);
main();
}
document.addEventListener(
"webkitvisibilitychange",
onVisibilityChange,
false);
}