enhanced-aniwatch.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}

enhancements/animeRequests.js

@@ -1,41 +1,42 @@
-const starIcon = "star";
-const scripts = [
-    changeFollowedStarColor,
-    changeOwnBorderColor,
-]
-
-executeAfterPreload(initScripts);
-
-function initScripts() {
+registerScript(node => {
     // run the scripts
-    runScripts();
-
-    // because of late loading in the request list we have to run the codes each time the list changes
-    document.querySelector("md-list").addEventListener("DOMNodeInserted", event => runScripts(event), false);
+    if (isHtmlElement(node)) {
+        changeFollowedStarColor(node);
+        changeOwnBorderColor(node);
     }
+});
 
-function runScripts() {
-    scripts.forEach(script => script());
-}
+function changeFollowedStarColor(node) {
+    const starIcon = "star";
 
-function changeFollowedStarColor() {
     // find stars
-    let followedItems = Array.from(document.querySelectorAll("i")).filter(i => i.innerText == starIcon);
+    let followedItems = Array.from(node.querySelectorAll("i")).filter(i => i.innerText.trim() === starIcon);
 
     // change color
     followedItems.forEach(item => item.style.color = aniBlue);
 }
 
-function changeOwnBorderColor() {
-    // find items -> all 
-    let requestItems = document.querySelectorAll("md-list-item");
+function changeOwnBorderColor(node) {
+    const targetTagName = "MD-LIST-ITEM"; // tagName is upper case
 
-    // change border color if profile link is not "false"
-    requestItems.forEach(item => {
+    let updateFunc = item => {
         let profileLink = item.querySelectorAll("a[href*='/profile/']:not([href='/profile/false'])");
 
         if (profileLink.length > 0) {
             item.style.borderColor = aniBlue
         }
+    }
+
+    // are we target tag?
+    if (node.tagName === targetTagName) {
+        updateFunc(node);
+    } else {
+        // find items -> all 
+        let requestItems = node.querySelectorAll("md-list-item");
+
+        // change border color if profile link is not "false"
+        requestItems.forEach(item => {
+            updateFunc(item);
         });
     }
+}

manifest.json

@@ -5,20 +5,20 @@
       "manifest_version": 2,
       "author": "Serraniel",
       "homepage_url": "https://github.com/Serraniel/EnhancedAniwatch",
-    "content_scripts": [
-      {
+      "content_scripts": [{
               "matches": [
                   "*://aniwatch.me/*"
               ],
               "js": [
                   "utils/colors.js",
+                  "utils/helpers.js",
                   "utils/aniwatchCore.js"
               ],
               "run_at": "document_start"
           },
           {
               "matches": [
-          "*://aniwatch.me/requests"
+                  "*://aniwatch.me/*"
               ],
               "js": [
                   "enhancements/animeRequests.js"

utils/aniwatchCore.js

@@ -1,10 +1,23 @@
-function executeAfterPreload(func){
-    let preLoader = document.getElementById('preloader');
+let __scripts = [];
 
-    let loop = setInterval(() => {
-        if(preLoader.style.display==="none"){
-            clearInterval(loop);
-            func();
+function registerScript(func) {
+    __scripts.push(func);
 }
-    }, 100);
+
+function runScripts(node) {
+    __scripts.forEach(script => script(node));
 }
+
+let observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+        for (let i = 0; i < mutation.addedNodes.length; i++) {
+            runScripts(mutation.addedNodes[i]);
+        }
+    });
+});
+
+observer.observe(document.documentElement || document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true
+});

utils/helpers.js

@@ -0,0 +1,3 @@
+function isHtmlElement(object) {
+    return object instanceof HTMLElement;
+}