How to Detect Failed Requests via Web Extensions

Created on November 12, 2023 at 11:42 am

How to Detect Failed Requests via Web Extensions

One CARDINAL 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 PRODUCT , I am thrust into a world of making everything Ethereum-centric work. One CARDINAL of those functionalities is ensuring that .eth domains resolve to ENS ORG when input to the address bar. Requests to https://vitalik.eth naturally 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 ORG browser.webRequest.onErrorOccurred.addListener((details) => { const { tabId, url } = details; const { hostname } = new URL(url); if(hostname.endsWith(‘.eth’ ORG )) { // 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 ORG does not catch 4 CARDINAL ** and 5 CARDINAL ** response errors. In the case above, we look for .eth hostnames and redirect to ENS ORG .

Connecting to blog.lzomedia.com... Connected... Page load complete