Back

HomeSaver

GitHub
Source Code
HomeSaver

Main Tech Stack

  • Svelte
  • Web Extension
  • Tailwind CSS

Problem

A problem I personally have on the YouTube homepage is a misclick or refresh can instantly change recommendations and make it easy to lose a video I intended to watch.

Solution

This extension automatically saves video links whenever the user visits the homepage. 4 different sets of 6 videos can be saved at one time.

Demo

Notable Tech Used

Svelte

  • Svelte with Vite was used for the popup/main window
  • Used Svelte’s component model and built-in reactivity to simplify UI updates
  • Used Svelte’s built-in fade transition for lightweight UI animations without additional libraries.
  • Chose Svelte to explore a framework beyond React.

Technical Challenges

  • Data Parsing: Originally parsed data from ytInitialData (YouTube’s internal JSON data). However, due to YouTube’s SPA architecture when the user returned to the home page, ytInitialData would not refresh with updated information. Switched to DOM scraping to extract video metadata directly from DOM elements.
  • Single-Page Navigation: YouTube does not reload the page on navigation. Handled YouTube’s single-page navigation by listening for navigation events with MutationObserver, ensuring data capture across route changes.
  • Content Security Policy: Chrome extension CSP blocks inline scripts generated by Svelte. Resolved by configuring Vite to output dynamic imports as separate files instead of inline code.
  • Duplicate Entries and Storage: Users can return to the homepage without a full page reload and have the same recommended videos as last time, potentially creating duplicate entries. Implemented a ring-buffer storage model (4 sets of 6 videos) using chrome.storage.local. It automatically rewrites older entries to maintain a fixed dataset.

Lessons Learned

  • Framework Selection: Learned that choosing the right framework can impact performance and developer experience. Svelte was a good choice for creating lightweight extension UIs.
  • Browser Extension Architecture: Gained experience structuring extensions with content scripts, background scripts, and popup contexts, and deciding when to use messaging vs. storage.
  • Testing Dev/Production Parity: Learned the value of abstraction layers to simplify development and testing. I used a storage abstraction layer that automatically switches between extension chrome.storage.local (production) and localStorage (development). This let me test the popup UI without constantly building and reloading the extension in Chrome.