initial commit: the extension detects when the detailed video preview…

… is opened or closed

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

main.js

@@ -0,0 +1,77 @@
+
+
+// // const readVideoTitleFromPreviewDialogElement = (element) => {
+// //     const videoTitleLogoElements = element.querySelectorAll("previewModal--player-titleTreatment-logo");
+// //     if (videoTitleLogoElements.length > 0) {
+// //         return videoTitleLogoElements[0].getAttribute("title");
+// //     }
+// //     return null;
+// // };
+
+// // const readYearFromPreviewDialogElement = (element) => {
+// //     const yearDivElements = element.querySelectorAll(".previewModal--detailsMetadata-left .year");
+// //     if (yearDivElements.length > 0) {
+// //         return yearDivElements[0].innerText;
+// //     }
+// //     return null;
+// // };
+
+// // const readDataFromPreviewDialogElement = (element) => {
+// //     return {
+// //         title: readVideoTitleFromPreviewDialogElement(element),
+// //         year: readYearFromPreviewDialogElement(element)
+// //     };
+// // }
+
+const attemptToFindElementByClassName = (className) => {
+    const matches = document.getElementsByClassName(className);
+    let element = null;
+    if (matches.length > 0) {
+        element = matches[0];
+    }
+    return element;
+};
+
+// const onDetailedVideoPreviewDialogOpened = (handler) => {
+//     const DETAILED_PREVIEW_DIALOG_CLASSNAME = "previewModal--container detail-modal";
+//     const dialog = attemptToFindElementByClassName(DETAILED_PREVIEW_DIALOG_CLASSNAME);
+
+
+//     console.log(dialog);
+// };
+
+
+const isDetailedVideoPreviewMutation = (mutation) => {
+    const targetClasses = mutation.target.classList;
+    return mutation.type === "attributes"
+        && targetClasses.contains("lolomo")
+        && targetClasses.contains("is-fullbleed");
+};
+
+const handleDetailedVideoPreviewMutation = (mutation) => {
+    if (mutation.target.classList.contains("has-open-jaw")) {
+        console.log("The detailed video preview is opened.", mutation);
+    } else {
+        console.log("The detailed video preview has been closed.", mutation);
+    }
+};
+
+const handleDocumentBodyMutations = (mutations) => {
+    mutations.forEach(mutation => {
+        if (isDetailedVideoPreviewMutation(mutation)) {
+            handleDetailedVideoPreviewMutation(mutation);
+        }
+    });
+};
+
+const mainViewNode = document.getElementsByClassName("mainView")[0];
+const config = {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: [ "class" ],
+    attributeOldValue: true
+};
+
+const observer = new MutationObserver(handleDocumentBodyMutations);
+observer.observe(mainViewNode, config);

manifest.json

@@ -0,0 +1,12 @@
+{
+    "name": "Netflix Ratings Chrome Extension",
+    "description": "Insert movvie and series rating into the Netflix interface.",
+    "version": "1.0",
+    "manifest_version": 3,
+    "content_scripts": [
+      {
+        "matches": [ "https://www.netflix.com/*" ],
+        "js": ["main.js"]
+      }
+    ]
+  }