@module-federation/devtools 2.3.3 → 2.5.0

package/dist/lib/i18n/index.js

@@ -45,6 +45,7 @@ const resources = {
           proxy: "Proxy",
           dependency: "Dependency graph",
           share: "Shared",
+          loadingTrace: "Loading trace",
           performance: "Performance"
         },
         header: {
@@ -263,6 +264,94 @@ const resources = {
         shared: "Shared",
         entry: "Entry",
         version: "Version"
+      },
+      loadingTrace: {
+        title: "Loading Trace",
+        empty: "No loading report yet",
+        emptyEnableChrome: "No observability plugin was detected on the page. Enable Chrome observability to start collecting loading reports.",
+        status: {
+          enabled: "Observability is enabled for the current page.",
+          disabled: "Observability is not enabled for the current page.",
+          unavailable: "Current page is unavailable.",
+          reloading: "Configuration saved. Reloading current page.",
+          synced: "Reports synced.",
+          noReports: "No report found on the current page.",
+          userPlugin: "Application observability plugin detected. Syncing existing reports."
+        },
+        confirm: {
+          observeTitle: "Start observability?",
+          updateTitle: "Update configuration?",
+          content: "The current tab will reload after the configuration is saved."
+        },
+        actions: {
+          observeNow: "Observe now",
+          updateConfig: "Update config",
+          config: "Configuration",
+          disable: "Disable",
+          refresh: "Sync",
+          export: "Export",
+          confirm: "Confirm",
+          cancel: "Cancel"
+        },
+        config: {
+          level: "Level",
+          levelTip: "Controls how much event detail is kept. Verbose keeps the full timeline, summary keeps key results, and error focuses on failures.",
+          verbose: "Verbose",
+          summary: "Summary",
+          error: "Error",
+          console: "Console hints",
+          consoleTip: "Prints lightweight hints in the inspected page console. Turn it off when the page console should stay clean."
+        },
+        stats: {
+          state: "State",
+          reports: "Reports",
+          events: "Events",
+          latest: "Latest outcome",
+          customTip: "Custom means the inspected page already registered its own observability plugin, so reports are read from the page instead of only from the Chrome collection plugin."
+        },
+        reports: {
+          search: "Filter reports",
+          noMatch: "No matching report",
+          success: "Success",
+          failed: "Failed",
+          pending: "Pending",
+          recovered: "Recovered",
+          eventRecovered: "Recovered",
+          limited: "Basic observability",
+          lowVersionTip: "The current MF runtime version is too low, so only basic loading events can be collected. Fine-grained remoteEntry, init, expose, factory, and shared phases may be missing. Upgrade to 2.5.0+ for the full loading trace.",
+          unknownVersionTip: "The current MF runtime version cannot be detected, so Chrome observability may only collect basic loading events. Fine-grained remoteEntry, init, expose, factory, and shared phases may be missing."
+        },
+        currentLoad: {
+          title: "Current loading",
+          remoteReport: "Remote",
+          sharedReport: "Shared dependency",
+          consumer: "Current consumer",
+          request: "Request",
+          producer: "Producer",
+          remoteName: "Remote name",
+          expose: "Expose",
+          shared: "Shared dependency",
+          provider: "Provider",
+          requiredVersion: "Required version",
+          selectedVersion: "Selected version",
+          availableVersions: "Available versions"
+        },
+        loadedBefore: {
+          title: "Other consumer loading records",
+          consumerCount: "{{count}} consumer(s)",
+          producerLoaded: "Same producer was loaded before",
+          exposeLoaded: "Current expose was loaded before",
+          exposeNotLoaded: "Current expose was not loaded before",
+          consumer: "Consumer",
+          status: "Status",
+          exposes: "Loaded exposes",
+          unknownConsumer: "Unknown consumer",
+          entryReady: "remoteEntry is available",
+          entryMissing: "remoteEntry is not available",
+          initReady: "container was initialized",
+          initMissing: "container was not initialized",
+          noExposes: "No expose record"
+        }
       }
     }
   },
