improved chatterino native

browser_ext/background.js

@@ -11,10 +11,21 @@ const ignoredPages = {
 const appName = "com.chatterino.chatterino";
 let port = null;
 
+// gets the port for communication with chatterino
+function getPort() {
+  if (port) {
+    return port;
+  } else {
+    // TODO: add cooldown
+    connectPort();
 
-/// Connect to port
+    return port;
+  }
+}
+
+/// connect to port
 function connectPort() {
-  port = chrome.runtime.connectNative("com.chatterino.chatterino");
+  port = chrome.runtime.connectNative(appName);
   console.log("port connected");
 
   port.onMessage.addListener(function (msg) {
@@ -27,76 +38,147 @@ function connectPort() {
   });
 }
 
-function getPort() {
-  if (port) {
-    return port;
-  } else {
-    // TODO: add cooldown
-    connectPort();
 
-    return port;
-  }
-}
-
-
-/// Tab listeners
+// tab activated
 chrome.tabs.onActivated.addListener((activeInfo) => {
+  console.log(0)
   chrome.tabs.get(activeInfo.tabId, (tab) => {
-    if (!tab)
-      return;
+    console.log(1)
+    if (!tab || !tab.url) return;
 
-    if (!tab.url)
-      return;
+    console.log(2)
+    chrome.windows.get(tab.windowId, {}, (window) => {
+      if (!window.focused) return;
+      console.log(3)
 
-    matchUrl(tab.url, tab);
+      onTabSelected(tab.url, tab);
+    });
   });
 });
 
+// url changed
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   if (!tab.highlighted)
     return;
 
-  matchUrl(changeInfo.url, tab);
+  onTabSelected(changeInfo.url, tab);
+});
+
+// tab detached
+chrome.tabs.onDetached.addListener((tabId, detachInfo) => {
+  tryDetach(detachInfo.oldWindowId);
+});
+
+// tab closed
+chrome.windows.onRemoved.addListener((windowId) => {
+  tryDetach(windowId);
+});
+
+// window selected
+chrome.windows.onFocusChanged.addListener((windowId) => {
+  chrome.tabs.query({windowId: windowId, highlighted: true}, (tabs) => {
+    if (tabs.length >= 1) {
+      let tab = tabs[0];
+
+      onTabSelected(tab.url, tab);
+    }
+  });
 });
 
 
-/// Misc
-function matchUrl(url, tab) {
+/// return channel name if it should contain a chat
+function matchChannelName(url) {
   if (!url)
-    return;
+    return undefined;
 
-  const match = url.match(/^https?:\/\/(www\.)?twitch.tv\/([a-zA-Z0-9]+)\/?$/);
+  const match = url.match(/^https?:\/\/(www\.)?twitch.tv\/([a-zA-Z0-9_]+)\/?$/);
 
   let channelName;
-
-  console.log(tab);
-
   if (match && (channelName = match[2], !ignoredPages[channelName])) {
-    console.log("channelName " + channelName);
-    console.log("winId " + tab.windowId);
+    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) => {
-      let yOffset = window.height - tab.height;
-
-      let port = getPort();
-      if (port) {
-        port.postMessage({
-          action: "select",
-          attach: true,
-          type: "twitch",
-          name: channelName,
-          winId: "" + tab.windowId,
-          yOffset: yOffset
-        });
-      }
+      // attach to window
+      tryAttach(tab.windowId, {
+        name: channelName,
+        yOffset: window.height - tab.height,
+      });
     });
   } else {
-    let port = getPort();
-    if (port) {
-      port.postMessage({
-        action: "detach",
-        winId: "" + tab.windowId
-      })
-    }
+    // detach from window
+    tryDetach(tab.windowId);
+  }
+}
+
+// receiving messages from the inject script
+function registerTheGarbage() {
+  chrome.runtime.onMessage.addListener((message, sender, callback) => {
+    // is tab highlighted
+    if (!sender.tab.highlighted) return;
+
+    // is window focused
+    chrome.windows.get(sender.tab.windowId, {}, (window) => {
+      if (!window.focused) return;
+
+      // get zoom value
+      chrome.tabs.getZoom(sender.tab.id, (zoom) => {
+        let size = {
+          width: message.rect.width * zoom,
+          height: message.rect.height * 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) {
+  data.action = "select";
+  data.attach = true;
+  data.type = "twitch";
+  data.winId = "" + windowId;
+
+  let port = getPort();
+
+  if (port) {
+    port.postMessage(data);
+  }
+}
+
+// detach chatterino from a chrome window
+function tryDetach(windowId) {
+  let port = getPort();
+
+  if (port) {
+    port.postMessage({
+      action: "detach",
+      winId: "" + windowId
+    })
   }
 }

browser_ext/inject.js

@@ -0,0 +1,57 @@
+(() => {
+  let lastRect = {};
+
+  function log(str) {
+    console.log("Chatterino Native: " + str);
+  }
+
+  function findChatDiv() {
+    return document.getElementsByClassName("right-column")[0];
+  }
+
+  function queryChatRect() {
+    let element = findChatDiv();
+
+    if (element === undefined) {
+      log("failed to find chat div");
+      return;
+    }
+
+    // element.firstChild.style.opacity = 0;
+
+    let rect = element.getBoundingClientRect();
+    // if (
+    //   lastRect.left == rect.left &&
+    //   lastRect.right == rect.right &&
+    //   lastRect.top == rect.top &&
+    //   lastRect.bottom == rect.bottom
+    // ) {
+    //   // log("skipped sending message");
+
+    //   return;
+    // }
+    lastRect = rect;
+
+    let data = {
+      rect: rect,
+    };
+
+    chrome.runtime.sendMessage(data, (response) => {
+      // log("received message response");
+      // console.log(response)
+    });
+  }
+
+  function queryCharRectLoop() {
+    let t1 = performance.now();
+    queryChatRect();
+    let t2 = performance.now();
+    console.log("queryCharRect " + (t2 - t1) + "ms");
+    setTimeout(queryCharRectLoop, 500);
+  }
+
+  queryCharRectLoop();
+  window.addEventListener("resize", queryChatRect);
+
+  log("initialized");
+})()

browser_ext/manifest.json

@@ -3,7 +3,8 @@
   "version": "1.0",
   "description": "xd",
   "permissions": [
-    "tabs", "nativeMessaging"
+    "tabs",
+    "nativeMessaging"
   ],
   "icons": {
     "256": "icon.png"
@@ -17,5 +18,16 @@
   },
   "browser_action": {
     "default_popup": "popup.html"
-  }
+  },
+  "content_scripts": [
+    {
+      "run_at": "document_end",
+      "matches": [
+        "https://www.twitch.tv/*"
+      ],
+      "js": [
+        "inject.js"
+      ]
+    }
+  ]
 }