How to Detect Failed Requests via Web Extensions

By  on  

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!

Recent Features

Incredible Demos

  • By
    jQuery UI DatePicker:  Disable Specified Days

    One project I'm currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI's DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the...

  • By
    Do / Undo Functionality with MooTools

    We all know that do/undo functionality is a God send for word processing apps. I've used those terms so often that I think of JavaScript actions in terms of "do" an "undo." I've put together a proof of concept Do/Undo class with MooTools. The MooTools...

Discussion

  1. zakius

    proper browser extensions provided even more for user experience, but sadly these are long gone, we’re stuck with glorified userscripts basically, and to make things worse there are some arbitrary limitations put on them so they just stop working on some pages

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!