Not So Fast

Overview

Not So Fast is a Chrome extension that prevents accidental clicks caused by layout shifts, when the page jumps and puts a different element under your cursor.

Chrome Web Store extension

Problem

Have you ever gone to click something, only for the page to jump and put a different button or link right under your cursor? That's the problem Not So Fast solves.

These unexpected layout shifts happen all the time: an ad loads late, an image pops in, or a cookie banner pushes everything down. Web developers measure the problem as Cumulative Layout Shift (CLS), one of Google's Core Web Vitals.

Not So Fast detects when the element under your cursor has suddenly changed and starts a split-second "grace period" (0.3 seconds by default, adjustable from 0.2 to 0.65 seconds) during which accidental clicks are ignored. This prevents misclicks like pressing the wrong button, losing your place on the page, or opening dangerous links. It also makes browsing more pleasant, since you don't have to worry as much about clicking the wrong thing, especially if precise pointer control is difficult for you.

Implementation

The extension works by constantly tracking which elements are under the cursor. The cursor's coordinates are updated with onmousemove, and each page has a loop that runs in the background that finds all HTML elements at those coordinates. If this set of elements is different from what it was a number of milliseconds ago (this number is called the grace period), then all click events are disabled. This is achieved by wrapping the original event listeners with logic that calls preventDefault.

The real implementation is slightly more complicated than this, but this should give a general idea. The overall result is supposed to be a high-precision blocking of accidental mouse events with minimal performance overhead. See content.js for more implementation details.

Users can adjust the length of the grace period in the extension's options. They can also pause the extension on a page and/or permanently allowlist domains.

Screenshot of allowlisting interface:

Testing

The extension's scripts are tested as-is, without a browser, using Vitest and jsdom:

npm install
npm test            # or `npm run test:watch`

Each test loads a script into a fresh jsdom window with fake timers and an in-memory fake of the chrome.* APIs (see test/harness/). For content.js, the test decides which element document.elementFromPoint returns, so a layout shift under a stationary cursor is simulated by swapping that element and advancing the clock.

To record a known bug without breaking the suite, write a test of the correct behavior with it.fails: it passes while the bug exists, and once the bug is fixed it should become a plain it.

Progress

The code I have works! Anyone can install the extension on a Chromium-based browser such as Google Chrome or Microsoft Edge. However, there are a few major things I still need to do:

• Optimizing for real-world usage
• Lots of testing, and potential debugging of edge cases
• Paying some more attention to UI
• Getting the extension ready for other browsers (e.g., Firefox, Safari)