WikiZoom

A Force Touch inspired preview manager for Wikipedia to enhance the browsing experience.

Links

Chrome Web Store

Tools

JavaScript (ES6), SASS, Gulp, Git, Chrome Platform APIs

Context

This Chrome extension was created out of a need to improve the Wikipedia browsing experience in an elegant and seamless way by reducing the number of tabs that a user opens when browsing Wikipedia. As frequent users of Wikipedia, we often found ourselves reading an entry and coming across a link or article that peaked our interest. Historically when this happens, a typical user is faced with one of two options: either they open the link in a new tab or they navigate away from their current page. Enter “WikiZoom”. With this extension, users can double click on links on Wikipedia and a the mobile version of the link will be loaded in a small preview window, similar to the dictionary lookup popover found on macOS, thereby streamlining their browsing experience. To further enhance the browsing experience, pages are pre-downloaded and cached locally as users hover over links with their cursor so that they can be loaded faster on double click. For optimal performance, this cache is cleared when the user ends their current browsing session.

Highlights

Notable hurdles faced when developing this extension included:

  • Avoiding cross-site scripting (XSS) warnings and errors when injecting the iframe into the page and controlling internal redirects within the preview window
  • Implementing a dynamic caching system to reduce preview load times
  • Persisting custom user settings between browsing session and across Chrome instances on multiple computers
  • Positing the iframe in the DOM relative to the link as well as using the appropriate triangular indicator to point to the link from which the preview was generated