├── screenshots
    ├── ss0.png
    ├── ss1.png
    ├── ss2.png
    └── ss3.png
├── icons8-hard-working-16.png
├── icons8-hard-working-48.png
├── icons8-hard-working-100.png
├── background.js
├── manifest.json
├── popup.html
├── hideVideos.js
├── README.md
└── content.js


/screenshots/ss0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivek9patel/YT-productive/HEAD/screenshots/ss0.png


--------------------------------------------------------------------------------
/screenshots/ss1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivek9patel/YT-productive/HEAD/screenshots/ss1.png


--------------------------------------------------------------------------------
/screenshots/ss2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivek9patel/YT-productive/HEAD/screenshots/ss2.png


--------------------------------------------------------------------------------
/screenshots/ss3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivek9patel/YT-productive/HEAD/screenshots/ss3.png


--------------------------------------------------------------------------------
/icons8-hard-working-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivek9patel/YT-productive/HEAD/icons8-hard-working-16.png


--------------------------------------------------------------------------------
/icons8-hard-working-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivek9patel/YT-productive/HEAD/icons8-hard-working-48.png


--------------------------------------------------------------------------------
/icons8-hard-working-100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vivek9patel/YT-productive/HEAD/icons8-hard-working-100.png


--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
 1 | chrome.runtime.onInstalled.addListener(function () {
 2 |   chrome.storage.sync.set({ hide: true }, function () {
 3 |     console.log("Hide YT-Video is on");
 4 |   });
 5 | });
 6 | 
 7 | chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
 8 |   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
 9 |     chrome.tabs.sendMessage(
10 |       tabs[0].id,
11 |       { command: "init" }, // message to be sent
12 |       function (response) {
13 |         console.log(response.result);
14 |       }
15 |     );
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "yt-productive",
 3 |     "version": "1.0",
 4 |     "description": "Don't get distracted by other youtube videos & recommended videos, while you are being productive!",
 5 |     "manifest_version": 2,
 6 |     "background": {
 7 |       "scripts": ["background.js"],
 8 |       "persistent": false
 9 |     },
10 |     "icons": { 
11 |       "16": "icons8-hard-working-16.png",
12 |       "48": "icons8-hard-working-48.png",
13 |      "128": "icons8-hard-working-100.png" 
14 |     },
15 |     "author":"vivek9patel",
16 |     "content_scripts": [{
17 |       "js": ["content.js"],
18 |       "matches": ["https://www.youtube.com/*"]
19 |     }],
20 |     "browser_action": {
21 |       "default_popup": "popup.html",
22 |       "default_title": "Be Productive!"
23 |     },
24 |     "permissions": [
25 |       "activeTab",
26 |       "storage"
27 |       ]
28 | }


--------------------------------------------------------------------------------
/popup.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <style>
 6 |         body {
 7 |             width: 200px;
 8 |             text-align: center;
 9 |         }
10 | 
11 |         input {
12 |             height: 20px;
13 |             width: 50px;
14 |             outline: none;
15 |         }
16 | 
17 |         label {
18 |             margin-top: 10px;
19 |             width: 90%;
20 |             text-align: center;
21 |             font-weight: normal;
22 |         }
23 | 
24 |         span {
25 |             display: block;
26 |             font-size: 14px;
27 |             font-weight: bold;
28 |             margin: 5px 0;
29 |         }
30 |     </style>
31 | </head>
32 | 
33 | <body>
34 |     <span>Be Productive,<br> Get more work Done!</span>
35 |     <label>Hide Recommended Videos</label>
36 |     <input type="checkbox" id="hideVideos" checked></input>
37 |     <script src="hideVideos.js"></script>
38 | </body>
39 | 
40 | </html>


