如何检测Chrome扩展程序中的网络状态更改

Question

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

Answer 1

Chrome extension APIs中没有特定事件可用于此目的。

In＆＃34; How to detect online/offline event cross-browser?＆＃34;建议您使用window.navigator.onLine和事件（from 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。当网络电缆重新插入时，也存在类似的缺乏活动。

您可能会听到的潜在事件

但是，当网络电缆断开连接时，webRequest被触发。特别是以下事件：

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要上网，请使用以下网址：https://www.google.com/searchdomaincheck?format=domain&type=chrome。

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

Answer 2

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

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

启用和不启用wifi ...