@@ -274,6 +363,7 @@ const resources = {
           proxy: "代理配置",
           dependency: "依赖关系图",
           share: "共享依赖",
+          loadingTrace: "加载追踪",
           performance: "性能"
         },
         header: {
@@ -492,6 +582,94 @@ const resources = {
         shared: "共享依赖",
         entry: "入口",
         version: "版本"
+      },
+      loadingTrace: {
+        title: "加载追踪",
+        empty: "暂无加载报告",
+        emptyEnableChrome: "当前页面未检测到观测插件。可以开启 Chrome 采集来收集加载报告。",
+        status: {
+          enabled: "当前页面已开启加载追踪。",
+          disabled: "当前页面未开启加载追踪。",
+          unavailable: "当前页面暂不可用。",
+          reloading: "配置已保存，正在刷新当前页面。",
+          synced: "报告已同步。",
+          noReports: "当前页面还没有报告。",
+          userPlugin: "已检测到页面自带观测插件，正在同步已有报告。"
+        },
+        confirm: {
+          observeTitle: "开启加载追踪？",
+          updateTitle: "更新配置？",
+          content: "保存配置后会刷新当前标签页。"
+        },
+        actions: {
+          observeNow: "开启采集",
+          updateConfig: "更新配置",
+          config: "配置",
+          disable: "关闭",
+          refresh: "同步",
+          export: "导出",
+          confirm: "确认",
+          cancel: "取消"
+        },
+        config: {
+          level: "记录级别",
+          levelTip: "控制保留多少事件细节。完整会保留完整链路，摘要只保留关键结果，错误只关注失败。",
+          verbose: "完整",
+          summary: "摘要",
+          error: "错误",
+          console: "控制台提示",
+          consoleTip: "在被调试页面的控制台打印轻量提示。如果想保持页面控制台干净，可以关闭。"
+        },
+        stats: {
+          state: "状态",
+          reports: "报告",
+          events: "事件",
+          latest: "最新结果",
+          customTip: "Custom 表示当前页面已经自己注册了观测插件，报告会从页面已有插件中读取，不只依赖 Chrome 插件注入采集。"
+        },
+        reports: {
+          search: "过滤报告",
+          noMatch: "没有匹配的报告",
+          success: "成功",
+          failed: "失败",
+          pending: "进行中",
+          recovered: "兜底成功",
+          eventRecovered: "兜底",
+          limited: "基础观测",
+          lowVersionTip: "当前 MF 运行时版本较低，只能采集基础加载事件。remoteEntry、init、expose、factory、shared 等细阶段可能缺失。升级到 2.5.0+ 后可获得完整链路。",
+          unknownVersionTip: "当前 MF 运行时版本无法识别，Chrome 观测可能只能采集基础加载事件。remoteEntry、init、expose、factory、shared 等细阶段可能缺失。"
+        },
+        currentLoad: {
+          title: "当前加载",
+          remoteReport: "远程模块",
+          sharedReport: "共享依赖",
+          consumer: "当前消费方",
+          request: "请求",
+          producer: "生产者",
+          remoteName: "生产者名称",
+          expose: "Expose",
+          shared: "共享依赖",
+          provider: "提供方",
+          requiredVersion: "要求版本",
+          selectedVersion: "实际版本",
+          availableVersions: "可用版本"
+        },
+        loadedBefore: {
+          title: "其他消费方加载记录",
+          consumerCount: "{{count}} 个消费方",
+          producerLoaded: "同一生产者之前已被加载",
+          exposeLoaded: "当前 expose 之前已被加载",
+          exposeNotLoaded: "当前 expose 之前未被加载",
+          consumer: "消费方",
+          status: "状态",
+          exposes: "已加载 expose",
+          unknownConsumer: "未知消费方",
+          entryReady: "remoteEntry 已拿到",
+          entryMissing: "remoteEntry 未拿到",
+          initReady: "容器已初始化",
+          initMissing: "容器未初始化",
+          noExposes: "暂无导出记录"
+        }
       }
     }
   }

package/dist/lib/utils/chrome/fast-refresh.js

@@ -1,32 +1,4 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -47,31 +19,176 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-var import_sdk = require("@module-federation/sdk");
 var import__ = require("../index");
