0

I am building a chrome extension with a userinterface build in a Shadow DOM (using Vanilla Javascript).

I have disabled the "normal" pop-up window and inject the User Interface when the User is clicking the Chrome Extension icon.

However, I would like the User Interface to be disabled when Chrome is Offline, and reenable when the network connection is back online. I simply made a "offline message" behind the UI - and plan to just "hide" the UI placed in the variable "Canvas"...

I really have a hard time understanding Google's documentation regarding webRequest - it would have been great if they could provide some examples!

I have looked at this question: How to detect network state changes in a Chrome extension

This documentation: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onErrorOccurred

But seem to be stuck! I get this error in the console: "TypeError: Cannot read property 'onErrorOccurred' of undefined"

  • from this (non-working) code(placed in the content script):
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";
}
Lars Ejaas
  • 153
  • 9
  • Content scripts can't use most of chrome API. You need a background script. – wOxxOm Dec 19 '19 at 09:45
  • Thanks wOxxOm! Not sure this is the issue here - I have a background script also - just tried the code in the background script -and get this error: "error handling response: TypeError: Cannot read property 'message' of undefined" - am I simply writing the URL wrong? – Lars Ejaas Dec 19 '19 at 10:09
  • I can't help without seeing the new code. – wOxxOm Dec 19 '19 at 10:20
  • Thanks for trying to help out wOxxOm - that's highly appreciated!!! I think I found a different (working) solution - see my answer... – Lars Ejaas Dec 19 '19 at 10:28

2 Answers2

1

I think I am overcomplicating things here I think I found a better solution using

window.addEventListener('offline', (event) and window.addEventListener('online', (event) from the content script. Seems like the 'simple' and correct way to solve this!

Lars Ejaas
  • 153
  • 9
  • Does this handle when there are DNS errors? E.g. connected to wifi but requests are timing out? – foba Dec 01 '21 at 20:44
  • I do not think so. This is a very basic way of assessing network status. I would definitely expect this check to fail in some edge cases. But for the usecases I work with it's usually fine. – Lars Ejaas Dec 01 '21 at 21:10
0

Working with manifest version 3 extension, I failed trying to subscribe on 'offline' event from background service worker. I tried it like so:

self.addEventListener('offline', cb)

And I came up with:

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

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

This event triggers every time connection has been lost. I assume, because estimated effective round-trip time of the current connection changes in disconnected/connected state.

However, it is an experimental technology and seems doesn't work for Firefox and Safari extensions. More info NetworkInformation/change_event doc on MDN

Roman Savarin
  • 1
  • 1