DEV Community: keni

Why I Built a Chrome Extension to Make YouTube Less Addictive (And What I Learned Shipping It)

keni — Fri, 19 Jun 2026 02:04:52 +0000

I open YouTube with a clear intention.

Maybe I want to watch a tutorial, research a feature for a side project, or listen to something educational while working.

But somewhere between opening YouTube and finding the video I actually need, the algorithm takes over.

A recommended video appears. Then Shorts. Then comments. Then a rabbit hole I never asked for.

Thirty minutes later, I've forgotten why I opened YouTube.

YouTube Wasn't the Problem

The frustrating part is that I genuinely use YouTube for learning. Some of the most valuable programming knowledge I've picked up came from YouTube creators.

The problem wasn't the content. It was everything surrounding the content.

Most productivity extensions approach this one of two ways:

Block the site entirely
Limit access with a timer

Neither fit my situation. I watch tutorials almost every day. YouTube is a tool I need.

What I wanted was different:

Remove the addictive parts. Keep the useful parts.

That became the core idea behind YouTube Dopamine Detox.

What the Extension Does

The extension targets specific dopamine triggers — the design patterns that turn a 5-minute video into a 2-hour session.

Hide Shorts

Shorts are the biggest time sink. One leads to another. The extension removes every Shorts entry point on the page.

Hide the Home Feed

The homepage is optimized for engagement, not productivity. Removing it makes YouTube feel like a search engine instead of a social media feed.

Hide Related Videos

Even while watching a useful tutorial, the sidebar is constantly trying to redirect you. Removing it keeps focus on the original task.

Disable Autoplay

One video turning into ten is almost always caused by autoplay. Simple to implement, surprisingly effective.

Purpose Check

This is the feature I'm most proud of.

Before entering YouTube, the user is redirected to a lightweight page with one question:

"What are you planning to watch?"

The answer is stored locally. Then they continue.

The friction is intentional. Typing a purpose makes you stop and think. Sometimes that's enough to realize: "Actually, I don't need YouTube right now."

That moment alone is worth the feature.

Tech Stack

Layer	Technology
UI Framework	React + TypeScript
Build Tool	Vite + CRXJS
Styling	Tailwind CSS + daisyUI
Extension API	Chrome Manifest V3

I structured it as a monorepo from the start:

youtube-dopamine-detox/
├── apps/
│   ├── extension/
│   └── web/
└── packages/
    └── shared/

Not because I needed the complexity, but because I knew I'd eventually want a landing page, shared types, and a privacy policy — all in one repo.

Fighting YouTube's SPA Architecture

Building the features was the easy part. Making them reliable was the real engineering challenge.

YouTube is a massive Single Page Application. My initial assumption — "select an element, hide it, done" — lasted about ten minutes.

When users navigate inside YouTube:

URLs change without full page reloads
Components re-render
DOM elements get recreated from scratch

Features that worked on initial load would silently disappear after navigation.

To make the extension resilient, I ended up combining:

Initial page processing on load
URL change detection
MutationObserver to catch DOM updates
Re-applying rules after each navigation event

Most of the engineering effort went into resilience, not functionality. The features themselves are simple. Making them survive YouTube's rendering cycle was the actual problem.

No Backend, No Accounts — Intentionally

A lot of developers reach for auth, databases, and APIs by default. I skipped all of it.

Everything is stored locally using Chrome Storage. Here's why that was the right call for an MVP:

Faster development — No infrastructure to set up. No deployment pipeline. Ship faster, get feedback faster.

Simpler privacy story — No data ever leaves the device. The privacy policy becomes a single paragraph.

Easier store review — The Chrome Web Store asks detailed questions about data collection. "No data is transmitted externally" is the simplest possible answer.

Zero maintenance overhead — No servers. No database costs. No uptime to monitor.

For an early-stage product, simplicity wins every time.

Shipping Is More Than Code

Once the extension was built, I assumed the hard part was over.

It wasn't.

Publishing to the Chrome Web Store required: store descriptions, icons in multiple sizes, screenshots, promotional assets, a privacy policy, permission justifications, and testing documentation.

As engineers, we tend to think "the product is done when the code works." In practice, that's when the product work begins.

The store required a Privacy Policy URL, which meant I needed a public website. I built a landing page with React and deployed via Cloudflare Pages. Because of the monorepo setup, the build config needed a small tweak:

Build command:    npm run build -w apps/web
Output directory: apps/web/dist

