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!
9 Mind-Blowing Canvas Demos
The
<canvas>element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that…
I’m an Impostor
This is the hardest thing I’ve ever had to write, much less admit to myself. I’ve written resignation letters from jobs I’ve loved, I’ve ended relationships, I’ve failed at a host of tasks, and let myself down in my life. All of those feelings were very…
Source link
