added some more race conditions to the browser extension

browser_ext/background.js

@@ -8,6 +8,22 @@ const ignoredPages = {
   "directory": true,
 };
 
+/// return channel name if it should contain a chat
+function matchChannelName(url) {
+  if (!url)
+    return undefined;
+
+  const match = url.match(/^https?:\/\/(www\.)?twitch.tv\/([a-zA-Z0-9_]+)\/?$/);
+
+  let channelName;
+  if (match && (channelName = match[2], !ignoredPages[channelName])) {
+    return channelName;
+  }
+
+  return undefined;
+}
+
+
 const appName = "com.chatterino.chatterino";
 let port = null;
 
@@ -41,15 +57,11 @@ function connectPort() {
 
 // tab activated
 chrome.tabs.onActivated.addListener((activeInfo) => {
-  console.log(0)
   chrome.tabs.get(activeInfo.tabId, (tab) => {
-    console.log(1)
     if (!tab || !tab.url) return;
 
-    console.log(2)
     chrome.windows.get(tab.windowId, {}, (window) => {
       if (!window.focused) return;
-      console.log(3)
 
       onTabSelected(tab.url, tab);
     });
@@ -76,8 +88,12 @@ chrome.windows.onRemoved.addListener((windowId) => {
 
 // window selected
 chrome.windows.onFocusChanged.addListener((windowId) => {
-  chrome.tabs.query({windowId: windowId, highlighted: true}, (tabs) => {
+  console.log(windowId);
-    if (tabs.length >= 1) {
+  if (windowId == -1) return;
+
+  // this returns all tabs when the query fails
+  chrome.tabs.query({ windowId: windowId, highlighted: true }, (tabs) => {
+    if (tabs.length === 1) {
       let tab = tabs[0];
 
       onTabSelected(tab.url, tab);
@@ -86,33 +102,19 @@ chrome.windows.onFocusChanged.addListener((windowId) => {
 });
 
 
-/// return channel name if it should contain a chat
-function matchChannelName(url) {
-  if (!url)
-    return undefined;
-
-  const match = url.match(/^https?:\/\/(www\.)?twitch.tv\/([a-zA-Z0-9_]+)\/?$/);
-
-  let channelName;
-  if (match && (channelName = match[2], !ignoredPages[channelName])) {
-    return channelName;
-  }
-
-  return undefined;
-}
 
 // attach or detach from tab
 function onTabSelected(url, tab) {
   let channelName = matchChannelName(url);
 
   if (channelName) {
-    chrome.windows.get(tab.windowId, {}, (window) => {
+    // chrome.windows.get(tab.windowId, {}, (window) => {
-      // attach to window
+    //   // attach to window
-      tryAttach(tab.windowId, {
+    //   tryAttach(tab.windowId, {
-        name: channelName,
+    //     name: channelName,
-        yOffset: window.height - tab.height,
+    //     yOffset: window.height - tab.height,
-      });
+    //   });
-    });
+    // });
   } else {
     // detach from window
     tryDetach(tab.windowId);
@@ -120,8 +122,9 @@ function onTabSelected(url, tab) {
 }
 
 // receiving messages from the inject script
-function registerTheGarbage() {
+chrome.runtime.onMessage.addListener((message, sender, callback) => {
-  chrome.runtime.onMessage.addListener((message, sender, callback) => {
+  console.log(message);
+
   // is tab highlighted
   if (!sender.tab.highlighted) return;
 
@@ -132,30 +135,21 @@ function registerTheGarbage() {
     // get zoom value
     chrome.tabs.getZoom(sender.tab.id, (zoom) => {
       let size = {
-          width: message.rect.width * zoom,
+        width: Math.floor(message.rect.width * zoom),
-          height: message.rect.height * zoom,
+        height: Math.floor(message.rect.height * zoom),
       };
 
+      console.log(zoom);
+
       // attach to window
       tryAttach(sender.tab.windowId, {
         name: matchChannelName(sender.tab.url),
         size: size,
-        })
       });
     });
   });
-}
+});
 
-function registerLoop() {
-  // loop until the runtime objects exists because I can't be arsed to figure out the proper way to do this
-  if (chrome.runtime === undefined) {
-    setTimeout(registerLoop(), 100);
-    return;
-  }
-
-  registerTheGarbage();
-}
-registerLoop();
 
 // attach chatterino to a chrome window
 function tryAttach(windowId, data) {

browser_ext/inject.js

@@ -1,5 +1,6 @@
 (() => {
   let lastRect = {};
+  let port = null;
 
   function log(str) {
     console.log("Chatterino Native: " + str);
@@ -10,6 +11,8 @@
   }
 
   function queryChatRect() {
+    if (!matchChannelName(window.location.href)) return;
+
     let element = findChatDiv();
 
     if (element === undefined) {
@@ -17,9 +20,24 @@
       return;
     }
 
-    // element.firstChild.style.opacity = 0;
+    if (!element.chatterino) {
+      let xd = element.getElementsByClassName("channel-page__right-column")[0]
+
+      if (xd != undefined) {
+        element.chatterino = true;
+        xd.style.opacity = 0;
+
+        setTimeout(() => {
+          xd.innerHTML = "<div style='width: 340px; height: 100%; justify-content: center; display: flex; flex-direction: column; text-align: center; color: #999; user-select: none;'>" +
+            "Disconnected from the chatterino extension.<br><br>Please refresh the page." +
+            "</div>";
+          xd.style.opacity = 1;
+        }, 2000);
+      }
+    }
 
     let rect = element.getBoundingClientRect();
+
     // if (
     //   lastRect.left == rect.left &&
     //   lastRect.right == rect.right &&
@@ -27,7 +45,6 @@
     //   lastRect.bottom == rect.bottom
     // ) {
     //   // log("skipped sending message");
-
     //   return;
     // }
     lastRect = rect;
@@ -36,10 +53,12 @@
       rect: rect,
     };
 
-    chrome.runtime.sendMessage(data, (response) => {
+    try {
-      // log("received message response");
+      chrome.runtime.sendMessage(data);
-      // console.log(response)
+    } catch {
-    });
+      // failed to send a message to the runtime -> maybe the extension got reloaded
+      // alert("reload the page to re-enable chatterino native");
+    }
   }
 
   function queryCharRectLoop() {
@@ -47,11 +66,43 @@
     queryChatRect();
     let t2 = performance.now();
     console.log("queryCharRect " + (t2 - t1) + "ms");
-    setTimeout(queryCharRectLoop, 500);
+    // setTimeout(queryCharRectLoop, 500);
+  }
+
+  const ignoredPages = {
+    "settings": true,
+    "payments": true,
+    "inventory": true,
+    "messages": true,
+    "subscriptions": true,
+    "friends": true,
+    "directory": true,
+  };
+
+  /// return channel name if it should contain a chat
+  function matchChannelName(url) {
+    if (!url)
+      return undefined;
+
+    const match = url.match(/^https?:\/\/(www\.)?twitch.tv\/([a-zA-Z0-9_]+)\/?$/);
+
+    let channelName;
+    if (match && (channelName = match[2], !ignoredPages[channelName])) {
+      return channelName;
+    }
+
+    return undefined;
   }
 
   queryCharRectLoop();
+  window.addEventListener("load", () => {
+    setTimeout(queryChatRect, 1000);
+  });
   window.addEventListener("resize", queryChatRect);
+  window.addEventListener("focus", queryChatRect);
+  window.addEventListener("mouseup", () => {
+    setTimeout(queryChatRect, 10);
+  });
 
   log("initialized");
 })()

src/singletons/nativemessagingmanager.cpp

@@ -172,10 +172,12 @@ void NativeMessagingManager::ReceiverThread::handleMessage(const QJsonObject &ro
 
                 if (attach) {
 #ifdef USEWINSDK
+                    if (args.height != -1) {
                         auto *window = widgets::AttachedWindow::get(::GetForegroundWindow(), args);
                         if (!name.isEmpty()) {
                             window->setChannel(app->twitch.server->getOrAddChannel(name));
                         }
+                    }
 //                    window->show();
 #endif
                 }

src/widgets/attachedwindow.cpp

@@ -80,7 +80,7 @@ AttachedWindow *AttachedWindow::get(void *target, const GetArgs &args)
 
     if (show) {
         window->show();
-        window->resize(size);
+        // window->resize(size);
     }
 
     return window;
@@ -156,8 +156,9 @@ void AttachedWindow::attachToHwnd(void *_hwnd)
                        SWP_NOMOVE | SWP_NOSIZE | SWP_NOACTIVATE);
 
         if (this->_height == -1) {
-            ::MoveWindow(hwnd, rect.right - this->_width - 8, rect.top + this->yOffset - 8,
+            //            ::MoveWindow(hwnd, rect.right - this->_width - 8, rect.top + this->yOffset
-                         this->_width, rect.bottom - rect.top - this->yOffset, false);
+            //            - 8,
+            //                         this->_width, rect.bottom - rect.top - this->yOffset, false);
         } else {
             ::MoveWindow(hwnd, rect.right - this->_width - 8, rect.bottom - this->_height - 8,
                          this->_width, this->_height, false);