Chrome 扩展离线

Question

我正在使用 Shadow DOM 中的用户界面构建一个 chrome 扩展（使用 Vanilla Javascript）。

我已禁用“正常”弹出窗口并在用户单击时注入用户界面 Chrome 扩展程序图标。

但是，我希望在 Chrome 离线时禁用用户界面，并在网络连接恢复在线时重新启用。我只是在 UI 后面制作了一条“离线消息”- 并计划只是“隐藏”放置在变量“Canvas”中的 UI...

我真的很难理解谷歌关于 webRequest 的文档——如果他们能提供一些例子就好了！

我看过这个问题： 如何检测 Chrome 扩展中的网络状态变化

本文档： https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onErrorOccurred

• 这里： -https://developer.chrome.com/extensions/webRequest

但是好像卡住了！ 我在控制台中收到此错误：“TypeError: Cannot read property 'onErrorOccurred' of undefined”

• 来自这个（非工作）代码（放置在内容脚本中）：

let target = "https://www.google.com/searchdomaincheck?format=domain&type=chrome"
console.log(target);

console.log({url:`${target}`})

//chrome.webNavigation.onErrorOccurred.addListener(
chrome.webRequest.onErrorOccurred.addListener(
 showOffline(), {url:`${target}`} 
);

webRequest.onCompleted.addListener(
RemoveshowOffline(), {url:`${target}`}  
);

function showOffline() {
  Canvas.style.display = "none";
}

function RemoveshowOffline() {
  Canvas.style.display = "inline-grid";
}

Answer 1

我想我在这里把事情复杂化了我想我找到了一个更好的解决方案

window.addEventListener('离线', (事件) 和 window.addEventListener('在线', (事件) 从内容脚本。似乎是解决此问题的“简单”且正确的方法！

Answer 2

使用清单版本 3 扩展，我尝试从后台服务工作者订阅“离线”事件失败。我这样试过：

self.addEventListener('offline', cb)

我想出了：

navigator.connection.addEventListener('change', changeHandler)

function changeHandler() { 
    const isOnline = navigator.onLine
    // do your stuff
}

每次连接丢失时都会触发此事件。我假设，因为当前连接的估计有效往返时间在断开/连接状态下发生变化。

然而，这是一项实验性技术，似乎不适用于 Firefox 和 Safari 扩展。更多信息 NetworkInformation/change_event doc on MDN