auto detect video sites and check its status

luc99hen · luc99hen · commit 99d29737e275 · 2022-01-07T12:59:14.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+./vscode
diff --git a/src/index.html b/src/index.html
@@ -39,8 +39,6 @@
             <p><span class="arrow">➤</span> set daily limits for sites</p>
             <p><span class="arrow">➤</span> set notifications after a certain time has elapsed</p>
             <p><span class="arrow">➤</span> set a list of sites with no tracking</p>
-            <p><span class="arrow">➤</span> enable time tracking on youtube.com</p>
-            <p><span class="arrow">➤</span> enable time tracking on Netflix.com</p>
         </div>
     </div>
     <div id="stats" class="hide">
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,50 +1,47 @@
 {
-        "manifest_version": 2,
-    
-        "name": "Web Activity Time Tracker",
-        "short_name": "Web Time Tracker",
-        "version": "1.5.4",
-        "minimum_chrome_version": "26",
-
-        "description": "Track and limit time your activity in the browser every day.",
-
-        "options_page": "options.html",
-    
-        "icons": {
-            "16": "icons/16x16.png",
-            "32": "icons/32x32.png",
-            "48": "icons/48x48.png",
-            "128": "icons/128x128.png"
-        },
-        "permissions": [
-            "tabs",
-            "activeTab",
-            "storage",
-            "idle",
-            "chrome://favicon/*",
-            "webNavigation",
-            "unlimitedStorage"
+    "manifest_version": 2,
+    "name": "Web Activity Time Tracker",
+    "short_name": "Web Time Tracker",
+    "version": "1.5.4",
+    "minimum_chrome_version": "26",
+    "description": "Track and limit time your activity in the browser every day.",
+    "options_page": "options.html",
+    "icons": {
+        "16": "icons/16x16.png",
+        "32": "icons/32x32.png",
+        "48": "icons/48x48.png",
+        "128": "icons/128x128.png"
+    },
+    "permissions": [
+        "tabs",
+        "activeTab",
+        "storage",
+        "idle",
+        "chrome://favicon/*",
+        "webNavigation",
+        "unlimitedStorage",
+        "<all_urls>"
+    ],
+    "optional_permissions": [
+        "notifications"
+    ],
+    "offline_enabled": true,
+    "background": {
+        "scripts": [
+            "scripts/common.js",
+            "scripts/storage.js",
+            "scripts/activity.js",
+            "scripts/tab.js",
+            "scripts/timeInterval.js",
+            "scripts/background.js",
+            "scripts/restriction.js",
+            "scripts/url.js"
         ],
-        "optional_permissions": [
-            "https://www.youtube.com/*",
-            "https://www.netflix.com/*",
-            "notifications"
-          ],
-        "offline_enabled": true,
-        "background": {
-            "scripts": ["scripts/common.js", 
-                        "scripts/storage.js", 
-                        "scripts/activity.js", 
-                        "scripts/tab.js", 
-                        "scripts/timeInterval.js",
-                        "scripts/background.js",
-                        "scripts/restriction.js",
-                        "scripts/url.js"],
-            "persistent": false
-        },
-        "browser_action": {
-            "default_popup": "index.html",
-            "default_title": "Web Activity Time Tracker",
-            "default_icon": "icons/48x48.png"
-        }
+        "persistent": false
+    },
+    "browser_action": {
+        "default_popup": "index.html",
+        "default_title": "Web Activity Time Tracker",
+        "default_icon": "icons/48x48.png"
+    }
 }
diff --git a/src/options.html b/src/options.html
@@ -110,34 +110,6 @@
                     <div class="notify warning" id='notify-restore-failed' hidden>
                         Backup file is not valid
                     </div>
-                    <!-- YouTube -->
-                    <div class="margin-top-10">
-                        <label class="block">Web Activity Time Tracker tracks your activity when you're active in
-                            the browser with your mouse or keyboard.
-                            In order for the extension to also track when you watch <span class="bold">a video on
-                                YouTube / Netflix</span>, you need grant it
-                            permission to access these sites.
-                            The extension needs permission to access to the DOM (Document Object Model) to tell if a video is currently playing.</label>
-                    </div>
-                    <div class="margin-top-10">
-                        <label class="bold site-name">YouTube</label>
-                        <input class="margin-top-10 permission-btn" type="button" value="Grant permission"
-                            id='grantPermissionForYT'>
-                        <div id='permissionSuccessedBlockForYT' hidden>
-                            <img src="/icons/success.png" height="18" />
-                            <label>Permissions have been granted</label>
-                        </div>
-                    </div>
-                    <!-- Netflix -->
-                    <div class="margin-top-10">
-                        <label class="bold site-name">Netflix</label>
-                        <input class="margin-top-10 permission-btn" type="button" value="Grant permission"
-                            id='grantPermissionForNetflix'>
-                        <div id='permissionSuccessedBlockForNetflix' hidden>
-                            <img src="/icons/success.png" height="18" />
-                            <label>Permissions have been granted</label>
-                        </div>
-                    </div>
                     <div class="margin-top-10">
                         <label>Data in memory use </label><label id='memoryUse'></label>
                     </div>
diff --git a/src/scripts/background.js b/src/scripts/background.js
@@ -18,8 +18,6 @@ var setting_dark_mode;
 var setting_notification_list;
 var setting_notification_message;
 
-var isHasPermissioForYouTube;
-var isHasPermissioForNetflix;
 var isHasPermissioForNotification;
 
 function updateSummaryTime() {
@@ -55,7 +53,7 @@ function backgroundCheck() {
                         chrome.idle.queryState(parseInt(setting_interval_inactivity), function(state) {
                             if (state === 'active') {
                                 mainTRacker(activeUrl, tab, activeTab);
-                            } else checkDOM(state, activeUrl, tab, activeTab);
+                            } else checkVideoPlaying(activeUrl, tab, activeTab);
                         });
                     }
                 }
