Chrome 扩展离线

Question

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

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

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

我真的很难理解 Google 关于 webRequest 的文档 - 如果他们能提供一些示例，那就太好了！

我看过这个问题： How to detect network state changes in a Chrome extension

本文档： 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('offline', (事件) 和 window.addEventListener('在线', (事件) 从内容脚本。似乎是解决这个问题的“简单”和正确的方法！