@module-federation/devtools 0.0.0-perf-devtools-20260107043700 → 0.0.0-perf-website-code-usage-20260914033703

package/dist/lib/utils/chrome/safe-post-message.js

@@ -0,0 +1,147 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var safe_post_message_exports = {};
+__export(safe_post_message_exports, {
+  sanitizePostMessagePayload: () => sanitizePostMessagePayload
+});
+module.exports = __toCommonJS(safe_post_message_exports);
+const FUNCTION_PLACEHOLDER = "function(){}";
+const UNDEFINED_PLACEHOLDER = "[undefined]";
+const CIRCULAR_PLACEHOLDER = "[circular]";
+const NON_SERIALIZABLE_PLACEHOLDER = "[unserializable]";
+const toStringTag = (value) => Object.prototype.toString.call(value).slice(8, -1);
+const isPlainObject = (value) => {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+};
+const sanitizeValue = (value, seen) => {
+  if (value === null || typeof value === "string" || typeof value === "number") {
+    return Number.isNaN(value) ? "[NaN]" : value;
+  }
+  if (typeof value === "boolean") {
+    return value;
+  }
+  if (typeof value === "function") {
+    return FUNCTION_PLACEHOLDER;
+  }
+  if (typeof value === "undefined") {
+    return UNDEFINED_PLACEHOLDER;
+  }
+  if (typeof value === "bigint" || typeof value === "symbol") {
+    return String(value);
+  }
+  if (!(value instanceof Object)) {
+    return NON_SERIALIZABLE_PLACEHOLDER;
+  }
+  if (seen.has(value)) {
+    return CIRCULAR_PLACEHOLDER;
+  }
+  if (Array.isArray(value)) {
+    const next2 = [];
+    seen.set(value, next2);
+    value.forEach((item, index) => {
+      next2[index] = sanitizeValue(item, seen);
+    });
+    return next2;
+  }
+  if (value instanceof Date) {
+    return value.toISOString();
+  }
+  if (value instanceof RegExp) {
+    return value.toString();
+  }
+  if (value instanceof Error) {
+    const next2 = {
+      name: value.name,
+      message: value.message,
+      stack: value.stack || ""
+    };
+    seen.set(value, next2);
+    return next2;
+  }
+  if (value instanceof Map) {
+    const next2 = [];
+    seen.set(value, next2);
+    next2.push(
+      ...Array.from(value.entries()).map(([key, item]) => [
+        sanitizeValue(key, seen),
+        sanitizeValue(item, seen)
+      ])
+    );
+    return next2;
+  }
+  if (value instanceof Set) {
+    const next2 = [];
+    seen.set(value, next2);
+    next2.push(
+      ...Array.from(value.values()).map((item) => sanitizeValue(item, seen))
+    );
+    return next2;
+  }
+  if (ArrayBuffer.isView(value)) {
+    return Array.from(new Uint8Array(value.buffer));
+  }
+  if (value instanceof ArrayBuffer) {
+    return Array.from(new Uint8Array(value));
+  }
+  if (typeof Node !== "undefined" && value instanceof Node) {
+    return `[${toStringTag(value)}]`;
+  }
+  if (typeof Window !== "undefined" && value instanceof Window) {
+    return "[Window]";
+  }
+  if (typeof Document !== "undefined" && value instanceof Document) {
+    return "[Document]";
+  }
+  const next = {};
+  seen.set(value, next);
+  const entries = isPlainObject(value) ? Object.keys(value).map((key) => {
+    try {
+      return [key, value[key]];
+    } catch (_error) {
+      return [key, NON_SERIALIZABLE_PLACEHOLDER];
+    }
+  }) : Reflect.ownKeys(value).map((key) => {
+    try {
+      return [
+        String(key),
+        value[key]
+      ];
+    } catch (_error) {
+      return [String(key), NON_SERIALIZABLE_PLACEHOLDER];
+    }
+  });
+  entries.forEach(([key, item]) => {
+    try {
+      next[key] = sanitizeValue(item, seen);
+    } catch (_error) {
+      next[key] = NON_SERIALIZABLE_PLACEHOLDER;
+    }
+  });
+  return next;
+};
+const sanitizePostMessagePayload = (payload) => {
+  return sanitizeValue(payload, /* @__PURE__ */ new WeakMap());
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  sanitizePostMessagePayload
+});

