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.

How

Diagram here

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

Resources Used

• Chrome Extension API
• Youtube Data API

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

Screenshots

Screenshot 1) Chrome Extension Page

Screenshot 2) Chrome Extension popup.html

Screenshot 3) Chrome Extension options.html