One of the best things that ever happened to t he user experience of the web has been web extensions. Browsers are powerful but extensions bring a new level of functionality. Whether it’s crypto wallets, media players, or other popular plugins, web extensions have become essential to every day tasks.

Working on MetaMask, I am thrust into a world of making everything Ethereum-centric work. One of those functionalities is ensuring that .eth domains resolve to ENS when input to the address bar. Requests to https://vitalik.ethnaturally fail, since .eth isn’t a natively supported top level domain, so we need to intercept this errant 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'], }); 

Web extensions provide a browser.webRequest.onErrorOccurred method that developers can plug into to listen for errant requests. This API does not catch 4** and 5** response errors. In the case above, we look for .eth hostnames and redirect to ENS.

You could employ onErrorOccurred for any number of reasons, but detecting custom hostnames is a great one!

The post How to Detect Failed Requests via Web Extensions appeared first on David Walsh Blog.

David Walsh Blog