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.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 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.