Merge pull request #11 from mynovelhost/main

Change chrome js injection method

Extensions/chrome/background.js

@@ -1,46 +1,41 @@
 const apiUrl = "https://return-youtube-dislike-api.azurewebsites.net";
+const securityToken = Math.random().toString(36).substring(2, 15);
 
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  if (request.message === "get_auth_token") {
-    // chrome.identity.getAuthToken({ interactive: true }, function (token) {
-    //   console.log(token);
-    //   chrome.identity.getProfileUserInfo(function (userInfo) {
-    //     console.log(JSON.stringify(userInfo));
-    //   });
-    // });
-  } else if (request.message === "log_off") {
-    // console.log("logging off");
-    // chrome.identity.clearAllCachedAuthTokens(() => console.log("logged off"));
-  } else if (request.message == "set_state") {
-    console.log(request);
-    // chrome.identity.getAuthToken({ interactive: true }, function (token) {
-    let token = "";
-    fetch(`${apiUrl}/votes?videoId=${request.videoId}`, {
-      method: "GET",
-      headers: {
-        Accept: "application/json",
-        Authorization: "Bearer " + token,
-      },
-    })
-      .then((response) => response.json())
-      .then((response) => {
-        console.log(response);
-        sendResponse(response);
-      })
-      .catch();
-    //});
-    return true;
-  }
+	sendResponse(securityToken);
 });
 
-chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
-  if (changeInfo.status == "complete") {
-    if (tab.url && tab.url.indexOf("youtube.") < 0) return;
-    chrome.tabs.get(tabId, (tab) => {
-      chrome.scripting.executeScript({
-        target: { tabId: tab.id },
-        files: ["script.js"],
-      });
-    });
-  }
-});
+chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) => {
+    if (request.securityToken === securityToken) {
+        if (request.message === "get_auth_token") {
+            // chrome.identity.getAuthToken({ interactive: true }, function (token) {
+            //   console.log(token);
+            //   chrome.identity.getProfileUserInfo(function (userInfo) {
+            //     console.log(JSON.stringify(userInfo));
+            //   });
+            // });
+        } else if (request.message === "log_off") {
+            // console.log("logging off");
+            // chrome.identity.clearAllCachedAuthTokens(() => console.log("logged off"));
+        } else if (request.message == "set_state") {
+            // console.log(request);
+            // chrome.identity.getAuthToken({ interactive: true }, function (token) {
+            let token = "";
+            fetch(`${apiUrl}/votes?videoId=${request.videoId}`, {
+                    method: "GET",
+                    headers: {
+                        Accept: "application/json",
+                        Authorization: "Bearer " + token,
+                    },
+                })
+                .then((response) => response.json())
+                .then((response) => {
+                    console.log(response);
+                    sendResponse(response);
+                })
+                .catch();
+            //});
+            return true;
+        }
+    }
+});

Extensions/chrome/content-script.js

@@ -0,0 +1,10 @@
+chrome.runtime.sendMessage({}, (securityToken) => {
+	var script = document.createElement('script');
+	script.setAttribute("security-token", securityToken);
+	script.setAttribute("extension-id", chrome.runtime.id);
+	script.src = chrome.runtime.getURL('script.js');
+	script.onload = function() {
+		this.remove();
+	};
+	(document.head || document.documentElement).appendChild(script);
+});

Extensions/chrome/manifest.json

@@ -6,7 +6,6 @@
   "background": {
     "service_worker": "background.js"
   },
-  "permissions": ["activeTab", "scripting"],
   "host_permissions": ["*://*.youtube.com/*"],
   "action": {
     "default_popup": "popup.html"
@@ -19,7 +18,16 @@
     {
       "matches": ["*://*.youtube.com/*"],
       "js": ["content-script.js"],
-      "run_at": "document_idle"
+      "run_at": "document_start"
     }
+  ],
+  "externally_connectable": {
+    "matches": ["*://*.youtube.com/*"]
+  },
+  "web_accessible_resources": [
+	{
+	  "resources": ["script.js"],
+      "matches": ["*://*.youtube.com/*"]
+	}
   ]
-}
+}

Extensions/chrome/script.js