@@ -65,6 +63,7 @@ function backgroundCheck() {
 }
 
 function mainTRacker(activeUrl, tab, activeTab) {
+    console.log(activeUrl)
     if (activity.isLimitExceeded(activeUrl, tab) && !activity.wasDeferred(activeUrl)) {
         setBlockPageToCurrent(activeTab.url);
     }
@@ -138,55 +137,19 @@ function setBlockPageToCurrent(currentUrl) {
     });
 }
 
-function isVideoPlayedOnPage() {
-    var videoElement = document.getElementsByTagName('video')[0];
-    if (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2) {
-        return true;
-    } else return false;
-}
-
-function checkDOM(state, activeUrl, tab, activeTab) {
-    if (state === 'idle' && activeUrl.isMatch("youtube.com")) {
-        trackForYT(mainTRacker, activeUrl, tab, activeTab);
-    } else if (state === 'idle' && activeUrl.isMatch("netflix.com")) {
-        trackForNetflix(mainTRacker, activeUrl, tab, activeTab);
-    } else activity.closeIntervalForCurrentTab();
-}
-
-function trackForYT(callback, activeUrl, tab, activeTab) {
-    if (isHasPermissioForYouTube) {
-        executeScriptYoutube(callback, activeUrl, tab, activeTab);
-    } else {
-        checkPermissionsForYT(executeScriptYoutube, activity.closeIntervalForCurrentTab, callback, activeUrl, tab, activeTab);
-    }
-}
-
-function trackForNetflix(callback, activeUrl, tab, activeTab) {
-    if (isHasPermissioForNetflix) {
-        executeScriptNetflix(callback, activeUrl, tab, activeTab);
-    } else {
-        checkPermissionsForNetflix(executeScriptNetflix, activity.closeIntervalForCurrentTab, callback, activeUrl, tab, activeTab);
-    }
-}
-
-function executeScriptYoutube(callback, activeUrl, tab, activeTab) {
-    chrome.tabs.executeScript({ code: "var videoElement = document.getElementsByTagName('video')[0]; (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2);" }, (results) => {
+function checkVideoPlaying(activeUrl, tab, activeTab) {
+    // wasm DOM has some problems with checking inside executeScript(), so make it always true
+    chrome.tabs.executeScript({ code: `var videoEle = document.getElementsByTagName('video');  var wasmVideoEle = document.getElementsByTagName('bwp-video');
+    var videoPlaying = [...videoEle].map(videoElement => (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2));
+    var wasmVideoPlaying = [...wasmVideoEle].map(videoElement => true);        
+        [...videoPlaying, ...wasmVideoPlaying].includes(true)` }, 
+    (results) => {
         if (results !== undefined && results[0] !== undefined && results[0] === true)
-            callback(activeUrl, tab, activeTab);
+            mainTRacker(activeUrl, tab, activeTab);
         else activity.closeIntervalForCurrentTab();
     });
 }
 
-function executeScriptNetflix(callback, activeUrl, tab, activeTab) {
-    chrome.tabs.executeScript({ code: "var videoElement = document.getElementsByTagName('video')[0]; (videoElement !== undefined && videoElement.currentTime > 0 && !videoElement.paused && !videoElement.ended && videoElement.readyState > 2);" }, (results) => {
-        if (results !== undefined && results[0] !== undefined && results[0] === true) {
-            callback(activeUrl, tab, activeTab);
-        } else {
-            activity.closeIntervalForCurrentTab();
-        }
-    });
-}
-
 function backgroundUpdateStorage() {
     if (tabs != undefined && tabs.length > 0)
         storage.saveTabs(tabs);
@@ -371,37 +334,9 @@ function loadAddDataFromStorage() {
 }
 
 function loadPermissions() {
-    checkPermissionsForYT();
-    checkPermissionsForNetflix();
     checkPermissionsForNotifications();
 }
 
-function checkPermissionsForYT(callbackIfTrue, callbackIfFalse, ...props) {
-    chrome.permissions.contains({
-        permissions: ['tabs'],
-        origins: ["https://www.youtube.com/*"]
-    }, function(result) {
-        if (callbackIfTrue != undefined && result)
-            callbackIfTrue(...props);
-        if (callbackIfFalse != undefined && !result)
-            callbackIfFalse();
-        isHasPermissioForYouTube = result;
-    });
-}
-
-function checkPermissionsForNetflix(callbackIfTrue, callbackIfFalse, ...props) {
-    chrome.permissions.contains({
-        permissions: ['tabs'],
-        origins: ["https://www.netflix.com/*"]
-    }, function(result) {
-        if (callbackIfTrue != undefined && result)
-            callbackIfTrue(...props);
-        if (callbackIfFalse != undefined && !result)
-            callbackIfFalse();
-        isHasPermissioForNetflix = result;
-    });
-}
-
 function checkPermissionsForNotifications(callback, ...props) {
     chrome.permissions.contains({
         permissions: ["notifications"]
diff --git a/src/scripts/settings.js b/src/scripts/settings.js
@@ -61,12 +61,6 @@ document.addEventListener('DOMContentLoaded', function () {
     document.getElementById('rangeToDays').addEventListener('change', function () {
         storage.saveValue(SETTINGS_INTERVAL_RANGE, this.value);
     });
-    document.getElementById('grantPermissionForYT').addEventListener('click', function () {
-        grantPermissionForYT();
-    });
-    document.getElementById('grantPermissionForNetflix').addEventListener('click', function () {
-        grantPermissionForNetflix();
-    });
     document.getElementById('grantPermissionForNotifications').addEventListener('click', function () {
         grantPermissionForNotifications();
     });
@@ -130,32 +124,9 @@ function loadSettings() {
     storage.getValue(STORAGE_NOTIFICATION_MESSAGE, function (mess) {
         document.getElementById('notifyMessage').value = mess;
     });
-    checkPermissionsForYT();
-    checkPermissionsForNetflix();
     checkPermissionsForNotifications();
 }
 
-function checkPermissionsForYT() {
-    chrome.permissions.contains({
-        permissions: ['tabs'],
-        origins: ["https://www.youtube.com/*"]
-    }, function (result) {
-        if (result) {
-            setUIForAnyPermissionForYT();
-        }
-    });
-}
-
-function checkPermissionsForNetflix() {
-    chrome.permissions.contains({
-        permissions: ['tabs'],
-        origins: ["https://www.netflix.com/*"]
-    }, function (result) {
-        if (result) {
-            setUIForAnyPermissionForNetflix();
-        }
-    });
-}
 
 function checkPermissionsForNotifications() {
     chrome.permissions.contains({
@@ -180,29 +151,6 @@ function viewBlackList(items) {
     }
 }
 
-function grantPermissionForYT() {
-    chrome.permissions.request({
-        permissions: ['tabs'],
-        origins: ["https://www.youtube.com/*"]
-    }, function (granted) {
-        // The callback argument will be true if the user granted the permissions.
-        if (granted) {
-            setUIForAnyPermissionForYT();
-        }
-    });
-}
-
-function grantPermissionForNetflix() {
-    chrome.permissions.request({
-        permissions: ['tabs'],
-        origins: ["https://www.netflix.com/*"]
-    }, function (granted) {
-        // The callback argument will be true if the user granted the permissions.
-        if (granted) {
-            setUIForAnyPermissionForNetflix();
-        }
-    });
-}
 
 function grantPermissionForNotifications() {
     chrome.permissions.request({
@@ -215,17 +163,6 @@ function grantPermissionForNotifications() {
     });
 }
 
-function setUIForAnyPermissionForYT() {
-    document.getElementById('permissionSuccessedBlockForYT').hidden = false;
-    document.getElementById('permissionSuccessedBlockForYT').classList.add('inline-block');
-    document.getElementById('grantPermissionForYT').hidden = true;
-}
-
-function setUIForAnyPermissionForNetflix() {
-    document.getElementById('permissionSuccessedBlockForNetflix').hidden = false;
-    document.getElementById('permissionSuccessedBlockForNetflix').classList.add('inline-block');
-    document.getElementById('grantPermissionForNetflix').hidden = true;
-}
 
 function setUIForAnyPermissionForNotifications() {
     document.getElementById('permissionSuccessedBlockForNotifications').hidden = false;
