The latest articles on DEV Community by Isha Khan (@ishakhan418). https://dev.to/ishakhan418 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3264874%2Fcde06fb6-de53-4b64-8872-0d300f117b66.jpg https://dev.to/ishakhan418 en Isha Khan Sun, 06 Jul 2025 09:36:59 +0000 https://dev.to/ishakhan418/how-to-build-a-javascript-browser-extension-for-mindfulness-reminders-1hb8 https://dev.to/ishakhan418/how-to-build-a-javascript-browser-extension-for-mindfulness-reminders-1hb8 <p>Hi DEV Community,</p> <p>I’m working on a JavaScript-based browser extension to help developers take short mindfulness breaks during coding sessions to improve focus. I found resources like <a href="https://calmytime.com/" rel="noopener noreferrer">CalMyTime</a> with quick relaxation exercises, and I want to create a timer that triggers a notification linking to such exercises every hour. I’ve tried using setInterval for the timer in a basic script:<br> <code>setInterval(() =&gt; { <br> chrome.notifications.create({ <br> type: 'basic', <br> iconUrl: 'icon.png', <br> title: 'Mindfulness Break', <br> message: 'Time for a quick relaxation exercise!' <br> }); <br> }, 3600000); // 1 hour</code><br> The issue is the timer resets when the browser restarts, and I’m unsure how to persist it using chrome.storage. I also want to ensure notifications work reliably across Chrome and Firefox. Has anyone built a similar extension or used libraries to handle persistent timers and notifications? I checked MDN’s WebExtensions docs but couldn’t find a clear example for this use case. Any code snippets or tool recommendations (e.g., from npm or GitHub) would be great! </p> javascript webdev productivity