Chrome extensions that check how much you've scrolled down, and shows a pic of my cat with a reminder that you are probably wasting your time when you've scrolled a certain amount.
- Clone the repository.
- Open Chrome and navigate to
chrome://extensions/
. - Enable "Developer mode" in the top right corner.
- Click "Load unpacked" and select the directory containing the extension files.
Once installed, the extension will automatically track your scroll distance on any website. When you reach the scroll limit, a modal will appear reminding you to take a break. Dismiss the modal to continue scrolling, and the scroll limit will increase for the next reminder.
This extension was built using a combination of manual coding and assistance from AI tools, specifically Aider and Cursor IDE. Below are some of the key steps and prompts used during the development process:
-
Initial Setup and Scroll Tracking:
- The initial version of the extension tracked the number of scrolls and displayed a modal after a certain number of scrolls.
- Prompt: "Change get_factorial() to use math.factorial"
-
Switch to Scroll Distance:
- The extension was modified to track scroll distance instead of the number of scrolls.
- Prompt: "Trigger a modal based on scroll distance traveled instead of the number of scrolls and increase the required distance each time the modal is dismissed."
-
Adjusting Scroll Limits:
- The scroll limits were adjusted to better suit the intent of reminding users not to mindlessly scroll.
- Prompt: "Adjust the distances and limits to reduce mindless scrolling on infinite scroll websites."
-
Blocking Scrolling:
- Initially, the extension blocked scrolling when the modal was displayed, but this caused issues on some websites.
- Prompt: "Block scrolling on the entire page when the modal is on the screen."
-
Displaying an Image:
- The modal was enhanced to display an image from a specified URL.
- Prompt: "Show an image from the URL
https://placecats.com/400/300
when the modal shows up."
-
Enhancing Modal Appearance:
- The appearance of the modal was improved by setting text color, adjusting the layout for the image and button, and ensuring vertical alignment.
- Prompt: "Make sure the text is visible by manually setting up the color, make the image appear below the text, and the button below the image, all center-aligned vertically."
-
Final Adjustments:
- The extension was refined to ensure it only takes into account scrolling down and to prevent the page from jumping to the top when the modal is displayed.
- Prompt: "Make it so the script only takes into account scrolling down."
- Not working on Tiktok/Instagram Reels/Youtube Shorts
- Add settings for user adjustments
- Create icon (tired/angry cat face)
- Publish as public extensions
- Resize images by a lot