-var import_sdk2 = require("../sdk");
+var import_sdk = require("../sdk");
 var import_constant = require("../../template/constant");
 var _a;
 const SUPPORT_PKGS = ["react", "react-dom"];
-const fetchAndExecuteUmdSync = (url) => {
+const DEFAULT_SHARE_SCOPE = "default";
+const DEFAULT_GLOBAL_KEY_MAP = {
+  react: "React",
+  "react-dom": "ReactDOM"
+};
+const sanitizeWindowKey = (value) => value.replace(/[^a-zA-Z0-9_$]/g, "_");
+const getShareScopes = (scope) => Array.isArray(scope) && scope.length ? scope : [DEFAULT_SHARE_SCOPE];
+const getDefaultGlobalKey = (pkgName) => DEFAULT_GLOBAL_KEY_MAP[pkgName];
+const getScopedGlobalKey = (scope, pkgName) => `${sanitizeWindowKey(scope)}_${sanitizeWindowKey(pkgName)}`;
+const getWindowValue = (key) => window[key];
+const setWindowValue = (key, value) => {
+  window[key] = value;
+};
+const setScopeGlobals = (pkgName, scopes, source) => {
+  if (!source) {
+    return source;
+  }
+  scopes.forEach((scope) => {
+    setWindowValue(getScopedGlobalKey(scope, pkgName), source);
+  });
+  return source;
+};
+const getScopeGlobal = (pkgName, scopes) => {
+  for (const scope of scopes) {
+    const scopeGlobal = getWindowValue(getScopedGlobalKey(scope, pkgName));
+    if (scopeGlobal) {
+      return scopeGlobal;
+    }
+  }
+  return void 0;
+};
+const getEagerShareInfo = (eagerShare) => {
+  if (!Array.isArray(eagerShare) || eagerShare.length < 2) {
+    return null;
+  }
+  const [, version, scopes] = eagerShare;
+  if (typeof version !== "string") {
+    return null;
+  }
+  return {
+    version,
+    scopes: getShareScopes(scopes)
+  };
+};
+const updateEagerShareInfo = (devtoolsMessage2, pkgName, version, scopes) => {
+  const existing = getEagerShareInfo(devtoolsMessage2[import_constant.__EAGER_SHARE__]);
+  const mergedScopes = Array.from(
+    /* @__PURE__ */ new Set([...(existing == null ? void 0 : existing.scopes) || [], ...scopes])
+  );
+  devtoolsMessage2[import_constant.__EAGER_SHARE__] = [pkgName, version, mergedScopes];
+  return {
+    shouldReload: !existing || existing.version !== version
+  };
+};
+const requestUmdSourceSync = (url) => {
   try {
     const response = new XMLHttpRequest();
     response.open("GET", url, false);
     response.overrideMimeType("text/plain");
     response.send();
     if (response.status === 200) {
-      const scriptContent = response.responseText;
-      const moduleFunction = new Function(scriptContent);
-      return moduleFunction(window);
-    } else {
-      throw new Error(
-        `Failed to load module from ${url}: HTTP ${response.status}`
-      );
+      return response.responseText;
     }
+    throw new Error(
+      `Failed to load module from ${url}: HTTP ${response.status}`
+    );
   } catch (error) {
     throw new Error(`Failed to fetch module from ${url}: ${error.message}`);
   }
 };
+const requestUmdSource = (url) => new Promise((resolve, reject) => {
+  try {
+    const response = new XMLHttpRequest();
+    response.open("GET", url, true);
+    response.overrideMimeType("text/plain");
+    response.onload = () => {
+      if (response.status === 200) {
+        resolve(response.responseText);
+        return;
+      }
+      reject(
+        new Error(
+          `Failed to load module from ${url}: HTTP ${response.status}`
+        )
+      );
+    };
+    response.onerror = () => {
+      reject(new Error(`Failed to fetch module from ${url}`));
+    };
+    response.send();
+  } catch (error) {
+    reject(new Error(`Failed to fetch module from ${url}: ${error.message}`));
+  }
+});
+const createUmdSandbox = (pkgName, scopes) => {
+  const sandboxTarget = /* @__PURE__ */ Object.create(null);
+  const sandbox = new Proxy(sandboxTarget, {
+    get(target, key) {
+      if (typeof key === "symbol") {
+        return Reflect.get(target, key);
+      }
+      if (key in target) {
+        return target[key];
+      }
+      const value = window[key];
+      return typeof value === "function" ? value.bind(window) : value;
+    },
+    set(target, key, value) {
+      target[key] = value;
+      return true;
+    },
+    has(target, key) {
+      return key in target || key in window;
+    }
+  });
+  sandboxTarget.window = sandbox;
+  sandboxTarget.self = sandbox;
+  sandboxTarget.globalThis = sandbox;
+  sandboxTarget.global = sandbox;
+  sandboxTarget.document = window.document;
+  if (pkgName === "react-dom") {
+    sandboxTarget.React = getScopeGlobal("react", scopes);
+  }
+  return sandbox;
+};
+const executeUmdModule = (scriptContent, pkgName, scopes) => {
+  const sandbox = createUmdSandbox(pkgName, scopes);
+  const moduleFunction = new Function(
+    "window",
+    "self",
+    "globalThis",
+    "global",
+    "document",
+    "exports",
+    "module",
+    "define",
+    "require",
+    scriptContent
+  );
+  moduleFunction.call(
+    sandbox,
+    sandbox,
+    sandbox,
+    sandbox,
+    sandbox,
+    sandbox.document,
+    void 0,
+    void 0,
+    void 0,
+    void 0
+  );
+  return sandbox[getDefaultGlobalKey(pkgName)];
+};
+const loadUmdModuleSync = (pkgName, version, scopes) => executeUmdModule(
+  requestUmdSourceSync((0, import__.getUnpkgUrl)(pkgName, version)),
+  pkgName,
+  scopes
+);
+const loadUmdModule = (pkgName, version, scopes) => __async(exports, null, function* () {
+  return executeUmdModule(
+    yield requestUmdSource((0, import__.getUnpkgUrl)(pkgName, version)),
+    pkgName,
+    scopes
+  );
+});
 const getDevtoolsMessage = () => {
   const devtoolsMessageStr = localStorage.getItem(import_constant.__FEDERATION_DEVTOOLS__);
   if (devtoolsMessageStr) {
@@ -84,18 +201,31 @@ const getDevtoolsMessage = () => {
   return null;
 };
 const devtoolsMessage = getDevtoolsMessage();
-if ((devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__ENABLE_FAST_REFRESH__]) && (devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__EAGER_SHARE__])) {
-  const [_name, version] = devtoolsMessage[import_constant.__EAGER_SHARE__];
-  fetchAndExecuteUmdSync((0, import__.getUnpkgUrl)("react", version));
-  fetchAndExecuteUmdSync((0, import__.getUnpkgUrl)("react-dom", version));
+const eagerShareInfo = getEagerShareInfo(devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__EAGER_SHARE__]);
+if ((devtoolsMessage == null ? void 0 : devtoolsMessage[import_constant.__ENABLE_FAST_REFRESH__]) && eagerShareInfo) {
+  const { version, scopes } = eagerShareInfo;
+  setScopeGlobals("react", scopes, loadUmdModuleSync("react", version, scopes));
+  setScopeGlobals(
+    "react-dom",
+    scopes,
+    loadUmdModuleSync("react-dom", version, scopes)
+  );
 }
 const fastRefreshPlugin = () => {
+  let orderResolve;
+  const orderPromise = new Promise((resolve) => {
+    orderResolve = resolve;
+  });
   return {
     name: "mf-fast-refresh-plugin",
-    beforeInit(_a2) {
-      var _b = _a2, { userOptions } = _b, args = __objRest(_b, ["userOptions"]);
-      const shareInfo = userOptions.shared;
-      const twinsShareInfo = args.shareInfo;
+    beforeRegisterShare(args) {
+      var _a2;
+      const { pkgName, shared } = args;
+      if (!SUPPORT_PKGS.includes(pkgName)) {
+        return args;
+      }
+      const supportPkgName = pkgName;
+      const shareScopes = getShareScopes(shared.scope);
       let enableFastRefresh = false;
       let devtoolsMessage2 = {};
       const devtoolsMessageStr = localStorage.getItem(import_constant.__FEDERATION_DEVTOOLS__);
@@ -108,106 +238,91 @@ const fastRefreshPlugin = () => {
         }
       }
       if (!enableFastRefresh) {
-        return __spreadValues({
-          userOptions
-        }, args);
+        return args;
       }
-      if (shareInfo && (0, import__.isObject)(shareInfo)) {
-        let orderResolve;
-        const orderPromise = new Promise((resolve) => {
-          orderResolve = resolve;
-        });
-        Object.keys(shareInfo).forEach((share) => __async(this, null, function* () {
-          const sharedArr = Array.isArray(shareInfo[share]) ? shareInfo[share] : [shareInfo[share]];
-          let twinsSharedArr;
-          if (twinsShareInfo) {
-            twinsSharedArr = Array.isArray(twinsShareInfo[share]) ? twinsShareInfo[share] : [twinsShareInfo[share]];
+      if (((_a2 = shared.shareConfig) == null ? void 0 : _a2.eager) || shared.lib) {
+        if (!(devtoolsMessage2 == null ? void 0 : devtoolsMessage2[import_constant.__EAGER_SHARE__])) {
+          const eagerShareInfo2 = updateEagerShareInfo(
+            devtoolsMessage2,
+            pkgName,
+            shared.version,
+            shareScopes
+          );
+          localStorage.setItem(
+            import_constant.__FEDERATION_DEVTOOLS__,
+            JSON.stringify(devtoolsMessage2)
+          );
+          if (eagerShareInfo2.shouldReload) {
+            window.location.reload();
           }
-          sharedArr.forEach((shared, idx) => {
-            var _a3;
-            if (!SUPPORT_PKGS.includes(share)) {
-              return;
-            }
-            if ((_a3 = shared.shareConfig) == null ? void 0 : _a3.eager) {
-              if (!(devtoolsMessage2 == null ? void 0 : devtoolsMessage2[import_constant.__EAGER_SHARE__])) {
-                const eagerShare = [];
-                eagerShare.push(share, shared.version);
-                devtoolsMessage2[import_constant.__EAGER_SHARE__] = eagerShare;
-                localStorage.setItem(
-                  import_constant.__FEDERATION_DEVTOOLS__,
-                  JSON.stringify(devtoolsMessage2)
-                );
-                window.location.reload();
-              }
-              if (share === "react-dom") {
-                shared.lib = () => window.ReactDOM;
-              }
-              if (share === "react") {
-                shared.lib = () => window.React;
-              }
-              return;
-            }
-            let get;
-            if (share === "react") {
-              get = () => (0, import_sdk.loadScript)((0, import__.getUnpkgUrl)(share, shared.version), {
-                attrs: {
-                  defer: false,
-                  async: false,
-                  "data-mf-injected": "true"
-                }
-              }).then(() => {
-                orderResolve();
-              });
-            }
-            if (share === "react-dom") {
-              get = () => orderPromise.then(
-                () => (0, import_sdk.loadScript)((0, import__.getUnpkgUrl)(share, shared.version), {
-                  attrs: { defer: true, async: false }
-                })
+        } else {
+          updateEagerShareInfo(
+            devtoolsMessage2,
+            pkgName,
+            shared.version,
+            shareScopes
+          );
+          localStorage.setItem(
+            import_constant.__FEDERATION_DEVTOOLS__,
+            JSON.stringify(devtoolsMessage2)
+          );
+        }
+        if (pkgName === "react-dom") {
+          shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
+        }
+        if (pkgName === "react") {
+          shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
+        }
+        return args;
+      }
+      let get;
+      if (pkgName === "react") {
+        get = () => loadUmdModule(supportPkgName, shared.version, shareScopes).then((moduleValue) => {
+          setScopeGlobals(supportPkgName, shareScopes, moduleValue);
+          return moduleValue;
+        }).then(() => {
+          orderResolve();
+        });
+      }
+      if (pkgName === "react-dom") {
+        get = () => orderPromise.then(
+          () => loadUmdModule(supportPkgName, shared.version, shareScopes)
+        ).then((result) => {
+          setScopeGlobals(supportPkgName, shareScopes, result);
+          return result;
+        });
+      }
+      if (typeof get === "function") {
+        const finalGet = get;
+        if (pkgName === "react") {
+          shared.get = () => __async(this, null, function* () {
+            if (!getScopeGlobal(supportPkgName, shareScopes)) {
+              yield finalGet();
+              console.warn(
+                "[Module Federation HMR]: You are using Module Federation Devtools to debug online host, it will cause your project load Dev mode React and ReactDOM. If not in this mode, please disable it in Module Federation Devtools"
               );
             }
-            if (typeof get === "function") {
-              if (share === "react") {
-                shared.get = () => __async(this, null, function* () {
-                  if (!window.React) {
-                    yield get();
-                    console.warn(
-                      "[Module Federation HMR]: You are using Module Federation Devtools to debug online host, it will cause your project load Dev mode React and ReactDOM. If not in this mode, please disable it in Module Federation Devtools"
-                    );
-                  }
-                  shared.lib = () => window.React;
-                  return () => window.React;
-                });
-              }
-              if (share === "react-dom") {
-                shared.get = () => __async(this, null, function* () {
-                  if (!window.ReactDOM) {
-                    yield get();
-                  }
-                  shared.lib = () => window.ReactDOM;
-                  return () => window.ReactDOM;
-                });
-              }
-              if (twinsShareInfo) {
-                twinsSharedArr[idx].get = shared.get;
-              }
+            shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
+            return () => getScopeGlobal(supportPkgName, shareScopes);
+          });
+        }
+        if (pkgName === "react-dom") {
+          shared.get = () => __async(this, null, function* () {
+            if (!getScopeGlobal(supportPkgName, shareScopes)) {
+              yield finalGet();
             }
+            shared.lib = () => getScopeGlobal(supportPkgName, shareScopes);
+            return () => getScopeGlobal(supportPkgName, shareScopes);
           });
-        }));
-        return __spreadValues({
-          userOptions
-        }, args);
-      } else {
-        return __spreadValues({
-          userOptions
-        }, args);
+        }
       }
+      return args;
     }
   };
 };
 if (!(window == null ? void 0 : window.__FEDERATION__)) {
-  (0, import_sdk2.definePropertyGlobalVal)(window, "__FEDERATION__", {});
-  (0, import_sdk2.definePropertyGlobalVal)(window, "__VMOK__", window.__FEDERATION__);
+  (0, import_sdk.definePropertyGlobalVal)(window, "__FEDERATION__", {});
+  (0, import_sdk.definePropertyGlobalVal)(window, "__VMOK__", window.__FEDERATION__);
 }
 if (!(window == null ? void 0 : window.__FEDERATION__.__GLOBAL_PLUGIN__)) {
   window.__FEDERATION__.__GLOBAL_PLUGIN__ = [];

package/dist/lib/utils/chrome/index.js

@@ -105,10 +105,11 @@ const syncActiveTab = (tabId) => __async(void 0, null, function* () {
       setTargetTab(tab);
       return tab;
     }
-    const [activeTab] = yield getTabs({
+    const tabs = yield getTabs({
       active: true,
       lastFocusedWindow: true
     });
+    const activeTab = Array.isArray(tabs) ? tabs[0] : void 0;
     setTargetTab(activeTab);
     return activeTab;
   } catch (error) {
@@ -131,9 +132,7 @@ function getInspectWindowTabId() {
         function(info, error) {
           const { tabId } = chrome.devtools.inspectedWindow;
           getTabs().then((tabs) => {
-            const target = tabs.find(
-              (tab) => tab.id === tabId
-            );
+            const target = Array.isArray(tabs) ? tabs.find((tab) => tab.id === tabId) : void 0;
             setTargetTab(target);
           });
           console.log(