如何检测 Chrome 扩展程序中的网络状态变化

Question

我正在编写一个简单的 Chrome 扩展程序，需要该行为来检测设备是否连接到 Internet。我目前正在尝试连接到 ping 服务以检查网络状态，但效率不高。我可以从 Chrome JavaScript API 收听任何事件吗？

Answer 1

Chrome 扩展 API中没有用于此目的的特定事件。

在“如何跨浏览器检测在线/离线事件？ ”中建议您可以使用window.navigator.onLine和事件（来自 MDN）：

window.addEventListener('offline', function(e) { console.log('offline'); });
window.addEventListener('online', function(e) { console.log('online'); });

但是，我使用 Chrome 版本 56.0.2924.87（64 位）在 Windows 10 x64 上进行的测试表明这些都无效。当网络电缆物理断开时，事件既不会在后台脚本中触发，也不会在内容脚本中触发。此外，两者的值都window.navigator.onLine保留true。当网络电缆重新插入时，也出现了类似的活动缺失。

您可能会听到的潜在事件

但是，当网线断开时，awebRequest被触发了。具体有以下事件：

webRequest.onBeforeRequest    ->  arg[0]= Object { frameId: -1, method: "GET", parentFrameId: -1, requestId: "10787", tabId: -1, timeStamp: 1487550094371.293, type: "other", url: "https://www.google.com/searchdomaincheck?format=domain&type=chrome", __proto__: Object }
webRequest.onBeforeSendHeaders->  arg[0]= Object { frameId: -1, method: "GET", parentFrameId: -1, requestHeaders: Array[4], requestId: "10787", tabId: -1, timeStamp: 1487550094371.3901, type: "other", url: "https://www.google.com/searchdomaincheck?format=domain&type=chrome", __proto__: Object }
webRequest.onSendHeaders      ->  arg[0]= Object { frameId: -1, method: "GET", parentFrameId: -1, requestHeaders: Array[4], requestId: "10787", tabId: -1, timeStamp: 1487550094371.437, type: "other", url: "https://www.google.com/searchdomaincheck?format=domain&type=chrome", __proto__: Object }
webRequest.onErrorOccurred    ->  arg[0]= Object { error: "net::ERR_NAME_NOT_RESOLVED", frameId: -1, fromCache: false, method: "GET", parentFrameId: -1, requestId: "10787", tabId: -1, timeStamp: 1487550096326.291, type: "other", url: "https://www.google.com/searchdomaincheck?format=domain&type=chrome", __proto__: Object }

重新连接电缆时，webRequests会触发以下序列：

webRequest.onBeforeRequest    ->  arg[0]= Object { frameId: -1, method: "GET", parentFrameId: -1, requestId: "10938", tabId: -1, timeStamp: 1487550516485.3562, type: "other", url: "https://www.google.com/searchdomaincheck?format=domain&type=chrome", __proto__: Object }
webRequest.onBeforeSendHeaders->  arg[0]= Object { frameId: -1, method: "GET", parentFrameId: -1, requestHeaders: Array[4], requestId: "10938", tabId: -1, timeStamp: 1487550516485.523, type: "other", url: "https://www.google.com/searchdomaincheck?format=domain&type=chrome", __proto__: Object }
webRequest.onSendHeaders      ->  arg[0]= Object { frameId: -1, method: "GET", parentFrameId: -1, requestHeaders: Array[4], requestId: "10938", tabId: -1, timeStamp: 1487550516485.565, type: "other", url: "https://www.google.com/searchdomaincheck?format=domain&type=chrome", __proto__: Object }
webRequest.onHeadersReceived  ->  arg[0]= Object { frameId: -1, method: "GET", parentFrameId: -1, requestId: "10938", responseHeaders: Array[12], statusCode: 200, statusLine: "HTTP/1.1 200"tabId: -1, timeStamp: 1487550518279.5378, type: "other", url: "https://www.google.com/searchdomaincheck?format=domain&type=chrome", __proto__: Object }
webRequest.onResponseStarted  ->  arg[0]= Object { frameId: -1, fromCache: false, ip: "216.58.193.68", method: "GET", parentFrameId: -1, requestId: "10938", responseHeaders: Array[12], statusCode: 200, statusLine: "HTTP/1.1 200", tabId: -1, timeStamp: 1487550518279.653type: "other"url: "https://www.google.com/searchdomaincheck?format=domain&type=chrome", __proto__: Object }
webRequest.onCompleted        ->  arg[0]= Object { frameId: -1, fromCache: false, ip: "216.58.193.68", method: "GET", parentFrameId: -1, requestId: "10938", responseHeaders: Array[12], statusCode: 200, statusLine: "HTTP/1.1 200", tabId: -1, timeStamp: 1487550518279.754type: "other"url: "https://www.google.com/searchdomaincheck?format=domain&type=chrome", __proto__: Object }

因此，看起来要观看的事件的良好候选者是webRequest.onErrorOccurred离线和webRequest.onCompleted在线，两者都带有 URL: https://www.google.com/searchdomaincheck?format=domain&type=chrome。

这需要进一步测试。它仅在上述配置上进行了测试。

Answer 2

在我的 MacBook 上，navigator.onLine如果我打开和关闭 wifi，就会按预期工作。

console.log("Is the browser online? "+ navigator.onLine);

启用和不启用 wifi...