--------------------------------------------------------------------------------
/hideVideos.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function () {
 2 |   var hideVideos = document.getElementById("hideVideos");
 3 |   chrome.storage.sync.get("hide", function (data) {
 4 |     hideVideos.checked = data.hide;
 5 |   });
 6 |   hideVideos.onchange = function (element) {
 7 |     let value = this.checked;
 8 |     chrome.storage.sync.set({ hide: value }, function () {
 9 |       console.log("The value is" + value);
10 |     });
11 |     if (value) {
12 |       chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
13 |         chrome.tabs.sendMessage(
14 |           tabs[0].id,
15 |           { command: "hideVids", hide: value }, // message to be sent
16 |           function (response) {
17 |             console.log(response.result);
18 |           }
19 |         );
20 |       });
21 |     } else {
22 |       chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
23 |         chrome.tabs.sendMessage(
24 |           tabs[0].id,
25 |           { command: "showVids", hide: value }, // message to be sent
26 |           function (response) {
27 |             console.log(response.result);
28 |           }
29 |         );
30 |       });
31 |     }
32 |   };
33 | });
34 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # YT-productive - Chrome extension
 2 | 
 3 | ## About
 4 | 
 5 | - Interesting videos distracts you while you are trying to study from YouTube. YT-productive extension helps you by blocking all recommended videos. Be productive while you are working!
 6 | 
 7 | ## How it Works
 8 | 
 9 | - Open YouTube page:
10 | 
11 |   - Click the extension button and
12 |   - Click the check box of the extension popup
13 | 
14 | - Things you _can_ do while you are in _productive mode_ :
15 | 
16 |   - Search youtube on any topics
17 |   - Watch full video from the search results
18 |   - See upcoming video based on that video
19 | 
20 | - Things you _can't_ do while you are in _productive mode_ :
21 |   - Can't open recommended Videos
22 |   - Can't read any comments
23 |   - Can't go to any other sections like (gaming, music, trending, etc.)
24 | 
25 | ## Screen Shots
26 | 
27 | <div style="margin-bottom:20px">
28 |   <img src="screenshots/ss0.png" alt="youtube-homepage" width="500"/>
29 | </div>
30 | <div style="margin-bottom:20px">
31 |   <img src="screenshots/ss1.png" alt="search-results" width="500"/>
32 | </div>
33 | <div style="margin-bottom:20px">
34 |   <img src="screenshots/ss2.png" alt="video-playing" width="500"/>
35 | </div>
36 | <div style="margin-bottom:20px">
37 |   <img src="screenshots/ss3.png" alt="comments & recommendation section" width="500"/>
38 | </div>
39 | 
40 | ## How to install
41 | 
42 | - Download Zip file from github repository & unzip it
43 | - Place it anywhere on your system or Create directory for extensions
44 | - Now open `chrome://extensions/` in chrome
45 | - And toggle the developer mode button
46 | - Click on the _load unpacked_ button
47 | - Now select the unzipped folder
48 | 
49 | It will install the extension in your chrome browser.
50 | 


