Merge pull request #24 from wompmacho/hotfix-chat-scroll-break

patched scroller issue
2020-11-13 16:45:42 -05:00 · 2020-11-13 16:45:27 -05:00 · 2020-11-13 05:17:27 -05:00 · 2020-11-13 05:16:24 -05:00 · 2020-11-12 06:05:32 -05:00 · 2020-11-11 16:59:46 -05:00
76 changed files with 59823 additions and 856 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,8 @@
 dev-build
 node_modules
-build
+build
 *.psd
 *.ai
 cdn/
 artwork/
 .jshintrc
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
 MIT License
 Copyright (c) 2020 wompmacho
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -1,2 +1,8 @@
-# live-chat
+<p align="center">
  <img width="443" height="592" src="https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/gif/emotesMenu.gif">
 </p>
 # wompchat 
 [![Discord](https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic)](https://discord.gg/pVNnTDA) [![BTC](https://img.shields.io/static/v1?label=BTC&style=plastic&message=3QkKHVyT1nZLEeH8f77bUhXorXKPQs5gzN&color=red)](https://storage.googleapis.com/womp-website_cloudbuild/cdn/wompchat/img/btc.JPG)
 A Chrome Extension To Improve YouTube Livestream Chat
--- a/assets/fonts/youtube-sans-bold.ttf
+++ b/assets/fonts/youtube-sans-bold.ttf
--- a/assets/gif/clickUserNamesToAtThem.gif
+++ b/assets/gif/clickUserNamesToAtThem.gif
--- a/assets/gif/emotesMenu.gif
+++ b/assets/gif/emotesMenu.gif
--- a/assets/gif/optionsMenu.gif
+++ b/assets/gif/optionsMenu.gif
--- a/assets/gif/pinYourExtension.gif
+++ b/assets/gif/pinYourExtension.gif
--- a/assets/icons/icon.png
+++ b/assets/icons/icon.png
--- a/assets/icons/icon128.png
+++ b/assets/icons/icon128.png
--- a/assets/icons/icon48.png
+++ b/assets/icons/icon48.png
--- a/assets/icons/icon512.png
+++ b/assets/icons/icon512.png
--- a/assets/screenShots/screenShot1.jpg
+++ b/assets/screenShots/screenShot1.jpg
--- a/assets/screenShots/screenShot2.jpg
+++ b/assets/screenShots/screenShot2.jpg
--- a/assets/screenShots/screenShot3.jpg
+++ b/assets/screenShots/screenShot3.jpg
--- a/html/options.html
+++ b/html/options.html
@@ -1,165 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <style>
        body {
          font-family: sans-serif;
          padding: 10px;
          width: 400px;
        }
        .hideDiv {
            display: none;
        }
    </style>
    <meta charset="UTF-8">
    <title>Options</title>
  </head>
  <body>
    <span style="display:inline-block;vertical-align: middle; margin-right: 2%;">
      <img src="../assets/icons/icon128.png" alt="🔴" style="height: 2.5em;">
    </span>
    <span style="display:inline-block;vertical-align: middle;">
      <h1>Live Chat Options</h1>
    </span>
    <span class="">
      <button class="info_button" id="infoButton" >Info</button>
    </span>
    <br>
    <br>
    <div id="optionsMenu" class="tabcontent active">
      <div class="section">
        <h2 class="options-heading">Emote Options</h2>
        <div class="options-description"></div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="enableBTTVEmotes">Enable BTTV - Top, Trending and Global Emotes (200+)</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="enableBTTVEmotes" class="option-input"></div>
          </div>
        </div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="enableFrankerEmotes">Enable FrankerFacez - Top 100 emotes</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="enableFrankerEmotes" class="option-input"></div>
          </div>
        </div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="enableTwitchEmotes">Enable Twitch - Global emotes</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="enableTwitchEmotes" class="option-input"></div>
          </div>
        </div>
        <div class="hr"></div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="kappaFix">Kappa Fix</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="kappaFix" class="option-input"></div>
          </div>
        </div>
      </div>
      <div class="hr"></div>
      <div class="section">
        <h2 class="options-heading">Chat Options</h2>
        <div class="options-description"></div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="setLiveChat">Make LIVE CHAT Default</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="setLiveChat" class="option-input"></div>
          </div>
        </div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="theaterModeFix">Improved Theater Mode</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="theaterModeFix" class="option-input"></div>
          </div>
        </div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="setTwitchColors">Twitch Styling</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="setTwitchColors" class="option-input"></div>
          </div>
        </div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="hideAuthorIcons">Hide Author Icons</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="hideAuthorIcons" class="option-input"></div>
          </div>
        </div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="showTimeStamp">Show TimeStamp</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="showTimeStamp" class="option-input"></div>
          </div>
        </div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="hideWelcomBanner">Hide Welcome Banner</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="hideWelcomBanner" class="option-input"></div>
          </div>
        </div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="alternateLineColor">Alternate Line Colors</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="alternateLineColor" class="option-input"></div>
          </div>
        </div>
        <div class="options-table">
          <div class="option-row">
            <div class="option-cell"><label for="setAuthorColor">Colorful User Names</label></div>
            <div class="option-cell"><input disabled type="checkbox" id="setAuthorColor" class="option-input"></div>
          </div>
        </div>
      </div>
      <div class="hr"></div>
      <h2 class="options-heading">Font Size</h2>
      <span>
      </span>
      <span>
        <div class="options-table">
          <div class="option-row">
            <div class="slidecontainer">
              <input disabled type="range" min="1" max="50" value="13" class="slider option-input" id="textSizeSlider">
            </div>
            <div class="option-cell">
              <label for="allowTextSlider"></label>
            </div>
            <div class="option-cell">
              <input disabled type="checkbox" id="allowTextSlider" class="option-input">
            </div>
          </div>
        </div>
      </span>
    <div id="save-status">&nbsp;</div>
    <div class="omega"></div>
  </div>
    <script src="../options.js"></script>
  </body>
 </html>
--- a/html/welcome.html
+++ b/html/welcome.html
@@ -1,92 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Welcome Page</title>
  </head>
  <body>
    <div class="success-overlay">
      <div class="icon-container">
        <i class="material-icons">done</i>
      </div>
    </div>
    <div class="container">
      <div class="logo">
        <img src="../assets/icons/icon512.png" alt="Live Chat Logo">
      </div>
      <h1><span class="fw-light">Welcome to the </span><span class="fw-bold">Chat</span></h1>
      <p class="heading-note">This is still very beta</p>
      <hr>
      <div class="links_div">
        <a class="links_bottom" href="https://discord.gg/pVNnTDA" title="Join our Discord Community">Join our Discord Community</a>
        <a class="links_bottom" href="https://streamelements.com/wompmacho-5882/tip" title="Donations">Donations</a>
        <a class="links_bottom" href="https://www.youtube.com/wompmacho" title="Youtube">Youtube</a>
        <a class="links_bottom" href="mailto:wompmacho@gmail.com">Contact Me</a>
      </div>
      <hr>
      <h2>
        Soon to come:
      </h2>
      <ul>
        <li>Specific channel Emotes</li>
        <li>Search for Emote Panel</li>
        <li>Autocomplete for emote Selection</li>
        <li>Theater Mode Fix for that quality Stream and Chat time</li>
        <li>Moderation Options Popup</li>
        <li>User Profile Info Popup</li>
        <li>Other Styling Options</li>
      </ul>
      <hr>
      <h2>How To:</h2>
      <p>
        There is still a lot of stuff I am working on. This is very Beta at the moment so 
      </p>
      <h2>Use At Your Own Risk</h2>
      <p>
        This is a Chrome Extension for Youtube Live Streams, adding some Quality of Life improvements for the Chat. 
        Adds Top, Trending and Global (500ish) Emotes from popular sites. These Update with what is Trending. 
      </p>
      <p>
        Don't forget to pin this extension for easy access. 
      </p>
      <img src="../assets/gif/pinYourExtension.gif" alt="pinYourExtension.gif">
      <p>
        Youtube Live is slow to load its pages currently. 
        Give the extension a moment while the page's iframes are loading. 
        Once you see the Emote Panel Icon you can open the Emote Selection Panel.
      </p>
      <img src="../assets/gif/emotesMenu.gif" alt="pinYourExtension.gif">
      <p>        
        Over around 500 Top and Trending Emotes are loaded from popular sites. 
        You can Enable/Disable them in the Options Menu.
      </p>
      <img src="../assets/gif/optionsMenu.gif" alt="pinYourExtension.gif">
      <p>
        Can Also Click on UserNames To Autofill an @ Notification
      </p>
      <img src="../assets/gif/clickUserNamesToAtThem.gif" alt="pinYourExtension.gif">
      <h2>Use At Your Own Risk</h2>
      <h1>Enjoy!</h1>
    </div>
    <script src="../welcomePage.js"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
-  "name": "LiveChat",
+  "name": "WompChat",
-  "version": "1.0.2",
+  "version": "1.0.4",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -674,14 +674,6 @@
      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
      "dev": true
    },
    "axios": {
      "version": "0.19.2",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
      "requires": {
        "follow-redirects": "1.5.10"
      }
    },
    "babel-code-frame": {
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -1398,15 +1390,11 @@
      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
      "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
    },
    "date-fns": {
      "version": "1.30.1",
      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
    },
    "debug": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
      "dev": true,
      "requires": {
        "ms": "2.0.0"
      }
