reply on: First time "vibe coding" - WOW! (an extension to avoid digital distraction) \ stacker news ~devs

pull down to refresh

10 sats \ 0 replies \ @Signal312 OP 21 Apr \ parent \ on: First time "vibe coding" - WOW! (an extension to avoid digital distraction) devs

I didn't set it up in the extension store or anything - it's probably not "ready for prime time".

But here's what it did, the first iteration (I've already had it make some modifications):

QUESTION/PROMPT What's the easiest way to write a chrome extension? I'd like it to do the following

When I click on a link to open a new tab, or just open a new tab manually and type in a URL, and click enter, then ask the user to WAIT 30 seconds. Show a little countdown timer. This is to prevent too much distraction.
when the 30 seconds is over, then the user can see what's on the page.

ANSWER from AI (deep seek) Here's a simple Chrome extension that implements your distraction-limiting feature:

Create the basic extension structure plaintext Copy code

distraction-delay/ ├── manifest.json ├── background.js ├── content.js └── popup.html

manifest.json (the extension's configuration) json Copy code

{ "manifest_version": 3, "name": "Distraction Delay", "version": "1.0", "permissions": ["webNavigation", "tabs"], "background": { "service_worker": "background.js" }, "content_scripts": [{ "matches": ["<all_urls>"], "js": ["content.js"], "run_at": "document_start" }] } 3. content.js (runs on every page) javascript Copy code

// Show overlay on page load const overlay = document.createElement('div'); overlay.style =

  position: fixed;   top: 0;   left: 0;   width: 100%;   height: 100%;   background: rgba(0,0,0,0.8);   color: white;   display: flex;   justify-content: center;   align-items: center;   flex-direction: column;   font-size: 2em;   z-index: 9999;

; document.documentElement.appendChild(overlay);

let seconds = 30; updateTimer();

const timer = setInterval(() => { seconds--; updateTimer(); if (seconds <= 0) { clearInterval(timer); overlay.remove(); } }, 1000);

function updateTimer() { overlay.innerHTML = <div>Please wait ${seconds} seconds...</div> <div>(This is to prevent distraction)</div> ; } 4. background.js (handles navigation) javascript Copy code

chrome.webNavigation.onBeforeNavigate.addListener((details) => { if (details.frameId === 0) { // Only main frame chrome.scripting.executeScript({ target: {tabId: details.tabId}, files: ['content.js'] }); } });

To install: Go to chrome://extensions Enable "Developer mode" Click "Load unpacked" and select your extension folder How it works: The overlay appears immediately when a page starts loading A 30-second countdown is shown After the timer expires, the overlay disappears Works for both typed URLs and clicked links The overlay prevents interaction with the page until the time is up Would you like me to modify any part of this, such as the styling or timer duration?