package/dist/lib/utils/chrome/snapshot-plugin.js

@@ -1,9 +1,6 @@
-"use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -13,47 +10,8 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var import_sdk = require("@module-federation/sdk");
-var import_helpers = __toESM(require("@module-federation/runtime/helpers"));
-var import_sdk2 = require("../sdk");
-var _a;
-const chromeDevtoolsPlugin = function() {
-  return {
-    name: "mf-chrome-devtools-inject-snapshot-plugin",
-    beforeLoadRemoteSnapshot({ options }) {
-      const { nativeGlobal } = import_helpers.default.global;
-      if (!options || options.inBrowser) {
-        const realLocalStorage = nativeGlobal.localStorage || localStorage;
-        const debugModuleInfoStr = realLocalStorage.getItem(
-          import_sdk.MODULE_DEVTOOL_IDENTIFIER
-        );
-        if (debugModuleInfoStr && !nativeGlobal.__INIT_VMOK_CHROME_DEVTOOL_PLUGIN__) {
-          const chromeDevtoolSnapshot = JSON.parse(debugModuleInfoStr);
-          if (chromeDevtoolSnapshot) {
-            import_helpers.default.global.addGlobalSnapshot(chromeDevtoolSnapshot);
-            nativeGlobal.__INIT_VMOK_CHROME_DEVTOOL_PLUGIN__ = true;
-            console.warn(
-              "[Module Federation Devtools]: You are using the chrome devtool to proxy online module"
-            );
-          }
-        }
-      }
-    }
-  };
-};
-if (!(window == null ? void 0 : window.__FEDERATION__)) {
-  (0, import_sdk2.definePropertyGlobalVal)(window, "__FEDERATION__", {});
-  (0, import_sdk2.definePropertyGlobalVal)(window, "__VMOK__", window.__FEDERATION__);
-}
-if (!(window == null ? void 0 : window.__FEDERATION__.__GLOBAL_PLUGIN__)) {
-  window.__FEDERATION__.__GLOBAL_PLUGIN__ = [];
-}
-(_a = window.__FEDERATION__.__GLOBAL_PLUGIN__) == null ? void 0 : _a.push(chromeDevtoolsPlugin());
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var snapshot_plugin_exports = {};
+module.exports = __toCommonJS(snapshot_plugin_exports);
+const basicProxyCore = require("../../vendor/basic-proxy-core.js");
+basicProxyCore.registerSnapshotPlugin(globalThis);

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -15,7 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -43,8 +41,7 @@ __export(data_exports, {
   separateType: () => separateType
 });
 module.exports = __toCommonJS(data_exports);
-var import_snapshot = require("./snapshot");
-__reExport(data_exports, require("./snapshot"), module.exports);
+const basicProxyCore = require("../../vendor/basic-proxy-core.js");
 const separateType = (moduleInfo) => {
   const consumers = {};
   const producer = [];
@@ -74,33 +71,13 @@ const separateType = (moduleInfo) => {
   };
 };
 const getModuleInfo = (proxyRules) => __async(void 0, null, function* () {
-  let freshModuleInfo;
-  const { moduleInfo } = window.__FEDERATION__;
-  const { consumers } = separateType(moduleInfo);
-  const overrides = {};
-  const isMicroMode = Object.keys(consumers).some((moduleId) => {
-    const subApps = consumers[moduleId].consumerList;
-    return Array.isArray(subApps) && subApps.length;
-  });
-  proxyRules.forEach((rule) => {
-    const { key, value } = rule;
-    overrides[key] = value;
-  });
-  if (isMicroMode) {
-    freshModuleInfo = (0, import_snapshot.calculateMicroAppSnapshot)(moduleInfo, overrides);
-  } else {
-    freshModuleInfo = (0, import_snapshot.calculateSnapshot)(moduleInfo, overrides);
-  }
-  console.debug("New Snapshot: ", freshModuleInfo);
-  return {
-    status: "success",
-    moduleInfo: freshModuleInfo,
-    overrides
-  };
+  return basicProxyCore.getModuleInfo(
+    proxyRules,
+    window.__FEDERATION__.moduleInfo
+  );
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getModuleInfo,
-  separateType,
-  ...require("./snapshot")
+  separateType
 });

package/dist/lib/utils/index.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/utils/sdk/graph.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -43,26 +42,38 @@ const validateSemver = (schema) => {
   return reg.test(schema);
 };
 const validatePort = (schema) => !isNaN(Number(schema));
