Projekt Upload

README.md

@@ -1,2 +1,10 @@
-# witzig-nicht-witzig
-Firefox Plugin - ersetzt die Daumen in YouTube durch Witzig und Nicht Witzig
+# Witzig! - Nicht Witzig!
+Dieses Firefox Plugin ersetzt die Daumen in YouTube getreu dem Känguru durch Witzig und Nicht Witzig.
+
+# Disclaimer
+Die Grafiken der Witzig! und Nicht Witzig! Stempel entstammen des Marc-Uwe-Kling Stickerpacks von Telegram. Ich beanspruche keine Rechte daran.
+Die Grafiken dienen als Platzhalter und werden in der weiteren Entwicklung durch gemeinfreie ersetzt.
+
+# Credits
+- Idee: Maike
+- Umsetzung: [Clemens Riese](https://clerie.de)

manifest.json

@@ -0,0 +1,30 @@
+{
+
+  "manifest_version": 2,
+  "name": "Witzig!",
+  "version": "0.1",
+
+  "description": "Replaces the thumb up and down in YouTube with an Witzig! and Nicht Witzig! stamp.",
+
+  "icons": {
+    "48": "icons/witzig-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": [
+        "*://*.youtube.com/watch*"
+      ],
+      "js": [
+        "witzig.js"
+      ]
+    }
+  ],
+
+  "web_accessible_resources": [
+    "media/stempel-witzig.png",
+    "media/sticker-witzig.png",
+    "media/sticker-nicht-witzig.png"
+  ]
+
+}

witzig.js