@@ -1883,14 +1871,6 @@
        "readable-stream": "^2.3.6"
      }
    },
    "follow-redirects": {
      "version": "1.5.10",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
      "requires": {
        "debug": "=3.1.0"
      }
    },
    "for-in": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -2681,7 +2661,8 @@
    "ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
      "dev": true
    },
    "nanomatch": {
      "version": "1.2.13",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "LiveChat",
+  "name": "WompChat",
-  "version": "1.0.2",
+  "version": "1.0.4",
  "description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.",
  "scripts": {
    "start": "webpack --progress --watch",
@@ -14,8 +14,6 @@
    "url": "git://github.com/wompmacho/live-chat.git"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "date-fns": "^1.29.0",
    "lodash": "^4.17.15",
    "preact": "^8.2.7",
    "uglifyjs-webpack-plugin": "^1.3.0"
--- a/src/assets/fonts/youtube-sans-bold.ttf
+++ b/src/assets/fonts/youtube-sans-bold.ttf
--- a/src/assets/gif/clickUserNamesToAtThem.gif
+++ b/src/assets/gif/clickUserNamesToAtThem.gif
--- a/src/assets/gif/emotesMenu.gif
+++ b/src/assets/gif/emotesMenu.gif
--- a/src/assets/gif/optionsMenu.gif
+++ b/src/assets/gif/optionsMenu.gif
--- a/src/assets/gif/pinYourExtension.gif
+++ b/src/assets/gif/pinYourExtension.gif
--- a/src/assets/gif/theaterMode.gif
+++ b/src/assets/gif/theaterMode.gif
--- a/src/assets/icons/3x.png
+++ b/src/assets/icons/3x.png
--- a/src/assets/icons/MonkaSSS.jpg
+++ b/src/assets/icons/MonkaSSS.jpg
--- a/src/assets/icons/blob.gif
+++ b/src/assets/icons/blob.gif
--- a/src/assets/icons/icon.psd
+++ b/src/assets/icons/icon.psd
--- a/src/assets/icons/icon128.png
+++ b/src/assets/icons/icon128.png
--- a/src/assets/icons/icon48.png
+++ b/src/assets/icons/icon48.png
--- a/src/assets/icons/icon512.png
+++ b/src/assets/icons/icon512.png
--- a/src/assets/icons/logo128.png
+++ b/src/assets/icons/logo128.png
--- a/src/assets/icons/logo_icon.svg
+++ b/src/assets/icons/logo_icon.svg
--- a/src/assets/icons/omegalul.png
+++ b/src/assets/icons/omegalul.png
--- a/src/assets/icons/pepepls.gif
+++ b/src/assets/icons/pepepls.gif
--- a/src/assets/screenShots/arrow.png
+++ b/src/assets/screenShots/arrow.png
--- a/src/assets/screenShots/extScreenShots.psd
+++ b/src/assets/screenShots/extScreenShots.psd
--- a/src/assets/screenShots/screen1.png
+++ b/src/assets/screenShots/screen1.png
--- a/src/assets/screenShots/screen2.png
+++ b/src/assets/screenShots/screen2.png
--- a/src/assets/screenShots/screen3.png
+++ b/src/assets/screenShots/screen3.png
--- a/src/assets/screenShots/screen4.png
+++ b/src/assets/screenShots/screen4.png
--- a/src/assets/screenShots/screenShot1.jpg
+++ b/src/assets/screenShots/screenShot1.jpg
--- a/src/assets/screenShots/screenShot2.jpg
+++ b/src/assets/screenShots/screenShot2.jpg
--- a/src/assets/screenShots/screenShot3.jpg
+++ b/src/assets/screenShots/screenShot3.jpg
--- a/src/assets/screenShots/screenShot4.jpg
+++ b/src/assets/screenShots/screenShot4.jpg
--- a/src/assets/screenShots/screenShot5.jpg
+++ b/src/assets/screenShots/screenShot5.jpg
--- a/src/background/Setup.js
+++ b/src/background/Setup.js
@@ -29,9 +29,9 @@ const ensure = () => {
      return true;
    };
-    chrome.tabs.create({ url: './html/welcome.html' });
+    chrome.tabs.create({ url: 'html/welcome.html' });
    chrome.runtime.onMessage.addListener(onSetupComplete);
-    console.log('Setup Complete');
+    console.log('Storage Setup Complete, Linking User To Welcome Page.');
  });
 };