@@ -1,122 +1,122 @@
-function getButtons() {
-  return document
-    .getElementById("menu-container")
-    ?.querySelector("#top-level-buttons-computed");
-}
-
-function getLikeButton() {
-  return getButtons().children[0];
-}
-
-function getDislikeButton() {
-  return getButtons().children[1];
-}
-
-function isVideoLiked() {
-  return getLikeButton().classList.contains("style-default-active");
-}
-
-function isVideoDisliked() {
-  return getDislikeButton().classList.contains("style-default-active");
-}
-
-function isVideoNotLiked() {
-  return getLikeButton().classList.contains("style-text");
-}
-
-function isVideoNotDisliked() {
-  return getDislikeButton().classList.contains("style-text");
-}
-
-function getState() {
-  if (isVideoLiked()) {
-    return "liked";
-  }
-  if (isVideoDisliked()) {
-    return "disliked";
-  }
-  return "neutral";
-}
-
-function setLikes(likesCount) {
-  getButtons().children[0].querySelector("#text").innerText = likesCount;
-}
-
-function setDislikes(dislikesCount) {
-  getButtons().children[1].querySelector("#text").innerText = dislikesCount;
-}
-
-function setState() {
-  chrome.runtime.sendMessage(
-    {
-      message: "set_state",
-      videoId: getVideoId(),
-      state: getState(),
-    },
-    function (response) {
-      if (response != undefined) {
-        const formattedDislike = numberFormat(response.dislikes);
-        // setLikes(response.likes);
-        console.log(response);
-        setDislikes(formattedDislike);
-      } else {
-      }
-    }
-  );
-}
-
-function likeClicked() {
-  console.log("like" + getState());
-  setState();
-}
-
-function dislikeClicked() {
-  console.log("dislike" + getState());
-  setState();
-}
-
-function setInitalState() {
-  setState();
-}
-
-function getVideoId() {
-  const urlParams = new URLSearchParams(window.location.search);
-  const videoId = urlParams.get("v");
-  return videoId;
-}
-
-function isVideoLoaded() {
-  const videoId = getVideoId();
-  return (
-    document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null
-  );
-}
-
-function numberFormat(numberState) {
-  const userLocales = navigator.language;
-  const formatter = Intl.NumberFormat(userLocales, { notation: "compact" });
-  return formatter.format(numberState);
-}
-
-function setEventListeners(evt) {
-  function checkForJS_Finish() {
-    if (getButtons()?.offsetParent && isVideoLoaded()) {
-      clearInterval(jsInitChecktimer);
-      const buttons = getButtons();
-      if (!window.returnDislikeButtonlistenersSet) {
-        buttons.children[0].addEventListener("click", likeClicked);
-        buttons.children[1].addEventListener("click", dislikeClicked);
-        window.returnDislikeButtonlistenersSet = true;
-      }
-      setInitalState();
-    }
-  }
-
-  if (window.location.href.indexOf("watch?") >= 0) {
-    var jsInitChecktimer = setInterval(checkForJS_Finish, 111);
-  }
-}
-
-setEventListeners();
-
-//window.addEventListener("hashchange", setEventListeners, false);
+(function(securityToken, extensionId) {
+    function getButtons() {
+        return document
+            .getElementById("menu-container")
+            ?.querySelector("#top-level-buttons-computed");
+    }
+
+    function getLikeButton() {
+        return getButtons().children[0];
+    }
+
+    function getDislikeButton() {
+        return getButtons().children[1];
+    }
+
+    function isVideoLiked() {
+        return getLikeButton().classList.contains("style-default-active");
+    }
+
+    function isVideoDisliked() {
+        return getDislikeButton().classList.contains("style-default-active");
+    }
+
+    function isVideoNotLiked() {
+        return getLikeButton().classList.contains("style-text");
+    }
+
+    function isVideoNotDisliked() {
+        return getDislikeButton().classList.contains("style-text");
+    }
+
+    function getState() {
+        if (isVideoLiked()) {
+            return "liked";
+        }
+        if (isVideoDisliked()) {
+            return "disliked";
+        }
+        return "neutral";
+    }
+
+    function setLikes(likesCount) {
+        getButtons().children[0].querySelector("#text").innerText = likesCount;
+    }
+
+    function setDislikes(dislikesCount) {
+        getButtons().children[1].querySelector("#text").innerText = dislikesCount;
+    }
+
+    function setState() {
+        chrome.runtime.sendMessage(extensionId, {
+				securityToken: securityToken,
+                message: "set_state",
+                videoId: getVideoId(),
+                state: getState(),
+            },
+            function(response) {
+                if (response != undefined) {
+                    const formattedDislike = numberFormat(response.dislikes);
+                    // setLikes(response.likes);
+                    console.log(response);
+                    setDislikes(formattedDislike);
+                } else {}
+            }
+        );
+    }
+
+    function likeClicked() {
+        console.log("like" + getState());
+        setState();
+    }
+
+    function dislikeClicked() {
+        console.log("dislike" + getState());
+        setState();
+    }
+
+    function setInitalState() {
+        setState();
+    }
+
+    function getVideoId() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const videoId = urlParams.get("v");
+        return videoId;
+    }
+
+    function isVideoLoaded() {
+        const videoId = getVideoId();
+        return (
+            document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null
+        );
+    }
+
+    function numberFormat(numberState) {
+        const userLocales = navigator.language;
+        const formatter = Intl.NumberFormat(userLocales, { notation: "compact" });
+        return formatter.format(numberState);
+    }
+
+    function setEventListeners(evt) {
+        function checkForJS_Finish() {
+            if (getButtons()?.offsetParent && isVideoLoaded()) {
+                clearInterval(jsInitChecktimer);
+                const buttons = getButtons();
+                if (!window.returnDislikeButtonlistenersSet) {
+                    buttons.children[0].addEventListener("click", likeClicked);
+                    buttons.children[1].addEventListener("click", dislikeClicked);
+                    window.returnDislikeButtonlistenersSet = true;
+                }
+                setInitalState();
+            }
+        }
+
+        if (window.location.href.indexOf("watch?") >= 0) {
+            var jsInitChecktimer = setInterval(checkForJS_Finish, 111);
+        }
+    }
+
+    setEventListeners();
+
+})(document.currentScript.getAttribute("security-token"), document.currentScript.getAttribute("extension-id"));