Background Project|When I was watching a horror movie on Netflix, I wondered if there was an extension that could hide jump scares. I love horror movies, but I enjoy them more without the sudden scares. I found someone had already made a similar idea (Jumpskip), but it didn’t work anymore probably because Netflix had updated their site.

About Project|So I decided to build a new extension with the same concept. It can mute and/or hide a jump scare five seconds before it happens, and it also provides a list of all the jump scares in the movie.

About Project|I built it using Vue, with Cheerio to scrape jump scare data from wheresthejump.com. Since scraping directly from the client side caused CORS issues, I used Vercel to create an API and handle the scraping server-side.

Flow - Registered background service worker|In Manifest V3, the background script runs as a service worker. It listens for tab update events (chrome.tabs.onUpdated) to detect when a Netflix page has fully loaded or when the route changes. Once the tab status is "complete", the worker sends a "mount" message to the content script.

Flow - Content script|The content script is responsible for bridging the background service worker with the Netflix page itself. When it receives the "mount" message, it first looks into chrome.storage to load the saved configuration and checks whether the extension is currently active. At the same time, it validates the current URL to ensure that the user is actually on a Netflix watch page.

Flow - Content script|If both conditions are satisfied, the script performs a fresh injection. It removes any previously injected root element and script, then appends a new <div id="content-injected"> element into the body. This div also carries the configuration data as a dataset attribute. Right after that, it inserts content-injected.js as a script tag directly into the page which mounted our Vue app.

Flow - Injected Vue Component|The injected Vue component is the final layer that brings the user interface to life once the div and script have been successfully placed on the Netflix watch page. It is responsible for rendering the snackbar, modal, and countdown that notify the user before a jumpscare moment occurs.

Flow - Injected Vue Component|When mounted, the component first loads the configuration that was passed through the injected div, then initializes a connection to the Netflix video player by reading from window.netflix. It continuously waits until the player object is ready, and then retrieves the current video metadata such as title, year, and if applicable, season and episode details. This information is used as payload to get the jumpscare data from wheresthejump.com

Flow - Injected Vue Component|Once the jumpscare data is received, the component stores it and shows a snackbar to inform the user that warnings are available. Depending on the situation, the user can choose to open a modal for more details, or simply let the countdown element monitor the playback position. The countdown listens to the player’s currentTime updates and can trigger visual or audible warnings just before a jumpscare occurs.