open popup in new windows

Author: HoangTran0410

popup/index.js

@@ -15,6 +15,7 @@ import {
   Storage,
   checkBlackWhiteList,
   runScriptInTabWithEventChain,
+  getLastFocusedTab,
 } from "../scripts/helpers/utils.js";
 import {
   LANG,
@@ -48,6 +49,7 @@ const searchFound = document.querySelector(".search .searchFound");
 const scrollToTopBtn = document.querySelector("#scroll-to-top");
 
 let disableSmoothScroll = null;
+let isInNewTab = false;
 
 // ========================================================
 // ========================= Tabs =========================
@@ -445,9 +447,17 @@ async function runScript(script) {
     recentScriptsSaver.add(script);
     trackEvent(script.id);
 
+    // if (isInNewTab) {
+    //   // focus to targeTab
+    //   await chrome.windows.update(tab.windowId, {
+    //     focused: true,
+    //   });
+    // }
+
     try {
-      if (isFunction(script.popupScript?.onClick))
+      if (isFunction(script.popupScript?.onClick)) {
         await script.popupScript.onClick();
+      }
     } catch (e) {
       showError(e);
     }
@@ -504,13 +514,33 @@ function initTooltip() {
   );
   openInNewTabBtn.setAttribute(
     "data-tooltip",
-    t({ vi: "Mở trong tab mới", en: "Open in new tab" })
+    t({ vi: "Mở trong cửa sổ mới", en: "Open in new window" })
   );
 }
 
-function initSettings() {
+const updateTargetTab = UfsGlobal.Utils.debounce(async () => {
+  let targetTab = await getCurrentTab();
+  document.title = targetTab?.title || "Useful scripts";
+}, 500);
+
+async function initOpenInNewTab() {
+  let currentTab = await chrome.tabs.getCurrent();
+  isInNewTab = currentTab != null;
+
+  if (isInNewTab) {
+    [
+      ["tabs", "onHighlighted"],
+      ["windows", "onFocusChanged"],
+    ].forEach(([context, event]) => {
+      chrome[context][event].addListener(updateTargetTab);
+    });
+
+    openInNewTabBtn.remove();
+    return;
+  }
+
   openInNewTabBtn.onclick = async () => {
-    let exist = await chrome.tabs.query({
+    const exist = await chrome.tabs.query({
       url: location.href,
     });
     if (exist.length > 0) {
@@ -521,12 +551,12 @@ function initSettings() {
 
     trackEvent("CLICK_OPEN_IN_NEW_TAB");
 
-    let width = document.documentElement.clientWidth,
-      height = document.documentElement.clientHeight,
+    let width = window.outerWidth,
+      height = window.outerHeight,
       left = window.screenLeft,
       top = window.screenTop;
 
-    chrome.windows.create({
+    await chrome.windows.create({
       url: location.href,
       type: "popup",
       height,
@@ -538,7 +568,9 @@ function initSettings() {
 
     window.close();
   };
+}
 
+function initSettings() {
   settingsBtn.onclick = () => {
     trackEvent("CLICK_SETTINGS");
 
@@ -948,6 +980,7 @@ window.addEventListener("scroll", onScrollEnd);
   initSearch();
   initTooltip();
   initSettings();
+  initOpenInNewTab();
   initScrollToTop();
   createTabs().then(restoreScroll);
 

popup/themes/default.less

@@ -52,6 +52,8 @@
 @border_loading: #3498db;
 @border_loading_bg: white;
 
+@body_max_width: 450px;
+
 
 * {
     font-family: @font_family_1;
@@ -66,6 +68,9 @@ body {
     color: @color_body;
     min-width: 370px;
     min-height: 600px;
+    max-width: @body_max_width;
+    margin: auto;
+    position: relative;
 }
 
 h1 {
@@ -449,7 +454,7 @@ option {
         border-radius: 6px;
         padding: 5px;
         pointer-events: none;
-        width: calc(100vw - 40px);
+        width: calc(100% - 40px);
         position: absolute;
         z-index: 1;
         top: 80%;
@@ -522,6 +527,7 @@ option {
         border-radius: 7px;
         width: 90%;
         max-height: 90%;
+        max-width: @body_max_width;
 
         .title {
             font-size: 18px;

scripts/background-scripts/background_script.js

@@ -15,6 +15,7 @@ const {
 const { ISOLATED, MAIN } = chrome.scripting.ExecutionWorld;
 const CACHED = {
   path: chrome.runtime.getURL("/scripts/"),
+  lastFocusedWindowIds: [],
   activeScriptIds: [],
   badges: {},
 };
@@ -363,7 +364,6 @@ function listenMessage() {
     try {
       if (request.action === "ufs-runInBackground") {
         const { params = [], fnPath = "" } = request.data || {};
-        // console.log("runInBackground", fnPath, params);
         utils.runFunc(fnPath, params, GLOBAL).then((res) => {
           sendResponse(res);
         });
@@ -393,6 +393,35 @@ function listenMessage() {
   });
 }
 
+function listenWindows() {
+  ["onBoundsChanged", "onCreated", "onFocusChanged", "onRemoved"].forEach(
+    (event) => {
+      chrome.windows[event].addListener((...details) => {
+        // listen and cache last window focus
+        if (event === "onFocusChanged") {
+          let windowId = details[0];
+
+          CACHED.lastFocusedWindowIds.unshift(windowId);
+          // remove duplicate
+          for (let i = 1; i < CACHED.lastFocusedWindowIds.length; i++) {
+            if (windowId === CACHED.lastFocusedWindowIds[i]) {
+              CACHED.lastFocusedWindowIds.splice(i, 1);
+              break;
+            }
+          }
+        }
+
+        if (event === "onRemoved") {
+          let index = CACHED.lastFocusedWindowIds.indexOf(details[0]);
+          if (index >= 0) CACHED.lastFocusedWindowIds.splice(index, 1);
+        }
+
+        runScriptsBackground("windows." + event, null, details);
+      });
+    }
+  );
+}
+
 function injectUfsGlobal(tabId, frameId, details) {
   [
     [["ufs_global.js", "content_script.js"], ISOLATED],
@@ -431,6 +460,7 @@ function main() {
   listenNavigation();
   listenTabs();
   listenMessage();
+  listenWindows();
 
   chrome.contextMenus.onClicked.addListener(async (info) => {
     runScriptsBackground("contextMenus.onClicked", null, info, true);
@@ -443,7 +473,7 @@ function main() {
   chrome.runtime.onInstalled.addListener(async function (reason) {
     // reasons: browser_update / chrome_update / update / install
 
-    if (utils.hasUserId()) {
+    if (await utils.hasUserId()) {
       await trackEvent("ufs-RE-INSTALLED");
     }
     // create new unique id and save it

scripts/fb_storySaver.js

@@ -18,13 +18,13 @@ export default {
       let videos = document.querySelectorAll("video");
       let listUrls = [];
 
-      for (var i = videos.length - 1; i >= 0; i--) {
+      for (let i = videos.length - 1; i >= 0; i--) {
         if (videos[i].offsetHeight === 0) continue;
-        var reactKey = "";
-        keys = Object.keys(videos[i]);
-        for (var j = 0; j < keys.length; j++) {
-          if (keys[j].indexOf("__reactFiber") != -1) {
-            reactKey = keys[j].split("__reactFiber")[1];
+        let reactKey = "";
+        let keys = Object.keys(videos[i]);
+        for (let key of keys) {
+          if (key.indexOf("__reactFiber") != -1) {
+            reactKey = key.split("__reactFiber")[1];
             break;
           }
         }

scripts/helpers/utils.js

@@ -7,7 +7,6 @@ const { version } =
 
 const CACHED = {
   userID: null,
-  lastWindowIds: [],
 };
 
 export function checkBlackWhiteList(script, url = location?.href) {
@@ -113,16 +112,14 @@ export function runFunc(fnPath = "", params = [], global = {}) {
       return p;
     });
 
-    if (!(typeof fn === "function")) return resolve(null);
+    if (typeof fn !== "function") return resolve(null);
 
     try {
       let res = fn(..._params);
 
       if (!hasCallback) {
         if (typeof res?.then === "function") {
-          res.then?.((_res) => {
-            resolve(_res);
-          });
+          res.then?.(resolve);
         } else {
           resolve(res);
         }
@@ -189,7 +186,6 @@ export async function setActiveScript(scriptId, isActive = true) {
   if (isActive) list.push(scriptId);
   else list = list.filter((_) => _ != scriptId);
   list = list.filter((_) => _);
-  // localStorage.setItem(listActiveScriptsKey, JSON.stringify(list));
   Storage.set(listActiveScriptsKey, list); // save to storage => content script can access
   return list;
 }
@@ -225,10 +221,6 @@ export async function toggleActiveScript(scriptId) {
 //       });
 // };
 
-// const CACHED = {
-//   lastWindowId: 0,
-// };
-
 // https://developer.chrome.com/docs/extensions/reference/windows/#event-onFocusChanged
 // chrome.windows.onFocusChanged.addListener(
 //   (windowId) => {
@@ -253,47 +245,50 @@ export const getAllTabs = async () => {
   return tabs;
 };
 
-// Lấy ra tab hiện tại, trong window sử dung gần nhất
-if (typeof chrome?.windows?.onFocusChanged?.addListener === "function") {
-  chrome.windows.onFocusChanged.addListener((windowId) => {
-    if (windowId !== chrome.windows.WINDOW_ID_NONE) {
-      CACHED.lastWindowIds.unshift(windowId);
-
-      // remove duplicate
-      for (let i = 1; i < CACHED.lastWindowIds.length; i++) {
-        if (windowId === CACHED.lastWindowIds[i]) {
-          CACHED.lastWindowIds.splice(i, 1);
-          break;
-        }
-      }
-    }
-  });
+export function getPopupURL() {
+  return chrome.runtime.getURL("/popup/popup.html");
 }
 
-export const getCurrentTab = async () => {
-  let windows = await chrome.windows.getAll({ populate: true });
-  let lastFocusedWindow = windows
+export const getLastFocusedWindowIds = () => {
+  return chrome.runtime.sendMessage({
+    action: "ufs-runInBackground",
+    data: {
+      fnPath: "getCache",
+      params: ["lastFocusedWindowIds"],
+    },
+  });
+};
+
+export const getLastFocusedTab = async () => {
+  const lastFocusedWindowIds = await getLastFocusedWindowIds();
+  const windows = await chrome.windows.getAll({ populate: true });
+  const lastFocusedWindow = windows
     // sort windows by lastFocused
     .sort(
       (a, b) =>
-        CACHED.lastWindowIds.indexOf(a.id) - CACHED.lastWindowIds.indexOf(b.id)
+        lastFocusedWindowIds.indexOf(a.id) - lastFocusedWindowIds.indexOf(b.id)
     )
     // get windows that not popup extension
-    .filter(
-      (w) =>
-        w.type !== "popup" &&
-        w.tabs[0].url !== chrome.runtime.getURL("/popup/popup.html")
-    )?.[0];
-
-  console.log("lastFocusedWindow", lastFocusedWindow);
+    .filter((w) => w.type !== "popup" && w.tabs[0].url !== getPopupURL())?.[0];
 
   if (!lastFocusedWindow) return null;
-
-  let tab = lastFocusedWindow.tabs.find((tab) => tab.active);
-  console.log("tabs", tab);
+  const tab = lastFocusedWindow.tabs.find(
+    (tab) => tab.active && tab.url !== getPopupURL()
+  );
   return tab;
 };
 
+export const getCurrentTab = async () => {
+  // case normal popup
+  let tabs = await chrome.tabs.query({
+    active: true,
+    currentWindow: true,
+  });
+  if (tabs?.[0]?.url !== getPopupURL()) return tabs[0];
+
+  return await getLastFocusedTab();
+};
+
 export const getCurrentTabId = async () => {
   return (await getCurrentTab())?.id;
 };

templates/full.js

@@ -185,6 +185,12 @@ export default {
     storage: {
       onChanged: (details, context) => {},
     },
+    windows: {
+      onCreated: (details, context) => {},
+      onFocusChanged: (details, context) => {},
+      onBoundsChanged: (details, context) => {},
+      onRemoved: (details, context) => {},
+    },
   },
 };