--------------------------------------------------------------------------------
/content.js:
--------------------------------------------------------------------------------
  1 | var mainSection = document.getElementsByTagName("ytd-rich-item-renderer");
  2 | var videos = document.getElementsByTagName("ytd-rich-grid-media");
  3 | var sideMenu = document.getElementsByTagName("ytd-guide-section-renderer");
  4 | var sideMenuLinks = document.getElementsByTagName("ytd-guide-entry-renderer");
  5 | var sideRecommendedSection = document.getElementsByTagName(
  6 |   "ytd-compact-video-renderer"
  7 | );
  8 | var comments = document.getElementsByTagName("ytd-comments");
  9 | 
 10 | var hideAllVideos = function () {
 11 |   for (var i = 0; i < mainSection.length; i++) {
 12 |     mainSection[i].style.cursor = "not-allowed";
 13 |   }
 14 | 
 15 |   for (var i = 0; i < videos.length; i++) {
 16 |     videos[i].style.pointerEvents = "none";
 17 |     videos[i].style.textDecoration = "none";
 18 |     videos[i].style.filter = "blur(5px)";
 19 |   }
 20 |   /* side recommended section */
 21 |   for (var i = 0; i < sideRecommendedSection.length; i++) {
 22 |     sideRecommendedSection[i].style.pointerEvents = "none";
 23 |     sideRecommendedSection[i].style.textDecoration = "none";
 24 |     sideRecommendedSection[i].style.filter = "blur(5px)";
 25 |   }
 26 |   //   auto playing videos
 27 |   let autoPlayingVideos = document.getElementsByClassName(
 28 |     "ytd-compact-autoplay-renderer"
 29 |   );
 30 |   for (var i = 0; i < autoPlayingVideos.length; i++) {
 31 |     if (autoPlayingVideos[i].tagName == "YTD-COMPACT-VIDEO-RENDERER") {
 32 |       autoPlayingVideos[i].style.pointerEvents = "auto";
 33 |       autoPlayingVideos[i].style.textDecoration = "initial";
 34 |       autoPlayingVideos[i].style.filter = "blur(0px)";
 35 |     }
 36 |   }
 37 | };
 38 | 
 39 | var productiveModeOn = function () {
 40 |   hideAllVideos();
 41 | 
 42 |   for (var i = 0; i < sideMenu.length; i++) {
 43 |     sideMenu[i].style.cursor = "not-allowed";
 44 |   }
 45 |   for (var i = 0; i < sideMenuLinks.length; i++) {
 46 |     sideMenuLinks[i].style.pointerEvents = "none";
 47 |     sideMenuLinks[i].style.textDecoration = "none";
 48 |     sideMenuLinks[i].style.filter = "blur(5px)";
 49 |   }
 50 | 
 51 |   /* comment section */
 52 |   for (var i = 0; i < comments.length; i++) {
 53 |     comments[i].style.pointerEvents = "none";
 54 |     comments[i].style.textDecoration = "none";
 55 |     comments[i].style.filter = "blur(5px)";
 56 |   }
 57 | };
 58 | 
 59 | var productiveModeOff = function () {
 60 |   for (var i = 0; i < mainSection.length; i++) {
 61 |     mainSection[i].style.cursor = "default";
 62 |   }
 63 | 
 64 |   for (var i = 0; i < videos.length; i++) {
 65 |     videos[i].style.pointerEvents = "auto";
 66 |     videos[i].style.textDecoration = "initial";
 67 |     videos[i].style.filter = "blur(0px)";
 68 |   }
 69 | 
 70 |   for (var i = 0; i < sideMenu.length; i++) {
 71 |     sideMenu[i].style.cursor = "default";
 72 |   }
 73 |   for (var i = 0; i < sideMenuLinks.length; i++) {
 74 |     sideMenuLinks[i].style.pointerEvents = "auto";
 75 |     sideMenuLinks[i].style.textDecoration = "initial";
 76 |     sideMenuLinks[i].style.filter = "blur(0px)";
 77 |   }
 78 | 
 79 |   /* side recommended section */
 80 |   for (var i = 0; i < sideRecommendedSection.length; i++) {
 81 |     sideRecommendedSection[i].style.pointerEvents = "auto";
 82 |     sideRecommendedSection[i].style.textDecoration = "initial";
 83 |     sideRecommendedSection[i].style.filter = "blur(0px)";
 84 |   }
 85 |   /* comment section */
 86 |   for (var i = 0; i < comments.length; i++) {
 87 |     comments[i].style.pointerEvents = "auto";
 88 |     comments[i].style.textDecoration = "initial";
 89 |     comments[i].style.filter = "blur(0px)";
 90 |   }
 91 | };
 92 | 
 93 | var init = function () {
 94 |   chrome.storage.sync.get("hide", function (data) {
 95 |     if (data.hide) {
 96 |       productiveModeOn();
 97 |     } else {
 98 |       productiveModeOff();
 99 |     }
100 |   });
101 | };
102 | 
103 | //incoming message from popup
104 | chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
105 |   if (request.command === "hideVids") {
106 |     productiveModeOn();
107 |   } else if (request.command === "showVids") {
108 |     productiveModeOff();
109 |   } else {
110 |     init();
111 |   }
112 |   sendResponse({ result: "success" });
113 | });
114 | 
115 | window.addEventListener("load", (event) => {
116 |   init();
117 | });
118 | 
119 | window.addEventListener("scroll", () => {
120 |   init();
121 | });
122 | 


--------------------------------------------------------------------------------