How to Detect Failed Requests via Web Extensions

Among the finest issues that ever occurred to t he person expertise of the net has been internet extensions. Browsers are highly effective however extensions deliver a brand new stage of performance. Whether or not it is crypto wallets, media gamers, or different fashionable plugins, internet extensions have develop into important to day by day duties.

Engaged on MetaMask, I’m thrust right into a world of constructing every part Ethereum-centric work. A kind of functionalities is making certain that .eth domains resolve to ENS when enter to the tackle bar. Requests to https://vitalik.ethnaturally fail, since .eth is not a natively supported high stage area, so we have to intercept this errant request.

// Add an onErrorOccurred occasion by way of the browser.webRequest extension API
browser.webRequest.onErrorOccurred.addListener((particulars) => {
  const { tabId, url } = particulars;
  const { hostname } = new URL(url);

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

Internet extensions present a browser.webRequest.onErrorOccurred methodology that builders can plug into to pay attention for errant requests. This API does not catch 4** and 5** response errors. Within the case above, we search for .eth hostnames and redirect to ENS.

You may make use of onErrorOccurred for any variety of causes, however detecting customized hostnames is a good one!