oliverdunk/how-fugu-is-the-web

An extension to shine light on the Project Fugu 🐡 APIs web apps want to use.

Project Fugu 🐡 API Detector

An extension to shine light on the Project Fugu 🐡 APIs web apps try to use.

How it works

API data

The raw data for the different Project Fugu 🐡 APIs is curated in the fugu-api-data project, so keeping the list of APIs updated is a straightforward task independent of the extension.

API detection

The extension monitors the requests a page makes via the chrome.webRequest.onBeforeRequest.addListener() API. Each response body, grouped by main frame, JavaScript, and Web App Manifest response bodies, is then run through a set of regular expressions like /navigator\.hid\.requestDevice\s*\(/g to determine if the code hints at a Project Fugu 🐡 API potentially being used.

Browser support detection

Most Project Fugu 🐡 APIs are easily feature-detectable by checking for the existence of interfaces or properties, for example, as in 'BarcodeDetector' in window. Other APIs require a ServiceWorkerRegistration, but luckily the popup window in Manifest V3 extensions uses a service worker, so it can be used via an IIFE that can be run in the client or the service worker. An example is (async () => 'periodicSync' in (await navigator.serviceWorker?.ready || self.registration))().

The support categories are listed below:

• ✅ Supported by your browser.
• 🚫 Not supported by your browser.
• 🤷 Support unknown for your browser. (The only way to know would be user-agent sniffing.)

Deep-linking

The extension makes use of Text Fragment URLs to deep-link to the occurrence of a detected API. The source code gets rendered in a helper HTML page controlled by the extension, since it is impossible to directly link to view-source: protocol links and non-document resources with Text Fragment URLs.

Limitations

• The chrome.webRequest.onBeforeRequest.addListener() API unfortunately does not "see" requests that are handled by a service worker (crbug.com/766433). There are three possible workarounds for this:
  • Hard-reload via ⌘/ctrl+shift+r.
  • Open DevTools and check the Bypass for network checkbox in the Service Worker section of the Application tab.
  • Clear storage in the Storage section of the Application tab.
• The extension only does static code analysis, that is, there is no guarantee that the app actually uses the code snippet where a Project Fugu 🐡 API was detected.
• Heavily minified code will not be detected. For example, if an app minifies navigator.clipboard.write() to const nav = navigator; nav.clipboard.write(), the extension will not detect this.

License

Apache 2.0.