DEV Community: Humayoun Baig

Removing a streaming overlay without blacking out the video

Humayoun Baig — Tue, 06 Oct 2026 15:20:42 +0000

Streaming apps often lay a dark gradient over the picture so titles and controls stay readable. I wanted that layer gone, not the movie. The result is ClearView, a small Chrome extension with a slider from the original shade to fully removed.

Apart from Netflix almost all major streaming service has this annoying blur on hover that takes too long to disappear for my liking.

The extension is still a WIP but can be used by cloning the repo for now,
Tested on HBO Max, And Apple TV

Apple TV is a bit of an hassle to get right...for now

At 100% reduction, tv.apple.com went black. The extension had found a dark element the size of the player and set its opacity to 0. That element was not the shade. It was a parent of the video. Fading it faded the picture too, and the page behind the player is black.

Two details in Apple's player make this easy to get wrong:

The <video> sits in an open shadow root, so document.querySelector("video") never sees it.
The shade is a full-size ::after gradient on an ancestor. elementsFromPoint() does not return pseudo-elements, and Node.contains() does not cross the shadow boundary, so a parent can look like a harmless overlay.

Kiril Ivanov makes the case for a persistent content script when a page keeps mutating, rather than a one-shot chrome.scripting injection. Yuan Zhou is blunter about the cost: on a site you do not control, you only see the DOM, the markup will change, and a content script that assumes the wrong shape can break the host page. Both showed up while I was deciding not to hard-code one streaming service.

The rule that fixed it

Never change the opacity of an element that owns the video, including ownership that crosses a shadow root. Fade the gradient pseudo-element instead.

Finding the video means walking open shadow roots:

function collectVideos(root, found) {
  if (!root?.querySelectorAll || found.length > 12) return;
  root.querySelectorAll("video").forEach((video) => found.push(video));
  root.querySelectorAll("*").forEach((element) => {
    if (element.shadowRoot) collectVideos(element.shadowRoot, found);
  });
}

Ownership has to follow the same path. element.contains(video) is false for a light-DOM ancestor of a shadow-hosted video.


function ownsMedia(element, video) {
  let node = video;
  const seen = new Set();
  while (node && !seen.has(node)) {
    seen.add(node);
    if (node === element) return true;
    if (node.parentElement) {
      node = node.parentElement;
      continue;
    }
    const root = node.getRootNode?.();
    node = root instanceof ShadowRoot ? root.host : null;
  }
  return false;
}

You cannot set a pseudo-element's opacity from element.style. A content-script stylesheet can, and the slider only changes a custom property:

[data-clearview-pseudo~="after"]::after {
  opacity: var(--clearview-remaining) !important;
}

The script marks an ancestor only when ::before or ::after is absolutely positioned, covers most of that ancestor, and paints a dark translucent color or a dark gradient. Separate overlay elements that do not contain the video still use normal opacity. Interactive controls are left alone. There is a click-to-hide picker for the ones you do want gone.

On the I, Robot title page, the gradient's computed opacity went to 0 while the video and its black wrapper stayed at 1. The artwork stayed on screen.

What I would not do again
I would not treat "dark and about the size of the video" as enough. A player shell is often exactly that, and its background is the letterbox, not the scrim. I would also not observe attribute mutations on a busy player. Kouta hit an infinite callback loop in Gmail by watching attributes. Child-list changes, debounced, were enough here too.

Settings stay in chrome.storage.local, per site. Nothing about the page is sent anywhere.

The source is here: HumayounBaig/overlay-blocker-chrome-ext

Marigold: Hacktoberfest Weekend Challenge

Humayoun Baig — Sat, 03 Oct 2026 22:26:57 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

I built Marigold for my wife.
The weeks after birth are full of two problems that get treated badly online: pain, and the pressure to “drop the baby weight.” Her back, pelvis, incision or perineum, neck, and wrists take a daily beating from feeding and carrying. At the same time, a lot of apps answer that with a calorie target. That is a bad answer if she is healing, and a worse one if she is feeding a baby with her body.
Marigold is a private recovery companion. Each day she logs sleep, energy, mood, where it hurts, bleeding, and a few symptoms that should never be coached through. An open-weight model on our computer writes a short plan from a fixed catalog:

one gentle movement that matches how far she is from birth, whether a clinician has cleared more than daily life, and what hurts today
meals that keep her fed, including a snack when she is nursing, pumping, or running on empty
two comfort steps for the loudest pain
a plain instruction to call a clinician when the check-in says so Weight can be written down. It is not allowed to be the loudest thing in the room. If the number is falling faster than about a pound a week while she is still feeding the baby with her body, Marigold tells her to eat the snack and keep the walks easy. Her notes stay in the browser on that machine. There is no account. ## Demo There is no hosted demo. The model is the point, and it runs at home.

