🎨 增强 chrome.tabs.create 兼容性 (#639)

Author: cyfung1031

src/app/service/service_worker/gm_api.ts

@@ -12,7 +12,7 @@ import PermissionVerify, { PermissionVerifyApiGet } from "./permission_verify";
 import Cache, { incr } from "@App/app/cache";
 import EventEmitter from "eventemitter3";
 import { type RuntimeService } from "./runtime";
-import { getIcon, isFirefox } from "@App/pkg/utils/utils";
+import { getIcon, isFirefox, getCurrentTab, openInCurrentTab } from "@App/pkg/utils/utils";
 import { type SystemConfig } from "@App/pkg/config/config";
 import i18next, { i18nName } from "@App/locales/locales";
 import FileSystemFactory from "@Packages/filesystem/factory";
@@ -310,13 +310,8 @@ export default class GMApi {
   }
 
   @PermissionVerify.API()
-  CAT_userConfig(request: Request, sender: GetSender): void {
-    const tabId = sender.getExtMessageSender().tabId;
-    chrome.tabs.create({
-      url: `/src/options.html#/?userConfig=${request.uuid}`,
-      active: true,
-      openerTabId: tabId === -1 ? undefined : tabId,
-    });
+  CAT_userConfig(request: Request): void {
+    openInCurrentTab(`/src/options.html#/?userConfig=${request.uuid}`);
   }
 
   @PermissionVerify.API({

src/app/service/service_worker/permission_verify.ts

@@ -9,7 +9,8 @@ import Cache from "@App/app/cache";
 import CacheKey from "@App/app/cache_key";
 import { v4 as uuidv4 } from "uuid";
 import Queue from "@App/pkg/utils/queue";
-import { subscribeScriptDelete } from "../queue";
+import { type TDeleteScript } from "../queue";
+import { openInCurrentTab } from "@App/pkg/utils/utils";
 
 export interface ConfirmParam {
   // 权限名
@@ -150,7 +151,7 @@ export default class PermissionVerify {
       return;
     }
     try {
-      const ret = await this.confirm(data.request, data.confirm, data.sender);
+      const ret = await this.confirm(data.request, data.confirm);
       data.resolve(ret);
     } catch (e) {
       data.reject(e);
@@ -169,7 +170,7 @@ export default class PermissionVerify {
     });
   }
 
-  async confirm(request: Request, confirm: boolean | ConfirmParam, sender: GetSender): Promise<boolean> {
+  async confirm(request: Request, confirm: boolean | ConfirmParam): Promise<boolean> {
     if (typeof confirm === "boolean") {
       return confirm;
     }
@@ -194,7 +195,7 @@ export default class PermissionVerify {
       throw new Error("permission denied");
     }
     // 没有权限,则弹出页面让用户进行确认
-    const userConfirm = await this.confirmWindow(request.script, confirm, sender);
+    const userConfirm = await this.confirmWindow(request.script, confirm);
     // 成功存入数据库
     const model: Permission = {
       uuid: request.uuid,
@@ -250,7 +251,7 @@ export default class PermissionVerify {
   > = new Map();
 
   // 弹出窗口让用户进行确认
-  async confirmWindow(script: Script, confirm: ConfirmParam, sender: GetSender): Promise<UserConfirm> {
+  async confirmWindow(script: Script, confirm: ConfirmParam): Promise<UserConfirm> {
     return new Promise((resolve, reject) => {
       const uuid = uuidv4();
       // 超时处理
@@ -269,11 +270,7 @@ export default class PermissionVerify {
         reject,
       });
       // 打开窗口
-      const tabId = sender.getExtMessageSender().tabId;
-      chrome.tabs.create({
-        url: chrome.runtime.getURL(`src/confirm.html?uuid=${uuid}`),
-        openerTabId: tabId === -1 ? undefined : tabId, // 如果是后台脚本,则不设置openerTabId
-      });
+      openInCurrentTab(`src/confirm.html?uuid=${uuid}`);
     });
   }
 

src/pkg/utils/utils.ts

@@ -87,37 +87,17 @@ export function parseStorageValue(str: string): unknown {
   }
 }
 
-// 在当前页后打开一个新页面
-export function openInCurrentTab(url: string) {
-  chrome.tabs.query(
-    {
-      active: true,
-    },
-    (tabs) => {
-      if (chrome.runtime.lastError) {
-        console.error("chrome.runtime.lastError in chrome.tabs.query:", chrome.runtime.lastError);
-        // 因为API报错，我们不应无视并尝试强行打开新页面
-        return;
-      }
-      if (tabs.length) {
-        chrome.tabs.create({
-          url,
-          openerTabId: tabs[0].id,
-          index: tabs[0].index + 1,
-        });
-      } else {
-        chrome.tabs.create({
-          url,
-        });
-      }
-    }
-  );
-}
-
 export function isDebug() {
   return process.env.NODE_ENV === "development";
 }
 
+// https://developer.chrome.com/docs/extensions/reference/api/tabs?hl=en#get_the_current_tab
+export async function getCurrentTab() {
+  // `tab` will either be a `tabs.Tab` instance or `undefined`.
+  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+  return tab;
+}
+
 // 检查订阅规则是否改变,是否能够静默更新
 export function checkSilenceUpdate(oldMeta: Metadata, newMeta: Metadata): boolean {
   // 判断connect是否改变
@@ -165,6 +145,40 @@ export function getIcon(script: Script): string | undefined {
   );
 }
 
+// 在当前页后打开一个新页面
+export async function openInCurrentTab(url: string) {
+  const tab = await getCurrentTab();
+  const createProperties: chrome.tabs.CreateProperties = { url };
+  if (tab) {
+    // 添加 openerTabId 有可能出现 Error "Tab opener must be in the same window as the updated tab."
+    if (tab.id! >= 0) {
+      // 如 Tab API 有提供 tab.id, 則指定 tab.id
+      createProperties.openerTabId = tab.id;
+      if (tab.windowId! >= 0) {
+        // 如 Tab API 有提供 tab.windowId, 則指定 tab.windowId
+        createProperties.windowId = tab.windowId;
+      }
+    }
+    createProperties.index = tab.index + 1;
+  }
+  // 先嘗試以 openerTabId 和 windowId 打開
+  try {
+    await chrome.tabs.create(createProperties);
+    return;
+  } catch {
+    // do nothing
+  }
+  // 失敗的話，刪去 openerTabId 和 windowId ，再次嘗試打開
+  delete createProperties.openerTabId;
+  delete createProperties.windowId;
+  try {
+    await chrome.tabs.create(createProperties);
+    return;
+  } catch {
+    // do nothing
+  }
+}
+
 export function errorMsg(e: any): string {
   if (typeof e === "string") {
     return e;