Not complicated, but easy to miss if you've never done it before.

What I Took Away From This

MVP scope matters more than architecture.
A simple product shipped today beats a perfect architecture that ships never.

Local-first is underrated.
For a lot of early products, Chrome Storage (or localStorage) is enough. Not every MVP needs a backend.

Small friction changes behavior.
People don't always need restrictions. Sometimes they just need a moment to pause before acting. The Purpose Check feature taught me that.

Links

I'm building in public and sharing both the wins and the mistakes along the way. If you've ever lost time to YouTube's recommendation engine while trying to learn something, I'd love to hear how you handle it.

How I implemented Picture-in-Picture in React (with full code + tips)

keni — Sun, 05 Oct 2025 01:46:32 +0000

Hey everyone 👋

I recently added Picture-in-Picture (PiP) support to my React app — and honestly, it was way easier than I expected.

So, this post is both a memo for my future self and a beginner-friendly guide for anyone who wants to add PiP to their web app.

Let’s dive in 🚀

🎬 What is Document Picture-in-Picture?

Normally, Picture-in-Picture is used for videos —

like when you pop out a YouTube video and keep it on the corner of your screen.

But now, Chrome 116+ (and other Chromium browsers like Edge) added

👉 Document Picture-in-Picture API,

which allows you to open any HTML/React component inside a small floating window that stays on top.

That means you can show:

A timer that stays visible while switching tabs 🕒
A chat box or mini UI
A floating widget (music, notes, weather, etc.)

⚙️ Features and Limitations

Item	Description
✅ Supported browsers	Chrome / Edge 116+
🚫 Not supported	Safari, Firefox
🪟 Only one PiP window	You can’t open multiple windows
🎮 Interaction	You can use click / keyboard inside the PiP window
🧱 Size	Small window — keep your UI minimal

💻 React + Vite Example

Here’s how I implemented it in my project.

/src/hooks/useDocumentPiP.tsx

import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
import { createRoot, Root } from 'react-dom/client';

declare global {
  interface Window {
    documentPictureInPicture?: {
      requestWindow: (options?: { width?: number; height?: number }) => Promise<Window>;
    };
  }
}

// Copy CSS styles from main document to PiP window
const copyStyles = (source: Document, target: Document) => {
  Array.from(source.styleSheets).forEach((styleSheet) => {
    try {
      const rules = styleSheet.cssRules;
      const style = target.createElement('style');
      style.textContent = Array.from(rules)
        .map((rule) => rule.cssText)
        .join('\n');
      target.head.appendChild(style);
    } catch (error) {
      const ownerNode = styleSheet.ownerNode as HTMLLinkElement | null;
      if (ownerNode?.tagName === 'LINK' && ownerNode.href) {
        const link = target.createElement('link');
        link.rel = 'stylesheet';
        link.href = ownerNode.href;
        target.head.appendChild(link);
      }
    }
  });
};

export const useDocumentPiP = () => {
  const pipWindowRef = useRef<Window | null>(null);
  const pipRootRef = useRef<Root | null>(null);
  const [isOpen, setIsOpen] = useState(false);

  const isSupported = useMemo(
    () => typeof window !== 'undefined' && 'documentPictureInPicture' in window,
    []
  );

  const cleanup = useCallback(() => {
    if (pipRootRef.current) {
      pipRootRef.current.unmount();
      pipRootRef.current = null;
    }
    pipWindowRef.current = null;
    setIsOpen(false);
  }, []);

  const openPiP = useCallback(
    async (content: ReactNode, options?: { width?: number; height?: number }) => {
      if (!isSupported || !window.documentPictureInPicture) {
        throw new Error('Document Picture-in-Picture is not supported.');
      }

      cleanup();

      const pipWindow = await window.documentPictureInPicture.requestWindow(options);
      pipWindowRef.current = pipWindow;

      pipWindow.document.body.innerHTML = '';
      pipWindow.document.body.style.margin = '0';
      pipWindow.document.body.style.display = 'flex';
      pipWindow.document.body.style.alignItems = 'center';
      pipWindow.document.body.style.justifyContent = 'center';

      copyStyles(document, pipWindow.document);

      const container = pipWindow.document.createElement('div');
      container.style.width = '100%';
      container.style.height = '100%';
      pipWindow.document.body.appendChild(container);

      const root = createRoot(container);
      root.render(content);
      pipRootRef.current = root;
      setIsOpen(true);

      const handleClose = () => cleanup();
      pipWindow.addEventListener('pagehide', handleClose, { once: true });
      pipWindow.addEventListener('beforeunload', handleClose, { once: true });
    },
    [cleanup, isSupported]
  );

  const closePiP = useCallback(() => {
    pipWindowRef.current?.close();
    cleanup();
  }, [cleanup]);

  return { isSupported, isOpen, openPiP, closePiP };
};