git clone https://github.com/HumayounBaig/marigold.git
cd marigold
npm install
ollama serve
ollama pull qwen2.5:3b
npm run dev

Open http://127.0.0.1:43123.
The first screen asks for her name, the baby’s birth date, how she gave birth, how she is feeding, and whether a clinician has cleared more movement. After that, Today is a check-in. Move, Nourish, Soothe, and Progress are the rest of the house: the session player, the plates, the pain notes, and an optional weight record.
If Ollama is asleep, the same catalog still builds the day and says so. The check-in still never leaves the computer.

Code

https://github.com/HumayounBaig/marigold

HumayounBaig / marigold

Marigold

Marigold is a private postpartum recovery companion. It was made for one person: the weeks after birth, when weight is changing, pain is ordinary and sometimes not, and the last thing she needs is an account on someone else’s server.

Each day she logs sleep, energy, mood, where it hurts, and a few symptoms that should never be coached through. An open-weight model, running on the same computer, writes a short plan from a fixed catalog:

a movement small enough for her stage, clearance, and today’s pain
meals that keep recovery fed, including a snack when she is nursing or running on empty
two comfort practices for the places that hurt
a plain instruction to call a clinician when the check-in says so

Weight can be recorded. The app will not set a calorie target, and it will say so if the loss is fast enough to threaten energy…

View on GitHub

The pieces that matter:

src/lib/catalog.ts holds the movements, meals, and comfort steps. The model is not allowed to invent a workout.
src/lib/recovery.ts decides what she is allowed to do, writes the prompt, and throws away model output that leaves the catalog or starts talking about deficits.
src/app/api/plan/route.ts sends that prompt only to Ollama on 127.0.0.1. ## How I Built It The open model is Qwen2.5 3B Instruct, Apache-2.0 weights, served by Ollama on the same machine as the app. A day plan is one local chat completion. No cloud model is in the path. The app around it is Next.js, TypeScript, and Tailwind. She gets a check-in, a session player, a meal list, a pain guide, and a quiet weight record. Safety is not left to the prompt. Before the model speaks, the server drops anything she should not be offered yet: core work before clearance, bridges and squats when the pelvis is loud, walks when bleeding is more than light, and every workout when the check-in includes heavy bleeding, chest pain, a severe headache, a one-sided swollen calf, fever, a worrying incision, or thoughts of harm. Those days become rest, and the note points to a person. In the US that includes 988 and Postpartum Support International at 1-800-944-4773. The model has to answer in JSON and may only use ids from that day’s allowed list. If it picks two snacks and no plate, or writes “cut calories,” or names a session she will not actually do, that part is replaced. The explanation has to name the movement that remains. Another open model is one environment variable: OLLAMA_MODEL. The behavior she gets is the catalog and systemPrompt() in src/lib/recovery.ts, which we can edit. ## Why Does Open Innovation Matter? This is health information from the hardest weeks of a marriage: pain, bleeding, mood, feeding, weight. A closed coaching app would upload that to a company we do not control, then answer with a model we cannot open, swap, or tell to refuse a calorie target. The open setup made four things possible. It runs after the weights are downloaded, with no internet and no per-day bill. The first note takes a little while on a laptop CPU. Later notes are a few seconds. That is an acceptable cost for a plan she might make at 2 a.m. Her data stays in browser storage. The plan request goes to our own Next.js server, which talks only to Ollama on localhost. A closed API cannot make that promise, because the product is the upload. We can change the agent. Sessions, meals, and the system prompt are files. When the small model wrote fluffy encouragement, or tried to skip the real meal, the fix was a rule in our code, not a support ticket. Qwen still chooses among the safe options. It does not get to invent medicine, a fast, or a target weight. It cost nothing beyond the computer we already had. A postpartum subscription would have charged us to hold the same notes. Marigold is not a clinician, a pelvic floor therapist, or emergency care. Open weights do not make it one. What they made possible is a companion that will sit on our machine, take the pain seriously, and refuse to turn her recovery into a diet.

My Agent Session

Built in Cursor. The session is here:
https://cursor.com/agents/bc-76c9d47c-407c-412c-91a5-c6132dfd58db

Prize Categories

This is an entry for the overall challenge. I did not use a partner product, so I am not entering a partner category.