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!