/src/components/PictureInPictureButton.tsx

import { useCallback, useState } from 'react';
import { MdPictureInPictureAlt } from 'react-icons/md';
import { Timer } from './Timer';
import { useDocumentPiP } from '../hooks/useDocumentPiP';

export const PictureInPictureButton = () => {
  const { isSupported, isOpen, openPiP, closePiP } = useDocumentPiP();
  const [isPending, setIsPending] = useState(false);

  const handleClick = useCallback(async () => {
    if (isPending) return;
    if (isOpen) {
      closePiP();
      return;
    }

    try {
      setIsPending(true);
      await openPiP(
        <div className="bg-base-100 text-base-content w-full h-full flex flex-col items-center justify-center gap-4 p-4">
          <Timer />
          <span className="text-sm font-medium">Picture in Picture</span>
        </div>,
        { width: 360, height: 220 }
      );
    } catch (error) {
      console.error('Failed to open PiP', error);
    } finally {
      setIsPending(false);
    }
  }, [closePiP, isOpen, isPending, openPiP]);

  if (!isSupported) return null; // Hide button if PiP is unsupported

  return (
    <button
      type="button"
      className="btn btn-outline btn-sm"
      onClick={handleClick}
      disabled={isPending}
      title="Open Picture-in-Picture"
    >
      <MdPictureInPictureAlt size={16} className="mr-1" />
      {isOpen ? 'Close PiP' : 'Open PiP'}
    </button>
  );
};

🧱 Common Pitfalls

Issue	Cause	Fix
CSS not applied	Cross-origin stylesheet error	Re-insert using `<link>` fallback
Blank screen	`<body>` rendered before ready	Use `await` properly or React 18’s `createRoot`
Can’t open two windows	API limitation	Use `isOpen` state to toggle

🧪 Testing Checklist

Open chrome://flags/#document-picture-in-picture-api → Make sure it’s Default or Enabled (not Disabled)
Run npm run dev
Click the PiP button → Small window should appear
Switch tabs — the PiP window should stay visible
Press Esc or close it manually — should return to normal

☕ Final Thoughts (and a Small Plug)

Implementing PiP in React was way easier than I expected.

It’s still limited to Chrome/Edge, but for timers, widgets, or chat tools, it’s surprisingly practical.

I’ve already added this feature to my own app —

👉 Pomodoro Flow 🍅

A minimal Pomodoro timer you can keep floating while working.

If you want to stay focused, check it out!

🔗 References

🧭 Outro

If this post helped you, drop a ❤️ or a comment below — it really motivates me 🙌

Building Pomodoro Flow: How I Made a YouTube-Integrated Pomodoro Timer with React, Zustand, and TypeScript

keni — Mon, 25 Aug 2025 05:46:07 +0000

Introduction

Hi everyone, I’m Keni (@keni_solopreneur).

This is my first post on DEV, and I’d like to share the journey of creating my side project: Pomodoro Flow 🍅 — a minimalist Pomodoro timer that integrates YouTube directly.

I’m not a professional software engineer by trade. I actually started this project simply because I wanted a focus timer that could play my favorite YouTube music without having to constantly switch tabs. What started as a small frustration turned into a real project where I learned React, TypeScript, Zustand, and a lot about building in public.

In this post, I’ll go through:

Why I decided to build this tool in the first place
The stack I chose (React, Vite, TypeScript, Zustand) and why
How I integrated YouTube with react-youtube and the IFrame API
How Zustand made state management so much simpler
The challenges I faced and lessons I learned along the way
What I’m planning next for this project

The Problem: Timer + YouTube = Too Many Tabs

I’ve always liked the Pomodoro Technique: 25 minutes of focused work, followed by a short break. It helps me stay on track, especially when working on personal projects after my day job.

But there was always a catch. Most Pomodoro apps provide built-in music or ambient sounds. And while that works for some people, it never worked for me. Some days I need lo-fi hip hop, other days it’s rain sounds, and sometimes it’s even game commentary running in the background. The music of the day matters a lot for my focus.

