not happening

change name - wompchat
overlay attempt was made. turns out cant link obs to chrome extension web page. added greenscreen option instead. best i can do until chat bot is made. need a web page hosted that can be manipulated and can be linked into obs.
some other unrelated fixes - minor bugs
added escape key for popup
expanded pupup window to full width of chat

package.json

@@ -1,6 +1,6 @@
 {
   "name": "WompChat",
-  "version": "1.0.4",
+  "version": "1.0.3",
   "description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.",
   "scripts": {
     "start": "webpack --progress --watch",

src/chat_overlay.js

@@ -1,12 +1,50 @@
+import './stylus/content.styl';
+import './stylus/chat_overlay.styl';
+
+
 const message_container =  document.getElementById("message_container");
 
-
 chrome.runtime.onMessage.addListener(
-    function(request, sender, sendResponse) {
+  function(request, sender, sendResponse) {
 
-      if (request.message == "messageNode"){
-        message_container.innerHTML += request.node;
-        message_container.scrollBy(message_container.scrollHeight);
-        return;
+    if(sender.origin == "https://www.youtube.com"){
+      
+      if (request.message == "preloadMessages"){
+        message_container.prepend(convertToHTMLElm(request.node));
+        message_container.scrollIntoView({block: 'end'});
       }
-});
+
+      if (request.message == "newMessage"){
+        message_container.append(convertToHTMLElm(request.node));
+        message_container.scrollIntoView({block: 'end'});
+      }
+
+      if (request.message == "removeMessage"){
+        destroyMessage(convertToHTMLElm(request.node));
+      }
+    }
+  }
+);
+
+function convertToHTMLElm(node){
+
+  //var node = new DOMParser().parseFromString(node, 'text/html').documentElement;
+  var temp = document.createElement('div');
+  temp.innerHTML = node;
+  node = temp.firstChild;
+
+  return node;
+}
+
+function destroyMessage(node){
+
+  const messageId = node.getAttribute('message-id');
+
+  console.log(messageId);
+  console.log(message);
+
+  const message = document.querySelectorAll(`[message-id=${messageId}]`);
+  if(message != undefined){
+    message.destroy();
+  }
+}

src/config.js

@@ -17,6 +17,7 @@ const CONFIG = {
     setTwitchColors: false,
     setLiveChat: true,
     allowTextSlider: false,
+    setGreenScreen: false,
 
     // Var
     textSizeSlider: 'inherit',

src/content/ChatScroller.js

@@ -29,7 +29,7 @@ class ChatScroller {
   }
   
   scroll() {
-    this.scroller.scrollTop = 9999;
+    this.scroller.scrollIntoView({block: 'end'});
   }
 
   getScroller() {

src/content/ChatWatcher.js

@@ -41,6 +41,10 @@ class ChatWatcher {
       const node = messages[i];
       if(this.isMessageNode(node)) {
         const message = new Message(node);
+     
+        // chrome.runtime.sendMessage({message: "preloadMessages", node: node.outerHTML}, function(response) {
+        //   // dont need to do anything
+        // });
       }
     }
   }
@@ -59,6 +63,11 @@ class ChatWatcher {
             const node = addedNodes[i];
             if(this.isMessageNode(node)) {
               this.onNewMessage(node);
+       
+              // send message
+              // chrome.runtime.sendMessage({message: "newMessage", node: node.outerHTML}, function(response) {
+              //   // dont need to do anything
+              // });
             }
           }
         }
@@ -190,6 +199,14 @@ class ChatWatcher {
       console.log('emote popup button clicked');
     });
 
+    // escape for popup div
+    document.onkeydown = function(evt) {
+      if (evt.key === "Escape" && !popUpDiv.classList.contains('hideElement')) {
+        popUpDiv.classList.toggle('hideElement');
+        return;
+      }
+  };
+
     //  get input area
     var inputArea = document.querySelector('#input.yt-live-chat-text-input-field-renderer');
     var inputAreaLabel = document.querySelector('#label.yt-live-chat-text-input-field-renderer');
@@ -211,6 +228,7 @@ class ChatWatcher {
     }
 
     console.log((keysITer.length+1) + " Emotes Added");
+
   }// end addEmotePopup
 
   ///////////////////////////////////////////////////////////////////

src/content/Emotes/index.js

@@ -105,6 +105,10 @@ class Emotes {
         url = urls[1];
       }
 
+      //  fix for overlay, remove "//" at start of url 
+      var protocol = "https:";
+      url = protocol.concat(url);
+
       this.dictionary.set(name, new Emote({ code: name, url }));
       this.franker_Dictionary.set(name, new Emote({ code: name, url }));
     }

src/content/Message.js

@@ -1,9 +1,6 @@
 import Emotes from './Emotes';
 import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
 
