YouTube Blocker Chrome Extension

What & Why

YouTube Blocker blocks YouTube videos not in the Education, Science & Technology, or Howto & Style categories so you can focus on educational videos.

Setup

1. fork repo if desired
2. clone repo locally
3. go to chrome://extensions
4. Press Load unpacked in top left corner
5. Select your cloned youtube-blocker folder
6. Enable the extension and develop in your IDE.
7. Changes should reflect automatically after you save
8. If not, then press the refresh button on the extension card in the chrome://extensions page

How

Diagram Link here

Alternative Chrome Extensions

• DF tube chrome extension
• Unhook chrome extension

Notes

• Each page has a different local storage
• Understand Background action vs Browser action
• Background Script has the context of the extension while
• Content Script has the context of the web page. It has restrictions on CORS so only the Background Script can run the CORS API requests.
• Content Script sends a Chrome message to the Background Script on whether to block the YouTube video or not
• Logo was made in Adobe Photoshop
• Background page replaced with Service Worker
  • background pages provide an environment that lives independent of any other window or tab. This allows extensions to observe and act in response to events.
• Resources Used:
  • Chrome Extension API
  • Youtube Data API

Screenshots

Screenshot 1) Chrome Extension Page

Screenshot 2) Chrome Extension popup.html

Screenshot 3) Chrome Extension options.html