At first, my workflow looked like this:

One tab open for the timer
Another tab open for YouTube
Constant switching back and forth

It was distracting and killed my flow.

So I thought: what if I just build the tool I need myself?

Learning React in 3 Weeks (as a Non-Engineer)

Here’s the honest part: I had zero web development experience before this.

I’m a full-time automation engineer, but my work is more about Python and PLCs than frontend. So, starting with React and TypeScript felt intimidating.

To get started, I did a few things:

Watched YouTube tutorials on React basics
Took a Udemy course to understand component-based development
Used ChatGPT and Cline (AI coding assistant) to accelerate learning
Built small test components before putting them into my app

Three weeks later, I had my MVP: a Pomodoro timer with a working YouTube embed.

After another three weeks of refining the UI, fixing bugs, and polishing the UX, I had something that I felt confident enough to share: Pomodoro Flow.

Tech Stack

React (with Vite) → Fast, modern, and great DX
TypeScript → Type safety made me more confident, especially as a beginner
Zustand → Lightweight and intuitive state management
react-youtube → A simple wrapper around the YouTube IFrame Player API

I chose these tools because I wanted something minimal but reliable. Redux felt like overkill for this project, and Context API alone wasn’t enough for the level of state management I needed.

Key Feature: Syncing Timer and YouTube Playback

The core of Pomodoro Flow is simple:

When the timer starts → play the YouTube video
When the timer pauses → pause the video

Here’s the simplified implementation:

import YouTube from 'react-youtube';
import { useTimerStore } from './stores/timerStore';
import { useYouTubeStore } from './stores/youtubeStore';
import { useEffect } from 'react';

const YouTubePlayer = () => {
  const { isRunning } = useTimerStore();
  const { player, setPlayer } = useYouTubeStore();

  useEffect(() => {
    if (!player) return;
    isRunning ? player.playVideo() : player.pauseVideo();
  }, [isRunning, player]);

  const onReady = (event: any) => {
    setPlayer(event.target);
  };

  return <YouTube videoId="YOUR_VIDEO_ID" onReady={onReady} />;
};

Why Zustand?

I briefly considered Redux, Context API, and even Recoil. In the end, Zustand won because:

It’s lightweight (no boilerplate, just functions and hooks)
State slices make it easy to subscribe only to what you need
It plays nicely with TypeScript

Here’s a simple example of the timer store:

// src/stores/timerStore.ts
import { create } from 'zustand';

type TimerState = {
  isRunning: boolean;
  start: () => void;
  stop: () => void;
};

export const useTimerStore = create<TimerState>((set) => ({
  isRunning: false,
  start: () => set({ isRunning: true }),
  stop: () => set({ isRunning: false }),
}));

Challenges and Solutions

YouTube Player Load Timing

One issue I faced was that sometimes the YouTube player wasn’t fully ready when the timer state changed.

✅ Solution: Only control playback once onReady sets the player instance in Zustand.

Avoiding Unnecessary Re-renders

Another problem was re-rendering too many components when state changed.

✅ Solution: With Zustand, I could subscribe only to the specific state slice (isRunning) that I needed, preventing unrelated UI updates.

TypeScript with Third-Party Libraries

The react-youtube package didn’t provide perfect type support.

✅ Solution: I wrote wrapper types and interfaces to ensure type safety across my codebase.

The Result: Pomodoro Flow

After about 6 weeks of learning and building, the result is Pomodoro Flow — a minimal Pomodoro timer that integrates directly with YouTube.

👉 Try it here: pomodoro-flow.com

Key features include:

Paste any YouTube link you want
Play your favorite music, ASMR, or ambient sounds while working
No more switching tabs — just one clean space to focus

What’s Next?

This is still just an MVP, but I already have a roadmap in mind:

Spotify and other music service integrations
Simple task management features
Analytics to visualize productivity sessions

I’ll continue building in public and sharing progress here on Dev.to. 🚀

Final Thoughts

This project started from a small personal frustration, but it became a great learning journey with React, TypeScript, Zustand, and the YouTube API.

If you’re considering starting your own side project, my advice is simple: just start.

You’ll learn far more than you expect.

👉 Try Pomodoro Flow: https://pomodoro-flow.com

👉 Follow me here on Dev.to — I’ll be sharing more updates and lessons learned.

Thanks for reading, and happy focusing! 🍅