Detect Failed Requests by way of Net Extensions

October 2, 2023

2

Among the best issues that ever occurred to t he person expertise of the online has been internet extensions. Browsers are highly effective however extensions convey a brand new stage of performance. Whether or not it is crypto wallets, media gamers, or different in style plugins, internet extensions have change into important to day-after-day duties.

Engaged on MetaMask, I’m thrust right into a world of creating every little thing Ethereum-centric work. A kind 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 high 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 would like the person to go
    browser.tabs.replace(tabId, { url: `https://app.ens.domains/${hostname}}` });
  }
},
{
  urls:[`*://*.eth/*`],
  sorts: ['main_frame'],
});

Net extensions present a browser.webRequest.onErrorOccurred technique 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 can make use of onErrorOccurred for any variety of causes, however detecting customized hostnames is a good one!

Picture Information URIs with PHP
When you troll web page markup like me, you have little question seen using knowledge URI’s inside picture src attributes. As an alternative of offering a conventional deal with to the picture, the picture file knowledge is base64-encoded and stuffed inside the src attribute. Doing so saves…
Utilizing MooTools For Opacity
Though it is potential to obtain opacity utilizing CSS, the hacks concerned aren’t fairly. When you’re utilizing the MooTools JavaScript library, opacity is as simple as utilizing a component’s “set” technique. The next MooTools snippet takes each picture with the “opacity” class and units…