ProcrastiNope

• 

  Main popup for users to add and remove sites he/she.. wants to block

• 

  hourly break notification with a meme and quote

• 

  Next time if user visits any blocked site, they will redirected to this page

Inspiration

The inspiration behind ProcrastiNope came from the need to stay focused and productive during coding sessions and hackathons. I was often distracted by various websites, affecting my progress and . I found inspiration from the "StayFocused" extension, which helped me block distractions and stay on track with my tasks.

What it does

ProcrastiNope is a Chrome extension that allows users to block distracting websites to beat procrastination during hackathons or anything serious you are doing. Users can add websites to a blocklist, and the extension will prevent access to those sites while they are working. Additionally, the extension displays hourly notifications with funny coding-related memes and motivational messages to keep users inspired and focused.

How I built it

The project was built using web technologies, including HTML, CSS, and JavaScript. The extension follows the Chrome Manifest V3 format for improved performance and security. We utilized third-party libraries like Tailwind CSS and Font Awesome to enhance the user interface and create a seamless user experience. Asynchronous programming was used to handle storage and alarms in the background script, enabling smooth functionality.

Challenges I ran into

Throughout the development process, I encountered various challenges. One significant hurdle was dealing with the CORS policy when fetching images for the meme notifications. I had to find alternative sources to fetch images without violating the policy. Additionally, implementing the option for users to disable the hourly meme alarm required careful storage management and message passing between the popup and background scripts.

Accomplishments that I am proud of

im are proud of creating a functional and user-friendly Chrome extension from scratch. The seamless integration of hourly motivational notifications, blocklist management, and user preferences demonstrates my commitment to providing a valuable tool for productivity.

What I learned

Building ProcrastiNope provided me with valuable learning experiences. I deepened my understanding of web development, including HTML, CSS, and JavaScript. I learned how to structure and organize a Chrome extension and gained insights into handling asynchronous tasks and user interactions. The project also taught me to think creatively to find solutions for compatibility and CORS-related issues.

What's next for ProcrastiNope

In the future, I aim to further enhance ProcrastiNope with new features and improvements. I plan to add options for customizing the interval of hourly notifications and unblocking internal pages of a site while main page is blocked, and connect with a API for more motivational quotes and images.

Built With

• chrome
• css3
• fontawesome
• html5
• javascript
• manifest
• tailwind