Chrome extension that blocks distracting websites and helps student productivity!
Features
- Input URLs of distracting websites into the extension and toggle extension on to block these upon opening a new tab or switching to a tab with this URL
- Block site that user is currently visiting in the future
- Unblock sites that no longer need to be blocked by removing them from the list of blocked URLs on the extension interface
Installation
Download zip file of code from this repository and save locally on computer. No packages are required for this program to run. Then visit chrome://extensions, toggle "Developer Mode" to ON, and click "Load unpacked" to select the folder of the downloaded Timeowt code. The extension should now be listed in the list of downloaded chrome extensions.
Known Bugs
When run, the program will occasionally throw this error:
Error handling response: TypeError: Cannot read properties of undefined (reading 'includes') at chrome-extension://nnmpdkpojpgjlfbpmfhofgleifglhamb/background.js:95:33
This error can be ignored as it does not interfere with the program's functionality at all.
Support
Contact axu6@ocdsb.ca, jxue2@ocdsb.ca, rpate2@ocdsb.ca
Sources
“Time Management Techniques,” University of St. Augustine for Health Sciences [Online]. Available: https://www.usa.edu/blog/time-management-techniques/ [Accessed: 20-Jan-2023] Finding productivity resources for redirect page
“How TO - Text Buttons,” W3Schools. [Online]. Available: https://www.w3schools.com/howto/howto_css_text_buttons.asp [Accessed: 20-Jan-2023] Make CSS button with text for redirect site
“HTML Links - Different Colors,” W3Schools. [Online]. Available: https://www.w3schools.com/html/html_links_colors.asp [Accessed: 20-Jan-2023] Make visited links a different color for the redirect site
“Cascade, specificity, and inheritance,” Mozilla Developer. [Online]. Available: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance [Accessed: 12-Dec-2022] Uses classes in css/html
“Add links to text,” Figma. [Online]. Available: https://help.figma.com/hc/en-us/articles/360045942953-Add-links-to-text [Accessed: 21-Nov-2022] Use figma features “HTML DOM Element innerHTML,” W3Schools. [Online]. Available: https://www.w3schools.com/jsref/prop_html_innerhtml.asp [Accessed: 20-Jan-2023] Use html features
“Message passing,” Chrome developers. [Online]. Available: https://developer.chrome.com/docs/extensions/mv3/messaging/ [Accessed: 28-Feb-2023] Make a functional chrome extension
“Advanced concepts of chrome extensions | Part 2 Background scripts, Content scripts and Messaging,” Youtube. [Online]. Available: https://www.youtube.com/watch?v=tOHpufRbsJc&ab_channel=Atharvvarshney [Accessed: 20-Jan-2023]
“HTML type Attributes,” W3Schools. [Online]. Available: https://www.w3schools.com/tags/att_button_type.asp [Accessed: 20-Jan-2023]
“How TO - Toggle Switch,” W3Schools. [Online]. Available: https://www.w3schools.com/howto/howto_css_switch.asp [Accessed: 20-Jan-2023]
“chrome.storage,” Chrome developers. [Online]. Available: https://developer.chrome.com/docs/extensions/reference/storage/ [Accessed: 28-Feb-2023]