improved the extension

2018-05-30 17:17:27 +02:00
parent e01a3a0978
commit 3c9c3493ae
8 changed files with 298 additions and 156 deletions
@@ -8,6 +8,9 @@ const ignoredPages = {
  "directory": true,
 };

+let popup = chrome.extension.getViews({type: "popup"})[0];
+popup.window.getElementById("status").innerHTML = "NaM";
+
 /// return channel name if it should contain a chat
 function matchChannelName(url) {
  if (!url)
@@ -43,6 +46,7 @@ function getPort() {
 function connectPort() {
  port = chrome.runtime.connectNative(appName);
  console.log("port connected");
+  let connected = true;

  port.onMessage.addListener(function (msg) {
    console.log(msg);
@@ -52,6 +56,14 @@ function connectPort() {

    port = null;
  });
+
+  let sendPing = () => {
+    if (connected) {
+      port.postMessage({ ping: true });
+    } else {
+      setTimeout(sendPing, 5000);
+    }
+  }
 }


@@ -63,6 +75,12 @@ chrome.tabs.onActivated.addListener((activeInfo) => {
    chrome.windows.get(tab.windowId, {}, (window) => {
      if (!window.focused) return;

+      if (window.state == "fullscreen") {
+        tryDetach(tab.windowId);
+        return;
+      }
+
+      console.log("onActivated");
      onTabSelected(tab.url, tab);
    });
  });
@@ -73,16 +91,27 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (!tab.highlighted)
    return;

-  onTabSelected(changeInfo.url, tab);
+  chrome.windows.get(tab.windowId, {}, (window) => {
+    if (!window.focused) return;
+    if (window.state == "fullscreen") {
+      tryDetach(tab.windowId);
+      return;
+    }
+
+    console.log("onUpdated");
+    onTabSelected(tab.url, tab);
+  });
 });

 // tab detached
 chrome.tabs.onDetached.addListener((tabId, detachInfo) => {
+  console.log("onDetached");
  tryDetach(detachInfo.oldWindowId);
 });

 // tab closed
 chrome.windows.onRemoved.addListener((windowId) => {
+  console.log("onRemoved");
  tryDetach(windowId);
 });

@@ -96,13 +125,20 @@ chrome.windows.onFocusChanged.addListener((windowId) => {
    if (tabs.length === 1) {
      let tab = tabs[0];

-      onTabSelected(tab.url, tab);
+      chrome.windows.get(tab.windowId, (window) => {
+        if (window.state == "fullscreen") {
+          tryDetach(tab.windowId);
+          return;
+        }
+
+        console.log("onFocusChanged");
+        onTabSelected(tab.url, tab);
+      });
    }
  });
 });


