How to detect failed requests via web extension

One of the best things that has happened to web user experience is web extensions. Browsers are powerful, but extensions take functionality to a new level. Web extensions such as cryptocurrency wallets, media players, and other popular plugins have become essential to our daily tasks.

While working on MetaMask, I was immersed in the world of everything running around Ethereum. One of these functions is to ensure: .eth When you type this into the address bar, your domain will resolve to ENS. request https://vitalik.ethBecause it naturally fails .eth is not a natively supported top-level domain, so you should block this invalid request.

// Add an onErrorOccurred event via the browser.webRequest extension API
browser.webRequest.onErrorOccurred.addListener((details) => {
  const { tabId, url } = details;
  const { hostname } = new URL(url);

  if(hostname.endsWith('.eth')) {
    // Redirect to wherever I want the user to go
    browser.tabs.update(tabId, { url: `https://app.ens.domains/${hostname}}` });
  }
},
{
  urls:[`*://*.eth/*`],
  types: ['main_frame'],
});

The web extension provides: browser.webRequest.onErrorOccurred This is how developers can connect to receive invalid requests. This API is ~ no Catch 4** and 5** Response error. In the above case we find: .eth Enter the hostname and redirect to ENS.

you can hire onErrorOccurred There are many reasons, but detecting custom hostnames is a good thing!