creating messanger for content scripst

to pass messages to overlay
This commit is contained in:
wompmacho
2020-11-12 06:05:32 -05:00
parent c8fda4aac9
commit fb13e2f056
9 changed files with 14516 additions and 17 deletions

12
src/chat_overlay.js Normal file
View File

@@ -0,0 +1,12 @@
const message_container = document.getElementById("message_container");
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.message == "messageNode"){
message_container.innerHTML += request.node;
message_container.scrollBy(message_container.scrollHeight);
return;
}
});

View File

@@ -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();
@@ -54,8 +51,6 @@ class ChatWatcher {
mutations.forEach(mutation => {
const { addedNodes, removedNodes } = mutation;
// Added nodes
@@ -186,8 +181,6 @@ class ChatWatcher {
emoteAppend(keysITer);
}
// add div to doc
chatButtonSelectionList.appendChild(popUpDiv);

View File

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

View File

@@ -0,0 +1,19 @@
<!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_styling.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>
</html>

View File

@@ -136,6 +136,10 @@
</div>
</div>
</span>
<hr>
<button class="chat_overlay" id="chat_overlay" >Chat Overlay</button>
<div id="save-status">&nbsp;</div>
</div>

14465
src/html/youtube_styling.css Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -180,4 +180,9 @@ PersistentSyncStorage.on('ready', () => {
var infoButton = document.getElementById('infoButton');
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' });
});