pull down to refresh

First time "vibe coding" - WOW! (an extension to avoid digital distraction)
160 sats \ 2 comments \ @Signal312 21 Apr devs

If I have a moment of boredom, I'll often just open up another tab, and start "checking things". This could be stacker.news, checking the weather forecast, news, etc. Any number of things. This habit really gets in the way of focus.

I'm really trying to work on this. Avoiding digital distraction is a big deal for me, and I think lots of people have the same problem.

So I've been looking for an extension that does this. And writing up an extension seems like a lot of work - I don't really do javascript, etc. Then I heard the term "vibe coding" bounced about. I believe it actually means just writing crappy code, using AI. And I thought it'd try it.

Anyway, one prompt later (I thought it would take MUCH more back and forth), I came up with an extension that seems to do what I want. When I open up a new tab, the extension overlays some text with a countdown timer, saying "please wait 30 seconds".

Honestly, I'm very impressed. It took less than 5 minutes to do the prompt, and setup the extension.

I'll have to reconsider the way I open tabs now - when I'm mid-research, I'll do a search, and open up 5 or so tabs from the search results, and then go through them. I'll have to change that way of doing things (or modify the app) but my first impression is - it's amazing.

write
preview
related posts
34 sats \ 1 reply \ @Wumbo 21 Apr

Do you have a link to the code repo or extension?

It will give me something to look at while "checking things"

reply
10 sats \ 0 replies \ @Signal312 OP 21 Apr

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:

  1. Create the basic extension structure plaintext Copy code

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

  1. 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?

reply