@@ -0,0 +1,71 @@
+const load_end_check_path = 'html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-watch.style-scope.ytd-page-manager.hide-skeleton div#top.style-scope.ytd-watch div#container.style-scope.ytd-watch div#main.style-scope.ytd-watch div#info.style-scope.ytd-watch div#info-contents.style-scope.ytd-watch ytd-video-primary-info-renderer.style-scope.ytd-watch div#container.style-scope.ytd-video-primary-info-renderer div#info.style-scope.ytd-video-primary-info-renderer div#menu-container.style-scope.ytd-video-primary-info-renderer div#menu.style-scope.ytd-video-primary-info-renderer ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer div#top-level-buttons.style-scope.ytd-menu-renderer';
+
+const thumb_up_path = 'html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-watch.style-scope.ytd-page-manager.hide-skeleton div#top.style-scope.ytd-watch div#container.style-scope.ytd-watch div#main.style-scope.ytd-watch div#info.style-scope.ytd-watch div#info-contents.style-scope.ytd-watch ytd-video-primary-info-renderer.style-scope.ytd-watch div#container.style-scope.ytd-video-primary-info-renderer div#info.style-scope.ytd-video-primary-info-renderer div#menu-container.style-scope.ytd-video-primary-info-renderer div#menu.style-scope.ytd-video-primary-info-renderer ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer div#top-level-buttons.style-scope.ytd-menu-renderer ytd-toggle-button-renderer.style-scope.ytd-menu-renderer.style-default-active.force-icon-button a.yt-simple-endpoint.style-scope.ytd-toggle-button-renderer yt-icon-button#button.style-scope.ytd-toggle-button-renderer.style-default-active button#button.style-scope.yt-icon-button yt-icon.style-scope.ytd-toggle-button-renderer';
+const thumb_down_path = 'html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-watch.style-scope.ytd-page-manager.hide-skeleton div#top.style-scope.ytd-watch div#container.style-scope.ytd-watch div#main.style-scope.ytd-watch div#info.style-scope.ytd-watch div#info-contents.style-scope.ytd-watch ytd-video-primary-info-renderer.style-scope.ytd-watch div#container.style-scope.ytd-video-primary-info-renderer div#info.style-scope.ytd-video-primary-info-renderer div#menu-container.style-scope.ytd-video-primary-info-renderer div#menu.style-scope.ytd-video-primary-info-renderer ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer div#top-level-buttons.style-scope.ytd-menu-renderer ytd-toggle-button-renderer.style-scope.ytd-menu-renderer.style-text.force-icon-button a.yt-simple-endpoint.style-scope.ytd-toggle-button-renderer yt-icon-button#button.style-scope.ytd-toggle-button-renderer.style-text button#button.style-scope.yt-icon-button yt-icon.style-scope.ytd-toggle-button-renderer';
+
+const thumb_up_container_path = 'html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-watch.style-scope.ytd-page-manager.hide-skeleton div#top.style-scope.ytd-watch div#container.style-scope.ytd-watch div#main.style-scope.ytd-watch div#info.style-scope.ytd-watch div#info-contents.style-scope.ytd-watch ytd-video-primary-info-renderer.style-scope.ytd-watch div#container.style-scope.ytd-video-primary-info-renderer div#info.style-scope.ytd-video-primary-info-renderer div#menu-container.style-scope.ytd-video-primary-info-renderer div#menu.style-scope.ytd-video-primary-info-renderer ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer div#top-level-buttons.style-scope.ytd-menu-renderer ytd-toggle-button-renderer.style-scope.ytd-menu-renderer.style-default-active.force-icon-button a.yt-simple-endpoint.style-scope.ytd-toggle-button-renderer yt-icon-button#button.style-scope.ytd-toggle-button-renderer.style-default-active';
+const thumb_down_container_path = 'html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-watch.style-scope.ytd-page-manager.hide-skeleton div#top.style-scope.ytd-watch div#container.style-scope.ytd-watch div#main.style-scope.ytd-watch div#info.style-scope.ytd-watch div#info-contents.style-scope.ytd-watch ytd-video-primary-info-renderer.style-scope.ytd-watch div#container.style-scope.ytd-video-primary-info-renderer div#info.style-scope.ytd-video-primary-info-renderer div#menu-container.style-scope.ytd-video-primary-info-renderer div#menu.style-scope.ytd-video-primary-info-renderer ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer div#top-level-buttons.style-scope.ytd-menu-renderer ytd-toggle-button-renderer.style-scope.ytd-menu-renderer.style-text.force-icon-button a.yt-simple-endpoint.style-scope.ytd-toggle-button-renderer yt-icon-button#button.style-scope.ytd-toggle-button-renderer.style-text';
+
+/*
+var thumb = false;
+
+function get_thumb() {
+
+  thumb = document.querySelector(thumb_up_path);
+  if(!thumb) {
+    setTimeout(get_thumb, 100);
+  }
+  else{
+    var witzig_stamp = document.createElement('img');
+    witzig_stamp.setAttribute('src', browser.extension.getURL("media/sticker-witzig.png"));
+    witzig_stamp.style.width = "100%";
+
+    document.querySelector(thumb_up_container_path).style.width = "100px";
+
+    thumb.innerHTML = "";
+    thumb.appendChild(witzig_stamp);
+  }
+}
+
+get_thumb();
+
+*/
+
+function resize_container(css_path, width) {
+  document.querySelector(css_path).style.width = width;
+}
+
+function inject_image(css_path, image_path) {
+  var space = document.querySelector(css_path);
+  var image = document.createElement('img');
+  image.setAttribute('src', image_path);
+  image.style.width = "100%";
+  space.innerHTML = "";
+  space.appendChild(image);
+}
+
+
+function inject() {
+  resize_container(thumb_up_container_path, "100px");
+  resize_container(thumb_down_container_path, "100px");
+
+  inject_image(thumb_up_path, browser.extension.getURL("media/sticker-witzig.png"));
+  inject_image(thumb_down_path, browser.extension.getURL("media/sticker-nicht-witzig.png"));
+}
+
+
+var loaded = false;
+
+function loading() {
+  loaded = document.querySelector(load_end_check_path);
+  if (loaded) {
+    inject();
+  }
+  else{
+    setTimeout(loading, 100);
+  }
+}
+
+
+
+loading();