-const splitModuleId = (target) => {
+const isEntrySegment = (segment) => segment.startsWith("http") || segment.startsWith("//");
+const parseModuleId = (target) => {
   const array = target.split(":");
   const { length } = array;
+  const result = {
+    name: target,
+    version: ""
+  };
   if (length === 1) {
-    return target;
+    return result;
   } else if (length >= 3) {
-    if (array[length - 1].endsWith(".json") || array[length - 1].endsWith(".js")) {
-      const idx = array.findIndex((t) => t.startsWith("http"));
-      return array[idx - 1];
-    } else {
-      return array[1];
+    const idx = array.findIndex(isEntrySegment);
+    if (idx > 0) {
+      result.name = array[idx - 1];
+      result.version = array.slice(idx).join(":");
+      return result;
     }
+    result.name = array[1];
+    result.version = array.slice(2).join(":");
+    return result;
   } else {
     const nameOrVersion = array[length - 1];
-    if (nameOrVersion === "*" || nameOrVersion === "latest" || validateSemver(nameOrVersion)) {
-      return array[0];
+    if (nameOrVersion === "*" || nameOrVersion === "latest" || validateSemver(nameOrVersion) || isEntrySegment(nameOrVersion) || nameOrVersion.endsWith(".json") || nameOrVersion.endsWith(".js")) {
+      result.name = array[0];
+      result.version = nameOrVersion;
+      return result;
     } else {
-      return nameOrVersion;
+      result.name = nameOrVersion;
+      return result;
     }
   }
+  return result;
 };
 class DependencyGraph {
   constructor(snapshot, initTarget) {
@@ -135,12 +146,14 @@ class DependencyGraph {
     if (!targetGraph || !((_a = Object.keys(targetGraph)) == null ? void 0 : _a.length)) {
       return;
     }
-    const name = splitModuleId(target);
+    const { name, version } = parseModuleId(target);
     const targetWithoutType = name;
     let info = name;
     const remote = this.snapshot[target];
     if (remote && ("version" in remote || "remoteEntry" in remote)) {
       info += `:${remote.version || remote.remoteEntry}`;
+    } else if (version) {
+      info += `:${version}`;
     }
     if (!this.identifyMap.has(targetWithoutType)) {
       this.identifyMap.set(targetWithoutType, this.identify());

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/utils/types/common.js

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/lib/vendor/basic-proxy-core.js

@@ -0,0 +1,147 @@
+"use strict";
+var P = "__MF_DEVTOOLS_MODULE_INFO__", f = "__MF_DEVTOOLS__", G = "MF_ENV", h = "mf-chrome-devtools-inject-snapshot-plugin", L = "mf-chrome-devtools-override-remotes-plugin", l = () => globalThis, y = (e) => Object.prototype.toString.call(e) === "[object Object]", O = (e) => JSON.parse(JSON.stringify(e || {})), d = (e, t, o) => {
+  if (Object.prototype.hasOwnProperty.call(e, t)) {
+    e[t] = o;
+    return;
+  }
+  Object.defineProperty(e, t, { value: o, configurable: false, writable: true });
+}, g = (e = l()) => {
+  !e.__FEDERATION__ && e.__VMOK__ && d(e, "__FEDERATION__", e.__VMOK__), e.__FEDERATION__ || d(e, "__FEDERATION__", {}), e.__VMOK__ || d(e, "__VMOK__", e.__FEDERATION__);
+  let t = e.__FEDERATION__;
+  return Array.isArray(t.__GLOBAL_PLUGIN__) || (t.__GLOBAL_PLUGIN__ = []), y(t.moduleInfo) || (t.moduleInfo = {}), t;
+}, p = (e, t) => {
+  if (!e)
+    return t;
+  try {
+    return JSON.parse(e);
+  } catch (o) {
+    return t;
+  }
+}, x = (e = l()) => {
+  var t;
+  return e.localStorage || ((t = e.window) == null ? void 0 : t.localStorage);
+}, M = (e = l()) => {
+  let t = x(e);
+  return t ? p(t.getItem(P), null) : null;
+}, I = (e) => {
+  let t = {};
+  return y(e) && Object.keys(e).forEach((o) => {
+    typeof e[o] == "string" && e[o] && (t[o] = e[o]);
+  }), t;
+}, N = (e = l()) => {
+  let t = x(e);
+  if (!t)
+    return {};
+  let o = p(t.getItem(f), {});
+  return y(o.overrides) ? I(o.overrides) : I(o);
+}, S = (e) => e.indexOf("http://") === 0 || e.indexOf("https://") === 0 || e.indexOf("//") === 0, m = (e, t) => {
+  Reflect.deleteProperty(e, t);
+}, T = (e) => {
+  let t = {}, o = [];
+  return Object.keys(e || {}).forEach((s) => {
+    var r;
+    let i = (r = e[s]) == null ? void 0 : r.remotesInfo;
+    if (i) {
+      let n = Object.keys(i);
+      n.length && (n.forEach((c) => {
+        let a = c;
+        c.indexOf(":") !== -1 && (a = c.split(":").pop()), o.indexOf(a) === -1 && o.push(c);
+      }), t[s] = e[s]);
+    }
+  }), { consumers: t, producer: o };
+}, R = (e, t) => {
+  let o = Object.keys(t || {}).reduce((i, r) => (r.indexOf(":") !== -1 && (i[r.split(":")[1]] = t[r]), i), {}), s = O(e);
+  return Object.keys(e || {}).forEach((i) => {
+    let r = e[i];
+    r != null && r.remotesInfo && Object.keys(r.remotesInfo).forEach((n) => {
+      let c = n.split(":")[1], a = t[n] || o[n] || t[c] || o[c];
+      a && (s[i].remotesInfo[n].matchedVersion = a, s[`${n}:${a}`] = { remoteEntry: a, version: a });
+    });
+  }), s;
+}, v = (e, t) => {
+  let o = null, s = O(e);
+  if (Object.keys(e || {}).forEach((r) => {
+    let n = s[r];
+    n && Array.isArray(n.consumerList) && n.consumerList.length > 0 && (o = n);
+  }), !o)
+    return s;
+  let i = o.consumerList;
+  for (let r = 0; r < i.length; r++) {
+    let n = "", c = i[r];
+    if (Object.keys(t || {}).find((_) => {
+      let u = _;
+      return _.indexOf(":") !== -1 && (u = _.split(":")[1]), c.indexOf(u) !== -1 ? (n = _, true) : false;
+    })) {
+      let _ = t[n], u = c.split(":");
+      u[u.length - 1] = _, i[r] = u.join(":"), s[`${n}:${_}`] = { remoteEntry: _, version: _ };
+    }
+  }
+  return R(s, t);
+}, F = (e = [], t) => {
+  var n;
+  let o = t || ((n = l().__FEDERATION__) == null ? void 0 : n.moduleInfo) || {}, s = {}, { consumers: i } = T(o), r = Object.keys(i).some((c) => {
+    var _;
+    let a = (_ = i[c]) == null ? void 0 : _.consumerList;
+    return Array.isArray(a) && a.length > 0;
+  });
+  return e.forEach((c) => {
+    c != null && c.key && (c != null && c.value) && (s[c.key] = c.value);
+  }), { status: "success", moduleInfo: r ? v(o, s) : R(o, s), overrides: s };
+}, E = (e = l()) => {
+  let t = e, o = false;
+  return { name: h, beforeLoadRemoteSnapshot: (s) => {
+    var c;
+    let i = s == null ? void 0 : s.options;
+    if (i && i.inBrowser === false)
+      return;
+    let r = M(t);
+    if (!r || o)
+      return;
+    let n = g(t);
+    n.moduleInfo = Object.assign({}, n.moduleInfo || {}, r), o = true, (c = t.console) == null || c.warn("[Module Federation Devtools]: You are using the chrome devtool to proxy online module");
+  } };
+}, B = (e = l()) => {
+  let t = e;
+  return { name: L, beforeRegisterRemote: (o) => {
+    var s;
+    try {
+      let i = o == null ? void 0 : o.remote;
+      if (!i)
+        return o;
+      let r = N(t), n = r[i.name] || r[i.alias || ""];
+      if (!n)
+        return o;
+      S(n) ? (m(i, "version"), i.entry = n) : (m(i, "entry"), i.version = n);
+    } catch (i) {
+      (s = t.console) == null || s.error(i);
+    }
+    return o;
+  } };
+}, b = (e = l()) => {
+  let t = g(e);
+  return [B(e), E(e)].forEach((s) => {
+    var r, n;
+    ((r = t.__GLOBAL_PLUGIN__) == null ? void 0 : r.some((c) => c.name === s.name)) || (n = t.__GLOBAL_PLUGIN__) == null || n.push(s);
+  }), t.__GLOBAL_PLUGIN__ || [];
+}, A = (e, t) => {
+  var r, n;
+  let o = g(e), s = t(e);
+  return ((r = o.__GLOBAL_PLUGIN__) == null ? void 0 : r.some((c) => c.name === s.name)) || (n = o.__GLOBAL_PLUGIN__) == null || n.push(s), s;
+}, k = (e = l()) => A(e, B), D = (e = l()) => A(e, E), V = (e = l()) => {
+  let t = x(e);
+  if (!t)
+    return;
+  t.removeItem(P), t.removeItem(G);
+  let o = p(t.getItem(f), {});
+  y(o) && (m(o, "overrides"), Object.keys(o).length ? t.setItem(f, JSON.stringify(o)) : t.removeItem(f));
+};
+exports.calculateMicroAppSnapshot = v;
+exports.calculateSnapshot = R;
+exports.createOverridePlugin = B;
+exports.createSnapshotPlugin = E;
+exports.getModuleInfo = F;
+exports.registerOverridePlugin = k;
+exports.registerRuntimePlugins = b;
+exports.registerSnapshotPlugin = D;
+exports.resetProxyStorage = V;
+exports.separateType = T;

package/dist/lib/worker/index.js

@@ -1,4 +1,19 @@
-"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 __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -32,12 +47,12 @@ const resolveTabId = (tabId) => __async(exports, null, function* () {
   });
   return activeTab == null ? void 0 : activeTab.id;
 });
-const broadcastActiveTab = (tabId) => {
+const broadcastActiveTab = (tabId, payload) => {
   try {
-    chrome.runtime.sendMessage({
+    chrome.runtime.sendMessage(__spreadValues({
       type: import_messages.MESSAGE_ACTIVE_TAB_CHANGED,
       tabId
-    });
+    }, payload));
   } catch (error) {
     console.warn(
       "[Module Federation Devtools] Failed to broadcast active tab",
@@ -62,11 +77,11 @@ const openSidePanel = (tabId) => __async(exports, null, function* () {
   if (sidePanel.open) {
     yield sidePanel.open({ tabId: targetTabId });
   }
-  broadcastActiveTab(targetTabId);
+  broadcastActiveTab(targetTabId, { reason: "side-panel" });
   if (sidePanel.getOptions) {
     try {
       const options = yield sidePanel.getOptions({ tabId: targetTabId });
-      broadcastActiveTab(targetTabId);
+      broadcastActiveTab(targetTabId, { reason: "side-panel" });
       return options;
     } catch (error) {
       console.warn("[Module Federation Devtools] getOptions failed", error);
@@ -113,7 +128,7 @@ chrome.tabs.onActivated.addListener((activeInfo) => __async(exports, null, funct
     return;
   }
   try {
-    broadcastActiveTab(tabId);
+    broadcastActiveTab(tabId, { reason: "activated" });
   } catch (error) {
     console.warn(
       "[Module Federation Devtools] Failed to handle tab activation",
@@ -122,12 +137,15 @@ chrome.tabs.onActivated.addListener((activeInfo) => __async(exports, null, funct
   }
 }));
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-  if (changeInfo.status !== "complete") {
+  if (changeInfo.status !== "loading" && changeInfo.status !== "complete") {
     return;
   }
   if (tab == null ? void 0 : tab.active) {
     try {
-      broadcastActiveTab(tabId);
+      broadcastActiveTab(tabId, {
+        reason: "updated",
+        status: changeInfo.status
+      });
     } catch (error) {
       console.warn(
         "[Module Federation Devtools] Failed to handle tab update",

package/dist/types/App.css

@@ -0,0 +1,13 @@
+.loaded-status-tag {
+  color: var(--color-bg-1, white) !important;
+  background-color: var(--color-neutral-10, black) !important;
+}
+.reused-status-tag {
+  background-color: greenyellow !important;
+  color: black !important;
+}
+.common-tag {
+  color: var(--color-text-2, #71717a) !important;
+  background-color: var(--color-bg-1, #ffffff) !important;
+  border-color: var(--color-border-2, rgba(228, 228, 231, 0.5)) !important;
+}