--- a/src/background/index.js
+++ b/src/background/index.js
@@ -1,7 +1,5 @@
 import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
 import Setup from './Setup';
 import CONFIG from 'src/config';
 class Main {
--- a/src/chat_overlay.js
+++ b/src/chat_overlay.js
@@ -0,0 +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) {
    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();
  }
 }
--- a/src/config.js
+++ b/src/config.js
@@ -1,4 +1,3 @@
 const CONFIG = {
  defaultOptions: {
@@ -6,9 +5,9 @@ const CONFIG = {
    enableBTTVEmotes: true,
    enableFrankerEmotes: true,
    enableTwitchEmotes: true,
    kappaFix: true,
    // Chat Options
    kappaFix: true,
    theaterModeFix: false,
    setAuthorColor: false,
    showTimeStamp: false,
@@ -16,9 +15,12 @@ const CONFIG = {
    hideAuthorIcons: false,
    hideWelcomBanner: false,
    setTwitchColors: false,
    textSizeSlider: 'inherit',
    setLiveChat: true,
    allowTextSlider: false,
    setGreenScreen: false,
    // Var
    textSizeSlider: 'inherit',
  }
 };
--- a/src/content/ChatScroller.js
+++ b/src/content/ChatScroller.js
@@ -29,7 +29,7 @@ class ChatScroller {
  }
  scroll() {
-    this.scroller.scrollTop = 9999;
+    this.scroller.scrollTo(0, 9999);
  }
  getScroller() {
--- a/src/content/ChatWatcher.js
+++ b/src/content/ChatWatcher.js
@@ -2,8 +2,6 @@ import Emotes from './Emotes';
 import Message from './Message';
 import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
 class ChatWatcher {
  constructor() {
@@ -14,7 +12,6 @@ class ChatWatcher {
  }
  init() {
    return new Promise((res, rej) => {
      this.getChatContainer().then(Emotes.init).then(() => {
        this.addEmotePopup();
@@ -44,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
        // });
      }
    }
  }
@@ -54,8 +55,6 @@ class ChatWatcher {
      mutations.forEach(mutation => {
        const { addedNodes, removedNodes } = mutation;
        // Added nodes
@@ -64,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
              // });
            }
          }
        }
@@ -186,8 +190,6 @@ class ChatWatcher {
      emoteAppend(keysITer);
    }
    //  add div to doc
    chatButtonSelectionList.appendChild(popUpDiv);
@@ -197,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');
@@ -218,6 +228,7 @@ class ChatWatcher {
    }
    console.log((keysITer.length+1) + " Emotes Added");
  }// end addEmotePopup
  ///////////////////////////////////////////////////////////////////
--- a/src/content/Emotes/index.js
+++ b/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 }));
    }
--- a/src/content/Message.js
+++ b/src/content/Message.js
@@ -1,8 +1,6 @@
 import Emotes from './Emotes';
 import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
 var colorNumberIndex = 0;
 class Message {
  constructor(messageNode) {
    this.node = messageNode;
@@ -178,11 +176,6 @@ class Message {
    ///////////////////////////////////////////////////////////////////
    //  Set Alternate message Colors
    if (PersistentSyncStorage.data.options.alternateLineColor) {
      this.alternateLineColor();
    }   
  }// end setDefaultSelections
  setAuthorColor() {
@@ -209,29 +202,7 @@ class Message {
      }
    }    
  }
  ///////////////////////////////////////////////////////////////////
  //  changes color every line
  alternateLineColor(){
      if(colorNumberIndex % 2 == 0){
        this.node.classList.add("set-background-color-one");
      }
      if(colorNumberIndex % 2 !== 0){
        this.node.classList.add("set-background-color-two");
      }
      colorNumberIndex++;
  }
  ///////////////////////////////////////////////////////////////////
  //  removes color attr
  removelternateLineColor(){
    this.node.classList.remove("set-background-color-one");
    this.node.classList.remove("set-background-color-two");
  }
 }// end Message
 export default Message;
--- a/src/content/index.js
+++ b/src/content/index.js
@@ -17,7 +17,6 @@ document.body.appendChild(theater_wrapper);
 var alreadyTheater = false;
 // ---
 class Main {
  constructor() {
    this.chatWatcher = null;
@@ -26,14 +25,6 @@ class Main {
    this.onRouteChange = this.onRouteChange.bind(this);
    this.load();
      //  button class - ytp-size-button ytp-button
      //  right player controls - ytp-right-controls
      //  player div id - ytd-player
      //  chatframe id - chatframe
      //  movieframe id - movie_player_fix
      //  dono ticker id - ticker
      //  player-theater-container
  }
  load() {
@@ -58,6 +49,11 @@ class Main {
  setDefaults() {
      // Set Hide Welcome Banner
      if (PersistentSyncStorage.data.options.alternateLineColor) {
        document.querySelector('#items.style-scope.yt-live-chat-item-list-renderer').classList.add('alternateLineColor');
      }
    ///////////////////////////////////////////////////////////////////
    // Welcome Banner
@@ -78,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() {
--- a/src/helpers/OpenActiveTab.js
+++ b/src/helpers/OpenActiveTab.js
@@ -1,5 +1,4 @@
 /* Open new tab if tab is not already open, otherwise focus that tab */
 export default url => {
  const matchUrl = url.replace(/^(https|http)/i, '*');
@@ -11,10 +10,4 @@ export default url => {
      chrome.tabs.create({ url });
    }
  });
  // for(let i = 0, tab; tab = tabs[i]; i++) {
  //   if(tab.url && tab.url === url) {
  //     return;
  //   }
  // }
 };
--- a/src/html/chat_overlay.html
+++ b/src/html/chat_overlay.html
@@ -0,0 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <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.css">
  </head>
  <body>
    <div id="message_container"></div>
    <script src="../chat_overlay.js"></script>
  </body>
 </html>
--- a/src/html/options.html
+++ b/src/html/options.html
@@ -1,31 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <style>
        body {
          font-family: sans-serif;
          padding: 10px;
          width: 400px;
        }
        .hideDiv {
            display: none;
        }
    </style>
    <meta charset="UTF-8">
-    <title>Options</title>
+    <title>WompChat Options</title>
  </head>
  <body>
-    <span style="display:inline-block;vertical-align: middle; margin-right: 2%;">
+    <div class="container">  
-      <img src="../assets/icons/icon128.png" alt="🔴" style="height: 2.5em;">
+      <img src="../assets/icons/logo128.png" alt="🔴">    
-    </span>
+      <h1>WompChat Options</h1>
    <span style="display:inline-block;vertical-align: middle;">
      <h1>Live Chat Options</h1>
    </span>
    <span class="">
      <button class="info_button" id="infoButton" >Info</button>
-    </span>
+    </div>
    <br>
    <br>
@@ -56,7 +42,7 @@
          </div>
        </div>
-        <div class="hr"></div>
+        <hr>
        <div class="options-table">
          <div class="option-row">
@@ -67,8 +53,7 @@
      </div>
-      
+      <hr>
      <div class="hr"></div>
      <div class="section">
        <h2 class="options-heading">Chat Options</h2>
@@ -130,13 +115,18 @@
          </div>
        </div>
-      </div>
+        <div class="options-table">
-      
+          <div class="option-row">
-      <div class="hr"></div>
+            <div class="option-cell"><label for="setGreenScreen">Green Screen Chat</label></div>
-      <h2 class="options-heading">Font Size</h2>
+            <div class="option-cell"><input disabled type="checkbox" id="setGreenScreen" class="option-input"></div>
-      <span>
+          </div>
        </div>
-      </span>
+      </div>
      <hr>
      <h2 class="options-heading">Font Size</h2>
      <span>
        <div class="options-table">
@@ -153,12 +143,14 @@
          </div>
        </div>
      </span>
      <hr>
      <!-- <button class="chat_overlay" id="chat_overlay" >Chat Overlay</button> -->
    <div id="save-status">&nbsp;</div>
    <div class="omega"></div>
  </div>
-    
+
    <script src="../options.js"></script>
  </body>
 </html>
--- a/src/html/welcome.html
+++ b/src/html/welcome.html
@@ -5,92 +5,9 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Welcome Page</title>
    <meta http-equiv="refresh" content="0; URL='https://wompmacho.com/wompchat'" />
  </head>
-  <body>
+  <body>   
    <div class="success-overlay">
      <div class="icon-container">
        <i class="material-icons">done</i>
      </div>
    </div>
    <div class="container">
      <div class="logo">
        <img src="../assets/icons/icon512.png" alt="Live Chat Logo">
      </div>
      <h1><span class="fw-light">Welcome to the </span><span class="fw-bold">Chat</span></h1>
      <p class="heading-note">This is still very beta</p>
      <hr>
      <div class="links_div">
        <a class="links_bottom" href="https://discord.gg/pVNnTDA" title="Join our Discord Community">Join our Discord Community</a>
        <a class="links_bottom" href="https://streamelements.com/wompmacho-5882/tip" title="Donations">Donations</a>
        <a class="links_bottom" href="https://www.youtube.com/wompmacho" title="Youtube">Youtube</a>
        <a class="links_bottom" href="mailto:wompmacho@gmail.com">Contact Me</a>
      </div>
      <hr>
      <h2>
        Soon to come:
      </h2>
      <ul>
        <li>Specific channel Emotes</li>
        <li>Search for Emote Panel</li>
        <li>Autocomplete for emote Selection</li>
        <li><s>Theater Mode Fix for that quality Stream and Chat time</s></li>
        <li>Moderation Options</li>
        <li>User Profile Info</li>
        <li>Other Styling Options</li>
      </ul>
      <hr>
      <h2>How To:</h2>
      <p>
        There is still a lot of stuff I am working on. This is very Beta at the moment so 
      </p>
      <h2>Use At Your Own Risk</h2>
      <p>
        This is a Chrome Extension for Youtube Live Streams, adding some Quality of Life improvements for the Chat. 
        Adds Top, Trending and Global (500ish) Emotes from popular sites. These Update with what is Trending. 
      </p>
      <p>
        Don't forget to pin this extension for easy access. 
      </p>
      <img src="../assets/gif/pinYourExtension.gif" alt="pinYourExtension.gif">
      <p>
        Youtube Live is slow to load its pages currently. 
        Give the extension a moment while the page's iframes are loading. 
        Once you see the Emote Panel Icon you can open the Emote Selection Panel.
      </p>
      <img src="../assets/gif/emotesMenu.gif" alt="emotesMenu.gif">
      <p>
        Enhanced Theater Mode Is Now Available. Just click the check in the option panel and refresh your page.
      </p>
      <img style="height: 540px; width: 960px;" src="../assets/gif/theaterMode.gif" alt="theaterMode.gif">
      <p>        
        Over around 500 Top and Trending Emotes are loaded from popular sites. 
        You can Enable/Disable them in the Options Menu.
      </p>
      <img src="../assets/gif/optionsMenu.gif" alt="optionsMenu.gif">
      <p>
        Can Also Click on UserNames To Autofill an @ Notification
      </p>
      <img src="../assets/gif/clickUserNamesToAtThem.gif" alt="clickUserNamesToAtThem.gif">
      <h2>Use At Your Own Risk</h2>
      <h1>Enjoy!</h1>
    </div>
    <script src="../welcomePage.js"></script>
  </body>
 </html>
--- a/src/html/youtube.css
+++ b/src/html/youtube.css
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,13 +1,11 @@
 {
  "manifest_version": 2,
-  "name": "🔴 LIVE CHAT",
+  "name": "WompChat",
-  "version": "1.0.2",
+  "version": "1.0.4",
  "description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.",
  "icons": {
-    "48": "assets/icons/icon48.png",
+    "128": "assets/icons/logo128.png"
    "128": "assets/icons/icon128.png",
    "512": "assets/icons/icon512.png"
  },
  "permissions": [
--- a/src/options.js
+++ b/src/options.js
@@ -1,11 +1,8 @@
 import './stylus/options.styl';
 import dateFormat from 'date-fns/format';
 import { debounce } from 'lodash';
 import PersistentSyncStorage from './helpers/PersistentSyncStorage';
 //  hides element after short timeout
 const hideDebounce = debounce(ele => {
  ele.classList.remove('show');
@@ -30,7 +27,6 @@ const SaveStatusEle = document.getElementById('save-status');
  SaveStatusEle.classList.add('show');
 };
 ///////////////////////////////////////////////////////////////////////////////
 var textSizeSlider = document.getElementById("textSizeSlider");
@@ -51,7 +47,6 @@ allowTextSlider.oninput = function(){
 };
 const optionOnChange = (input) => {
  var inputValueKey;
@@ -108,7 +103,6 @@ const optionOnChange = (input) => {
  return onChange;
 };
 // Executed code
 const OptionInputs = document.querySelectorAll('.option-input');
@@ -118,30 +112,70 @@ PersistentSyncStorage.on('ready', () => {
    const inputOnChange = optionOnChange(input);
    input.addEventListener('change', inputOnChange);
    switch (input.id) {
      case 'enableBTTVEmotes':
        input.removeAttribute('disabled');
        break;
      case 'enableFrankerEmotes':
        input.removeAttribute('disabled');
        break;
      case 'enableTwitchEmotes':
        input.removeAttribute('disabled');
        break;
      case 'kappaFix':
        input.removeAttribute('disabled');
        break;
      case 'theaterModeFix':
        input.removeAttribute('disabled');
        break;
      case 'setAuthorColor':
        input.removeAttribute('disabled');
        break;
      case 'showTimeStamp':
        input.removeAttribute('disabled');
        break;
      case 'alternateLineColor' :
        input.removeAttribute('disabled');
      break;
      case 'hideAuthorIcons' :
        input.removeAttribute('disabled');
        break;
      case 'hideWelcomBanner' :
        input.removeAttribute('disabled');
        break;
      case 'setTwitchColors' :
        input.removeAttribute('disabled');
        break;
      case 'setLiveChat' :
        input.removeAttribute('disabled');
        break;
      case 'allowTextSlider':
        input.removeAttribute('disabled');
        if(PersistentSyncStorage.data.options.allowTextSlider == true){
          textSizeSlider.disabled = false;
-        }else{
+        }else if(PersistentSyncStorage.data.options.allowTextSlider == false){
          textSizeSlider.disabled = true;
        }
        break;
-      case 'theaterModeFix':
+      case 'setGreenScreen':
        // do nothing, stay disabled
        input.removeAttribute('disabled');
        break;
      case 'textSizeSlider' :
        //  do nothing
        break;
      default:
-        input.removeAttribute('disabled');
+        // shouldn't get hete if handled
        break;
    }
  });
@@ -149,7 +183,10 @@ PersistentSyncStorage.on('ready', () => {
 var infoButton = document.getElementById('infoButton');
 infoButton.addEventListener('click', function(){
-  chrome.tabs.create({ url: './html/welcome.html' });
+  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' });
 // });
--- a/src/stylus/_chatColors.styl
+++ b/src/stylus/_chatColors.styl
@@ -69,5 +69,4 @@ colors = {
 for id, col in colors
  .chat-color-{id} #content #author-name
-    color: col !important
+    color: col !important
--- a/src/stylus/chat_overlay.styl
+++ b/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
--- a/src/stylus/content.styl
+++ b/src/stylus/content.styl
@@ -12,8 +12,6 @@
    //display: initial;
    //border-radius: inherit;
  // Owner chat messages
  .yt-live-chat-item-list-renderer[author-type="owner"] 
    //background: rgba(#fff, 0.1);
@@ -26,14 +24,12 @@
    //width: 28px !important
    //height: 28px !important
    // Chat user name
    #author-name.yt-live-chat-text-message-renderer 
      &:after
        //content: ' :'
        //color: #fff
 .AuthorFix
  #author-photo.yt-live-chat-text-message-renderer
    img.yt-img-shadow
@@ -46,36 +42,33 @@
  #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% 
-   background-color: rgba(255, 255, 255, .6)
+   background-color: var(--divider-color)
 .hideElement
  display: none !important
-.set-background-color-one
+.alternateLineColor 
-  background-color: #303030 !important
+  yt-live-chat-text-message-renderer:nth-child(odd)
-
+    background-color:  rgba(255, 255, 255, 0.1) !important;
 .set-background-color-two
  background-color: transparent !important  
 .setTwitchColors
  text-shadow: 0 0 1px #000, 0 0 2px #000 !important
@@ -93,20 +86,20 @@ emote_div:hover
    background-color: transparent
 .emoteDivider
-  width: 60vw
+  width: 20vw
-  border: 2px solid #d3d3d3;
+  border: 1px solid red;
  border-radius: 5px;
-  margin-top: 2%;
+  margin-top: 1em;
-  margin-bottom: 2%;
+  margin-bottom: 1em;
  margin-left: auto
  margin-right: auto
 .emotePopUpText
  margin-bottom: 2%;
 .popup
-  background-color: #202020
+  background-color: var(--yt-app-background)
  color: var(--yt-live-chat-primary-text-color)
  position: absolute; 
  top: 15%
  left: 0
@@ -114,7 +107,7 @@ emote_div:hover
  margin-left: auto
  margin-right: auto
  height 70%
-  width: 75%
+  width: 100%
  z-index: 999
  text-align: center
  border-radius: 5px
@@ -139,7 +132,7 @@ emote_div:hover
  cursor: pointer
 .emoteButton:hover 
-  background-color:rgba(255, 255, 255, .8)
+  background-color: #4e4e4e;
 .emoteButton:focus 
  outline:0
@@ -220,4 +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
--- a/src/stylus/options.styl
+++ b/src/stylus/options.styl
@@ -1,6 +1,33 @@
 body
  background-color: #1e1e1e
  color: #ffffff
  font-family: sans-serif;
  padding: 10px;
  width: 400px;
 h1{
  padding-left: 1em;
 }
 .hideDiv {
    display: none;
 }
 .container{
  display: flex;
  vertical-align: middle;
  height: 3.5em;
 }
 img{
  max-height: 100%;
 }
 hr
  border-color: #f00;
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
 .section
  &:nth-child(1)
@@ -26,11 +53,6 @@ table
      width: 20%
      text-align: right
 .hr
  background-color: #d1d1d1
  height: 1px
  margin: 10px 0
 #save-status
  text-align: center
  opacity: 0
@@ -59,18 +81,9 @@ input[type=checkbox][disabled]
  opacity: .9
 .info_button
  display:inline-block
  padding:0.3em 1.2em
  margin:0 0.3em 0.3em 0
  border-radius:2em
-  box-sizing: border-box
+  margin-left: 135px;  
  text-decoration:none
  font-weight:300
  color:#1e1e1e
  text-align:center
  margin-left: 150px
  transition: all 0.2s
 .info_button:hover
-  color: red
+  color: red
--- a/src/stylus/setupPage.styl
+++ b/src/stylus/setupPage.styl
@@ -1,146 +0,0 @@
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700|Material+Icons")
 body
  font-family: 'Roboto', Arial, sans-serif
  font-size: 16px
  background: #222
  color: #fff
  margin: 25px
 font-weights = {
  light: 300,
  regular: 400, 
  bold: 700
 }
 for fw, w in font-weights
  .fw-{fw}
    font-weight: w
 .success-overlay
  visibility: hidden
  opacity: 0
  position: fixed
  top: 0
  left: 0
  z-index: 10
  background: rgba(#191919, 0.95)
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  height: 100%
  width: 100%
  transition: visibility 0s, opacity 200ms ease
  &.show
    visibility: visible
    opacity: 1
  .material-icons
    font-size: 20em
    opacity: 0
    &.show
      opacity: 1
      animation: jackInTheBox 700ms 1
  .success-message
    font-size: 3em
  .close-message
    font-size: 0.7em
    opacity: 0.7
 .container
  display: flex
  flex-direction: column
  align-items: center
  h1
    margin: 0
    font-size: 3em
    letter-spacing: 3px
  .heading-note
    font-size: 18px
    color: #bbb
  .option
    text-align: center
    .option-note
      font-size: 12px
      font-style: italic
      color: #999
  .complete-setup-button
    background: #333
    display: flex
    justify-content: center
    align-items: center
    padding: 10px
    cursor: pointer
    text-transform: uppercase
    border-radius: 3px
    box-shadow: 0 2px 5px 0 rgba(#000, 0.7)
    transition: background 50ms ease
    &:hover
      background: #404040
    .material-icons
      margin-right: 7px
 .links_bottom
  display: inline-block;
  margin: 1%
 a 
  background-color: #252526;
  color: white;
  padding-top: 1em;
  padding-bottom: 1em;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center
  border: 1px solid #4e4e4e
 a:hover 
  background-color: #d3d3d3;
  color: black
 a:active 
  box-shadow: none;
  top: 5px;
 .links_div
  width: 20vw
 p
  margin: 2%
  max-width: 30vw
 h2
  margin: 2%
 hr {
  margin: 2%
  width: 60vw
  border: 3px solid #d3d3d3;
  border-radius: 5px;
 }
 // jackInTheBox from animate.css https://github.com/daneden/animate.css
@keyframes jackInTheBox
  from
    opacity: 0
    transform: scale(0.1) rotate(60deg)
    transform-origin: center center
  50%
    transform: rotate(-20deg)
  70%
    opacity: 1
    transform: rotate(6deg)
  to
    transform: scale(1)
--- a/src/utils/chrome/LocalStorage.js
+++ b/src/utils/chrome/LocalStorage.js
@@ -1,28 +1,3 @@
 /**
 * MIT License
 *
 * Copyright (c) 2020 wompmacho
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
 import Storage from './Storage';
 class LocalStorage extends Storage {
@@ -32,4 +7,4 @@ class LocalStorage extends Storage {
  }
 }
-export default LocalStorage;
+export default LocalStorage;
--- a/src/utils/chrome/Notifications.js
+++ b/src/utils/chrome/Notifications.js
@@ -1,28 +1,3 @@
 /**
 * MIT License
 *
 * Copyright (c) 2020 wompmacho
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
 class Notifications {
  create(notificationId = null, options) {
--- a/src/utils/chrome/Storage.js
+++ b/src/utils/chrome/Storage.js
@@ -1,28 +1,3 @@
 /**
 * MIT License
 *
 * Copyright (c) 2020 wompmacho
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
 class Storage {
  get(keys = null) {
--- a/src/utils/chrome/SyncStorage.js
+++ b/src/utils/chrome/SyncStorage.js
@@ -1,28 +1,3 @@
 /**
 * MIT License
 *
 * Copyright (c) 2020 wompmacho
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
 import Storage from './Storage';
 class SyncStorage extends Storage {
--- a/src/utils/chrome/index.js
+++ b/src/utils/chrome/index.js
@@ -1,37 +1,7 @@
 /**
 * MIT License
 *
 * Copyright (c) 2020 wompmacho
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
 import _LocalStorage from './LocalStorage';
 import _SyncStorage from './SyncStorage';
 import _Notifications from './Notifications';
 // export default {
 //   LocalStorage: new _LocalStorage,
 //   SyncStorage: new _SyncStorage,
 //   Notifications: new _Notifications
 // }
 export const LocalStorage = new _LocalStorage;
 export const SyncStorage = new _SyncStorage;
 export const Notifications = new _Notifications;
--- a/src/welcomePage.js
+++ b/src/welcomePage.js
@@ -1,48 +1,10 @@
 import './stylus/setupPage.styl';
 import PersistentSyncStorage from './helpers/PersistentSyncStorage';
 // THIS IS A JS PAGE FOR SETUP.HTML
 // --- Definitions ---
 const completeButton = document.querySelector('.complete-setup-button');
 const successOverlay = document.querySelector('.success-overlay');
 const successIcon = successOverlay.querySelector('.material-icons');
 const successCloseMessageCountdown = successOverlay.querySelector('.countdown');
 const setupComplete = () => {
  // successOverlay.classList.add('show');
  // setTimeout(() => {
  //   successIcon.classList.add('show');
  // }, 100);
  //////////////////////////////////// Neat if I ever want to close a window
  // let closeCountdown = 5; // seconds
  // const closeTimeout = () => {
  //   successCloseMessageCountdown.innerHTML = closeCountdown;
  //   setTimeout(() => {
  //     if(closeCountdown > 1) {
  //       closeCountdown -= 1;
  //       closeTimeout();
  //     } else {
  //       chrome.tabs.getCurrent((tab) => {
  //         chrome.tabs.remove(tab.id);
  //       });
  //     }
  //   }, 1000);
  // }
  // successCloseMessageCountdown.innerHTML = closeCountdown;
  // closeTimeout();
 };
 // --- Main ---
 const main = () => {
  PersistentSyncStorage.on('ready', () => {
@@ -58,14 +20,8 @@ const main = () => {
    }, setupComplete);
    console.log('Competed setup, sent message');
  });
 };
 // --- Executed ---
-
+main();
 main();
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,7 +23,8 @@ module.exports = {
    content: './content/',
    background: './background/',
    options: './options.js',
-    welcomePage: './welcomePage.js'
+    welcomePage: './welcomePage.js',
    chat_overlay: './chat_overlay.js'
  },
  output: {
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -24,7 +24,8 @@ module.exports = {
    content: './content/',
    background: './background/',
    options: './options.js',
-    welcomePage: './welcomePage.js'
+    welcomePage: './welcomePage.js',
    chat_overlay: './chat_overlay.js'
  },
  output: {
    path: distPath,
Author	SHA1	Message	Date
wompmacho	d14e2f9412	Merge pull request #24 from wompmacho/hotfix-chat-scroll-break patched scroller issue	2020-11-13 16:45:42 -05:00
wompmacho	1d5d117e5f	patched scroller issue	2020-11-13 16:45:27 -05:00
wompmacho	ce2e4541da	Merge pull request #23 from wompmacho/add-stream-overlay-option unable to Add stream overlay option, alternatives and fixes, also rename project	2020-11-13 05:17:27 -05:00
wompmacho	1826dce523	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	2020-11-13 05:16:24 -05:00
wompmacho	fb13e2f056	creating messanger for content scripst to pass messages to overlay	2020-11-12 06:05:32 -05:00
wompmacho	43c25e103e	Merge pull request #22 from wompmacho/updatelinks Update README.md	2020-11-11 16:59:46 -05:00
wompmacho	cfd75d69ed	Update README.md update links	2020-11-11 16:59:36 -05:00
wompmacho	c8fda4aac9	Merge pull request #21 from wompmacho/cleanup Delete full512.png	2020-11-11 16:45:31 -05:00
wompmacho	badd13acb1	Delete full512.png	2020-11-11 16:45:16 -05:00
wompmacho	c87e566cc2	Merge pull request #20 from wompmacho/cleanup Cleanup	2020-11-11 16:42:55 -05:00
wompmacho	67d9446202	cleanep	2020-11-11 16:41:21 -05:00
wompmacho	07c4a238c9	cleanup	2020-11-11 16:41:06 -05:00
wompmacho	a67d057764	Merge pull request #19 from wompmacho/links-for-cdns-being-dumb Links for cdns being dumb	2020-11-11 16:36:53 -05:00
wompmacho	8ded4f44ed	Merge branch 'main' into links-for-cdns-being-dumb	2020-11-11 16:35:18 -05:00
wompmacho	85f4f15b01	redirct for website	2020-11-11 16:27:53 -05:00
wompmacho	d2bbbc277e	redirct for website	2020-11-11 16:25:54 -05:00
wompmacho	f470c61558	moving media to gcloud, fix for alternateLineColors, rebrand to WompChat	2020-11-11 16:16:45 -05:00
wompmacho	64ab22c205	Merge pull request #16 from wompmacho/dev Dev	2020-11-11 08:33:42 -05:00
wompmacho	cacfca6b9b	Merge branch 'main' into dev	2020-11-11 08:33:32 -05:00
wompmacho	51f6a1fc59	Create .jshintrc	2020-11-11 08:32:10 -05:00
wompmacho	dd2c56a5dc	added psd to git ignore, updating names	2020-11-09 20:18:16 -05:00
wompmacho	8cfd1a37f2	updated local icons	2020-11-09 20:14:47 -05:00
wompmacho	ba26b46004	new icon/updated name	2020-11-09 20:12:34 -05:00
wompmacho	0bd6fac0d9	Merge pull request #15 from wompmacho/links-for-cdns-being-dumb Update README.md	2020-11-09 16:01:31 -05:00
wompmacho	9963fa96a2	Update README.md updated links. github cdn being dumb	2020-11-09 16:01:20 -05:00
wompmacho	3d995c5564	Merge pull request #14 from wompmacho/dev Dev	2020-11-04 19:16:17 -05:00
wompmacho	d5e8d51f93	removed un nec emotes	2020-11-04 19:15:18 -05:00
wompmacho	ffb55757b9	Update README.md updated link for cdn	2020-11-04 19:13:22 -05:00
wompmacho	7ac05b2686	moved imgs to cdn	2020-11-04 19:11:15 -05:00
wompmacho	1ac2703e52	Update New Name and version	2020-11-04 16:30:30 -05:00
wompmacho	55b8ffd9c5	update cdn links	2020-11-04 16:18:11 -05:00
wompmacho	3a7827649e	Update README.md update with cdn link	2020-11-04 16:05:50 -05:00
wompmacho	f35c3c3ad1	Merge pull request #13 from wompmacho/dev Dev	2020-11-04 16:02:11 -05:00
wompmacho	81bc8481b3	updating links for cdn	2020-11-04 16:01:45 -05:00
wompmacho	ee1c9aed99	removing uness assets	2020-11-04 15:48:09 -05:00
wompmacho	457ddfdce6	moving assets to github cdn, shrinking file size	2020-11-04 15:47:28 -05:00
wompmacho	3f00a4c046	added shields to welcome page	2020-11-03 15:46:02 -05:00
wompmacho	c8bc9241d2	Update README.md change spacing between buttons	2020-11-03 01:08:50 -05:00
wompmacho	f87efcc978	Merge pull request #12 from wompmacho/adding-btc-badge Adding btc badge	2020-11-03 01:07:21 -05:00
wompmacho	c964607672	Update README.md updated url to btc qrcode	2020-11-03 01:06:48 -05:00
wompmacho	17b8d52d6c	Create btc.JPG adding btc qr code	2020-11-03 01:05:00 -05:00
wompmacho	e704136ebd	Update README.md added btc shield	2020-11-03 01:01:36 -05:00
wompmacho	e1f96f7647	Update README.md updated markup for correct url for discord	2020-11-02 23:37:51 -05:00
wompmacho	066a98ea00	Update README.md added discord to readme	2020-11-02 23:34:47 -05:00
wompmacho	c6eab86651	Merge pull request #11 from wompmacho/add-license-1 Create LICENSE.md	2020-11-02 02:57:03 -05:00
wompmacho	54a8939e9f	Create LICENSE.md added MIT LICENSE	2020-11-02 02:56:46 -05:00
wompmacho	1e7d39071c	Merge pull request #10 from wompmacho/dev removed unnecessary license comments	2020-11-02 02:55:08 -05:00
wompmacho	daaf8714ae	removed unnecesary license comments removed unnecesary license comments generated by that add-license thing	2020-11-02 02:54:46 -05:00
wompmacho	f9b3f40d1e	Update README.md size change	2020-11-02 00:58:07 -05:00
wompmacho	3d6743adf8	Update README.md	2020-11-02 00:53:53 -05:00
wompmacho	76e3da6021	Update README.md img in p wrapper center	2020-11-02 00:53:12 -05:00
wompmacho	8f41b04cb7	Update README.md test	2020-11-02 00:50:52 -05:00
wompmacho	69b8b10a76	Update README.md get rid of format section	2020-11-02 00:48:10 -05:00
wompmacho	44a60f5227	Update README.md attempt to ad image/gif	2020-11-02 00:47:08 -05:00
wompmacho	6f319ba942	Merge pull request #9 from wompmacho/dev removed redundant files	2020-11-02 00:39:21 -05:00
wompmacho	9618890ed6	removed redundant files	2020-11-02 00:39:00 -05:00