-let chat_overlay_enabled = false;
-
-
 class Message {
   constructor(messageNode) {
     this.node = messageNode;
@@ -20,10 +17,6 @@ class Message {
       this.setHtml();
       this.watch();
     }
-
-    chrome.runtime.sendMessage({message: "messageNode", node: messageNode.outerHTML}, function(response) {
-      // dont need to do anything
-    });
   }
 
   get textNode() {

src/content/index.js

@@ -74,6 +74,14 @@ class Main {
     }
 
     ///////////////////////////////////////////////////////////////////
+
+    //Live Chat Default Option
+    if (PersistentSyncStorage.data.options.setGreenScreen) {
+      var chat = document.querySelector('yt-live-chat-item-list-renderer');
+      chat.classList.add('green_sceen');
+    } else {
+      // do nothing, let user pick option if not set as default in options menu
+    }
   }
 
   init() {

src/html/chat_overlay.html

@@ -5,14 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Chat Overlay</title>
-    <link rel="stylesheet" href="./youtube_styling.css">
+    <link rel="stylesheet" href="./youtube.css">
   </head>
   <body>
-    <style>
-      yt-live-chat-text-message-renderer{
-        background-color: transparent !important;
-      }
-    </style>
     <div id="message_container"></div>
     <script src="../chat_overlay.js"></script>
   </body>

src/html/options.html

@@ -115,6 +115,13 @@
           </div>
         </div>
 
+        <div class="options-table">
+          <div class="option-row">
+            <div class="option-cell"><label for="setGreenScreen">Green Screen Chat</label></div>
+            <div class="option-cell"><input disabled type="checkbox" id="setGreenScreen" class="option-input"></div>
+          </div>
+        </div>
+
       </div>
 
       <hr>
@@ -138,7 +145,8 @@
       </span>
       
       <hr>
-      <button class="chat_overlay" id="chat_overlay" >Chat Overlay</button>
+      
+      <!-- <button class="chat_overlay" id="chat_overlay" >Chat Overlay</button> -->
 
     <div id="save-status">&nbsp;</div>
   </div>

src/options.js

@@ -113,16 +113,20 @@ PersistentSyncStorage.on('ready', () => {
     input.addEventListener('change', inputOnChange);
 
     switch (input.id) {
-
       case 'enableBTTVEmotes':
         input.removeAttribute('disabled');
         break;
 
-        if(PersistentSyncStorage.data.options.allowTextSlider == true){
-          textSizeSlider.disabled = false;
-        }else{
-          textSizeSlider.disabled = true;
-        }
+      case 'enableFrankerEmotes':
+        input.removeAttribute('disabled');
+        break;
+
+      case 'enableTwitchEmotes':
+        input.removeAttribute('disabled');
+        break;
+
+      case 'kappaFix':
+        input.removeAttribute('disabled');
         break;
 
       case 'theaterModeFix':
@@ -157,10 +161,6 @@ PersistentSyncStorage.on('ready', () => {
         input.removeAttribute('disabled');
         break;
 
-      case 'allowTextSlider' :
-        //
-        break;
-
       case 'allowTextSlider':
         input.removeAttribute('disabled');
         if(PersistentSyncStorage.data.options.allowTextSlider == true){
@@ -170,6 +170,10 @@ PersistentSyncStorage.on('ready', () => {
         }
         break;
 
+      case 'setGreenScreen':
+        input.removeAttribute('disabled');
+        break;
+
       default:
         // shouldn't get hete if handled
         break;
@@ -182,7 +186,7 @@ infoButton.addEventListener('click', function(){
   chrome.tabs.create({ url: 'https://wompmacho.com/wompchat' });
 });
 
-var chat_overlay = document.getElementById('chat_overlay');
-chat_overlay.addEventListener('click', function(){
-  chrome.tabs.create({ url: 'html/chat_overlay.html' });
-});
+// var chat_overlay = document.getElementById('chat_overlay');
+// chat_overlay.addEventListener('click', function(){
+//   chrome.tabs.create({ url: 'html/chat_overlay.html' });
+// });

src/stylus/chat_overlay.styl

@@ -0,0 +1,40 @@
+html
+  overflow: scroll;
+  overflow-x: hidden;
+  background-color:#00ff00 !important
+
+::-webkit-scrollbar 
+  width: 0px;  
+  background: transparent;  
+
+::-webkit-scrollbar-thumb 
+  background: #FF0000;
+
+yt-live-chat-text-message-renderer 
+  font-family: Impact, Charcoal, sans-serif !important
+  background-color: transparent !important
+  #timestamp
+    font-size: 1.5em !important
+    vertical-align: middle !important
+    color: white !important
+    font-weight: 700 !important
+  img
+    vertical-align: middle !important
+    height: 2em !important;
+    width: auto !important;
+  #author-name
+    font-size: 1.5em !important
+    vertical-align: middle !important
+    color: white !important
+    font-weight: 700 !important
+  #message
+    font-size: 2em !important
+    color: white !important
+  #Emote
+    vertical-align: middle
+
+
+
+.message_container
+  overflow-y: scroll !important;
+  scroll-behavior: smooth

src/stylus/content.styl

@@ -42,22 +42,22 @@
   #content
     display: inline-block
     vertical-align: middle
-  #timestamp.yt-live-chat-text-message-renderer
-    font-size: 1em
-    display: inline-block 
-    vertical-align: middle
 
 .showTimeStamp
   #timestamp.yt-live-chat-text-message-renderer
     display: inline-block 
+    vertical-align: middle
+
 
 .Emote
+  height: 100%;
+  vertical-align: bottom;
+  
   img
     height: 1.75em
     align-self: center
-    vertical-align: sub;
     display:inline-block
-    vertical-align: middle
+    vertical-align: middle !important
 
 emote_div:hover
    background-size: 100% //100% 
@@ -213,3 +213,10 @@ emote_div:hover
   right: 0px  !important
   top: 0px  !important
   border: 1px solid #4e4e4e
+
+.green_sceen
+  background-color:  #00ff00 !important
+  font-weight: 700 !important
+  -webkit-text-stroke: 1px #000000
+  yt-live-chat-text-message-renderer:nth-child(odd)
+    background-color:  #00ff00 !important