Add close button

public/content.css

@@ -121,7 +121,7 @@
 	margin-left: 5px;
 }
 
-.chatNotice {
+.sbChatNotice {
 	min-width: 350px;
 	height: 70%;
 
@@ -456,3 +456,14 @@ input::-webkit-inner-spin-button {
 .helpButton:hover {
 	filter: brightness(80%);
 }
+
+.sbChatNotice iframe {
+	height: 32px;
+	cursor: pointer;
+	height: 100%;
+}
+
+.sbChatClose {
+	height: 14px;
+	cursor: pointer;
+}

src/js-components/chat.ts

@@ -9,11 +9,23 @@ export interface ChatConfig {
 }
 
 export function openChat(config: ChatConfig): void {
-    const chat = document.createElement("iframe");
-    chat.src = "https://chat.sponsor.ajay.app/#" + utils.objectToURI("", config, false);
-    chat.classList.add("chatNotice");
+    const chat = document.createElement("div");
+    chat.classList.add("sbChatNotice");
     chat.style.zIndex = "2000";
 
+    const iframe= document.createElement("iframe");
+    iframe.src = "https://chat.sponsor.ajay.app/#" + utils.objectToURI("", config, false);
+    chat.appendChild(iframe);
+
+    const closeButton  = document.createElement("img");
+    closeButton.classList.add("sbChatClose");
+    closeButton.src = chrome.extension.getURL("icons/close.png");
+    closeButton.addEventListener("click", () => {
+        chat.remove();
+        closeButton.remove();
+    });
+    chat.appendChild(closeButton);
+
     console.log(utils.objectToURI("", config, false))
 
     const referenceNode = utils.findReferenceNode();