Among the finest issues that ever occurred to t he consumer expertise of the net has been net extensions. Browsers are highly effective however extensions carry a brand new stage of performance. Whether or not it is crypto wallets, media gamers, or different widespread plugins, net extensions have develop into important to daily duties.
Engaged on MetaMask, I’m thrust right into a world of creating all the things Ethereum-centric work. A type of functionalities is guaranteeing that .eth domains resolve to ENS when enter to the deal with bar. Requests to https://vitalik.ethnaturally fail, since .eth is not a natively supported prime stage area, so we have to intercept this errant request.
// Add an onErrorOccurred occasion by way of the browser.webRequest extension API
browser.webRequest.onErrorOccurred.addListener((particulars) => {
const { tabId, url } = particulars;
const { hostname } = new URL(url);
if(hostname.endsWith('.eth')) {
// Redirect to wherever I need the consumer to go
browser.tabs.replace(tabId, { url: `https://app.ens.domains/${hostname}}` });
}
},
{
urls:[`*://*.eth/*`],
varieties: ['main_frame'],
});
Net extensions present a browser.webRequest.onErrorOccurred methodology that builders can plug into to pay attention for errant requests. This API does not catch 4** and 5** response errors. Within the case above, we search for .eth hostnames and redirect to ENS.
You could possibly make use of onErrorOccurred for any variety of causes, however detecting customized hostnames is a superb one!
Common Expressions for the Remainder of Us
In the end you may run throughout a daily expression. With their cryptic syntax, complicated documentation and large studying curve, most builders accept copying and pasting them from StackOverflow and hoping they work. However what in the event you might decode common expressions and harness their energy? In…
Create a CSS Flipping Animation
CSS animations are a whole lot of enjoyable; the fantastic thing about them is that via many easy properties, you’ll be able to create something from a sublime fade in to a WTF-Pixar-would-be-proud impact. One CSS impact someplace in between is the CSS flip impact, whereby there’s…
MooTools Clipboard Plugin
The flexibility to position content material right into a consumer’s clipboard may be extraordinarily handy for the consumer. As an alternative of clicking and dragging down what might be a prolonged doc, the consumer can copy the contents of a particular space by a single click on of a mouse.