-
 // attach or detach from tab
 function onTabSelected(url, tab) {
  let channelName = matchChannelName(url);
@@ -131,6 +167,10 @@ chrome.runtime.onMessage.addListener((message, sender, callback) => {
  // is window focused
  chrome.windows.get(sender.tab.windowId, {}, (window) => {
    if (!window.focused) return;
+    if (window.state == "fullscreen") {
+      tryDetach(sender.tab.windowId);
+      return;
+    }

    // get zoom value
    chrome.tabs.getZoom(sender.tab.id, (zoom) => {
@@ -169,6 +209,8 @@ function tryAttach(windowId, data) {
 function tryDetach(windowId) {
  let port = getPort();

+  console.log("tryDetach");
+
  if (port) {
    port.postMessage({
      action: "detach",
@@ -2,72 +2,9 @@
  let lastRect = {};
  let port = null;

-  function log(str) {
-    console.log("Chatterino Native: " + str);
-  }
-
-  function findChatDiv() {
-    return document.getElementsByClassName("right-column")[0];
-  }
-
-  function queryChatRect() {
-    if (!matchChannelName(window.location.href)) return;
-
-    let element = findChatDiv();
-
-    if (element === undefined) {
-      log("failed to find chat div");
-      return;
-    }
-
-    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 &&
-    //   lastRect.top == rect.top &&
-    //   lastRect.bottom == rect.bottom
-    // ) {
-    //   // log("skipped sending message");
-    //   return;
-    // }
-    lastRect = rect;
-
-    let data = {
-      rect: rect,
-    };
-
-    try {
-      chrome.runtime.sendMessage(data);
-    } 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() {
-    let t1 = performance.now();
-    queryChatRect();
-    let t2 = performance.now();
-    console.log("queryCharRect " + (t2 - t1) + "ms");
-    // setTimeout(queryCharRectLoop, 500);
-  }
+  let installedObjects = {};
+  let rightCollapseButton = null;
+  let isCollapsed = false;

  const ignoredPages = {
    "settings": true,
@@ -79,7 +16,126 @@
    "directory": true,
  };

-  /// return channel name if it should contain a chat
+  let findChatDiv = () => document.getElementsByClassName("right-column")[0];
+  let findRightCollapse = () => document.getElementsByClassName("right-column__toggle-visibility")[0];
+  let findRightColumn = () => document.getElementsByClassName("channel-page__right-column")[0];
+  let findNavBar = () => document.getElementsByClassName("top-nav__menu")[0];
+
+  // logging function
+  function log(str) {
+    console.log("Chatterino Native: " + str);
+  }
+
+  // install events
+  function installChatterino() {
+    log("trying to install events");
+
+    let retry = false;
+
+    // right collapse button
+    if (!installedObjects.rightCollapse) {
+      retry = true;
+
+      let x = findRightCollapse();
+
+      if (x != undefined) {
+        rightCollapseButton = x;
+
+        x.addEventListener("mouseup", () => {
+          let y = findChatDiv();
+
+          if (parseInt(y.style.width) == 0) {
+            y.style.width = "340px";
+            isCollapsed = false;
+          } else {
+            y.style.width = 0;
+            isCollapsed = true;
+          }
+        });
+
+        installedObjects.rightCollapse = true;
+      }
+    }
+
+    // right column
+    if (!installedObjects.rightColumn && installedObjects.rightCollapse) {
+      let x = findChatDiv();
+
+      if (x != undefined && x.children.length >= 2) {
+        x.children[0].innerHTML = "<div style='width: 340px; height: 100%; justify-content: center; display: flex; flex-direction: column; text-align: center; color: #999; user-select: none; background: #222;'>" +
+          "Disconnected from the chatterino extension.<br><br>Please focus the window or refresh the page." +
+          "</div>";
+
+        installedObjects.rightColumn = true;
+      } else {
+        retry = true;
+      }
+    }
+
+    // nav bar
+    if (rightCollapseButton && !installedObjects.topNav) {
+      let x = findRightCollapse();
+
+      installedObjects.topNav = true;
+    } else {
+      retry = true;
+    }
+
+    // retry if needed
+    if (retry) {
+      setTimeout(installChatterino, 1000);
+    } else {
+      log("installed all events");
+    }
+  }
+
+  // query the rect of the chat
+  function queryChatRect() {
+    if (!matchChannelName(window.location.href)) return;
+
+    let element = findChatDiv();
+
+    if (element === undefined) {
+      log("failed to find chat div");
+      return;
+    }
+
+    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,
+    };
+
+    isCollapsed = rect.width == 0;
+
+    try {
+      chrome.runtime.sendMessage(data);
+    } catch {
+      // failed to send a message to the runtime -> maybe the extension got reloaded
+      // alert("reload the page to re-enable chatterino native");
+    }
+  }
+
+  function queryChatRectLoop() {
+    let t1 = performance.now();
+    queryChatRect();
+    let t2 = performance.now();
+    console.log("queryCharRect " + (t2 - t1) + "ms");
+    // setTimeout(queryCharRectLoop, 500);
+  }
+
+  // return channel name if it should contain a chat or undefined
  function matchChannelName(url) {
    if (!url)
      return undefined;
@@ -94,15 +150,20 @@
    return undefined;
  }

-  queryCharRectLoop();
-  window.addEventListener("load", () => {
-    setTimeout(queryChatRect, 1000);
-  });
+
+  // event listeners
+  window.addEventListener("load", () => setTimeout(queryChatRect, 1000));
  window.addEventListener("resize", queryChatRect);
  window.addEventListener("focus", queryChatRect);
-  window.addEventListener("mouseup", () => {
-    setTimeout(queryChatRect, 10);
+  window.addEventListener("mouseup", () => setTimeout(queryChatRect, 10));
+  window.addEventListener("hashchange", () => {
+    installedObjects = {};
+    installChatterino();
  });

-  log("initialized");
+  //
+  log("hello there in the dev tools 👋");
+
+  queryChatRectLoop();
+  installChatterino();
 })()
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html>
+
 <body>
-  xd
+  <div>
+    Chatterino extension :)
+  </div>
 </body>
+
 </html>