pull down to refresh
34 sats \ 1 reply \ @Wumbo 21 Apr \ on: First time "vibe coding" - WOW! (an extension to avoid digital distraction) devs
Do you have a link to the code repo or extension?
It will give me something to look at while "checking things"
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 codechrome.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