@module-federation/devtools 2.9.0 → 2.9.1

package/README.md

@@ -9,3 +9,128 @@
   loading reports
 
 https://module-federation.io/
+
+## Extension builds
+
+From the repository root:
+
+```sh
+pnpm --filter @module-federation/devtools run build:devtool
+```
+
+One compilation produces two unpacked extensions:
+
+| Directory                               | Interface                                                                 |
+| --------------------------------------- | ------------------------------------------------------------------------- |
+| `packages/chrome-devtools/dist/chrome`  | Chrome side panel and DevTools panel                                      |
+| `packages/chrome-devtools/dist/browser` | 800 × 600 popup with fixed navigation/header and a scrolling content area |
+
+Load the appropriate directory, then reload the page being inspected. Both
+variants retain the same `document_start` MAIN-world scripts for proxying,
+React Fast Refresh and loading traces. The browser variant omits `sidePanel`,
+`side_panel`, and `devtools_page`. It still needs Manifest V3 content scripts,
+service workers, storage, tabs and scripting APIs from the host browser.
+
+`build:devtool:popup` is a compatibility alias that now builds both variants.
+`dist/.extension-build` is intermediate output, not an installable extension.
+The library `build` command cleans `dist`, so run `build:devtool` afterwards
+when you also need the unpacked extensions. Remove the old root-`dist` extension
+registration when migrating; do not enable two variants on the same page.
+
+## WebMCP
+
+Both extensions register page-scoped tools from a MAIN-world content script at
+`document_start`. Tools remain available with the extension UI closed. Registration
+uses native `document.modelContext` or the earlier `navigator.modelContext` API.
+`registerTool` is required; `unregisterTool` is optional. On hosts without
+unregistration, tools live until the document is destroyed; partial registration
+failures cannot be rolled back and require a page reload.
+The entry retries host API detection every 250 ms for up to 30 seconds. Inspect
+`window.__MF_DEVTOOLS_WEBMCP__` in the page console for `waiting`, `registering`,
+`registered`, `unavailable` or `error`, tool names, and registration errors.
+After installing/reloading the extension, refresh existing pages. If the host API
+arrives after the retry window, refresh the page once it is available.
+When neither API is available, the extension continues to work normally without
+WebMCP. No polyfill is installed: the browser/agent must support discovering and
+calling registered tools. A page exposing tools alone does not establish that
+an embedded browser exposes them to its agent.
+
+| Tool                         | Capability                                                                                             |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `mf_get_state`               | Module snapshots, shared scopes, registered plugins, saved proxy/HMR configuration and loading reports |
+| `mf_get_modules`             | All module snapshots or one exact `moduleId`                                                           |
+| `mf_get_dependencies`        | Dependency graph source data, consumers and remote IDs                                                 |
+| `mf_get_shared`              | Shared versions and loading state; factories are not executed                                          |
+| `mf_set_proxy`               | Replace rules, enable/disable individual rules and configure snapshot clipping                         |
+| `mf_clear_proxy`             | Clear proxy rules and cached proxy snapshots, preserving HMR/tracing                                   |
+| `mf_set_hmr`                 | Enable/disable development React replacement and Fast Refresh                                          |
+| `mf_configure_loading_trace` | Enable/disable tracing; level, event limit, console, browser output, scope, mode and start logging     |
+| `mf_get_loading_reports`     | Current reports across observability scopes                                                            |
+| `mf_export_snapshot`         | Serializable JSON export of the current diagnostic state                                               |
+
+These tools cover the implemented runtime features. Graph layout, filtering,
+module selection, theme and language remain presentation controls in the UI;
+an agent receives the underlying structured data. The Performance tab is still
+a placeholder and has no performance-analysis tool. Export tools return JSON
+rather than silently downloading a file.
+
+Example tool inputs:
+
+```json
+{
+  "rules": [
+    {
+      "key": "mf_playground",
+      "value": "https://localhost:3006/mf-manifest.json",
+      "checked": true
+    }
+  ],
+  "clip": false
+}
+```
+
+Pass that object to `mf_set_proxy`. Pass `{ "enabled": true }` to `mf_set_hmr`.
+`mf_set_proxy` replaces the complete rule set, so read `mf_get_state` before
+editing existing rules. An unchecked rule remains saved but is not applied.
+
+Configuration tools synchronously persist the inspected origin's localStorage
+and return `reloadRequired: true`. They do not reload inside the tool invocation,
+which could destroy its response before the agent receives it. The agent should
+finish configuration, reload through browser navigation, then call `mf_get_state`
+to verify. Saved configuration is distinct from the currently running runtime.
+Eager React shares may cause one additional automatic refresh while the existing
+Fast Refresh plugin records their version and share scopes.
+
+React 19 development replacement is pinned to the same pair used by Divebell:
+`umd-react@19.2.4/dist/react.development.js` and
+`umd-react@19.2.4/dist/react-dom.development.js` from unpkg. All `19.x` React,
+ReactDOM and `react-dom/client` registrations use version `19.2.4` while HMR is
+enabled. The client entry reuses ReactDOM's development bundle. Both async and
+eager loading initialize React before ReactDOM; React 19 eager shares can load
+synchronously without the first-discovery refresh. React 17/18 keep their existing
+official development UMD URLs. Disabling HMR preserves the application's providers.
+
+The UI reads the same page configuration; opening it does not replay a stale
+global HMR preference or trigger a reload. Open extension views receive a snapshot
+notification after a tool changes configuration. Settings are origin-scoped and
+persist across navigation; they are not isolated to one tab of the same origin.
+
+The tools expose only named diagnostic operations, not arbitrary script execution,
+arbitrary storage access or extension APIs. Page CSP, CORS and certificate checks
+still apply. In particular, HTTPS sites whose CSP excludes local HTTP resources
+need a permitted remote endpoint; WebMCP does not bypass that policy.
+
+## Validation
+
+```sh
+pnpm --filter @module-federation/devtools run test
+pnpm --filter @module-federation/devtools run build
+pnpm --filter @module-federation/devtools run build:devtool
+PLAYWRIGHT_BROWSERS_PATH=0 pnpm --filter @module-federation/devtools exec playwright install chromium
+PLAYWRIGHT_BROWSERS_PATH=0 pnpm --filter @module-federation/devtools exec playwright test e2e/webmcp.spec.ts --workers=1
+```
+
+The WebMCP E2E fixture loads both real unpacked extensions in Chromium, with a
+host-API test double. It verifies early injection, persisted configuration across
+reloads, tool execution, and popup layout. It does not claim to validate native
+WebMCP discovery in Codex or another embedded browser.

package/dist/es/App.js

@@ -250,6 +250,8 @@ const InnerApp = (props) => {
     const bootstrap = () => __async(void 0, null, function* () {
       const tab = yield syncActiveTab();
       setInspectedTab(tab || void 0);
+      if (typeof (tab == null ? void 0 : tab.id) !== "number")
+        return;
       const detach = yield getGlobalModuleInfo(
         (info) => applyModuleUpdate(info)
       );
@@ -361,6 +363,9 @@ const InnerApp = (props) => {
   }, [activePanel, applyModuleUpdate]);
   const renderContent = () => {
     var _a;
+    if (typeof (inspectedTab == null ? void 0 : inspectedTab.id) !== "number") {
+      return /* @__PURE__ */ jsx(Empty, { description: t("app.header.scope.waiting") });
+    }
     switch (activePanel) {
       case "moduleInfo":
         return /* @__PURE__ */ jsx(
@@ -401,7 +406,7 @@ const InnerApp = (props) => {
           SharedDepsExplorer,
           {
             shareData: JSON.parse(
-              JSON.stringify((_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__)
+              JSON.stringify(((_a = window.__FEDERATION__) == null ? void 0 : _a.__SHARE__) || {})
             )
           }
         );

package/dist/es/App.module.js

@@ -1,5 +1,5 @@
 import "./App_module.css";
-var App_module_default = { "shell": "shell_ae2ee", "sidebar": "sidebar_ae2ee", "tabItem": "tabItem_ae2ee", "activeTab": "activeTab_ae2ee", "panel": "panel_ae2ee", "header": "header_ae2ee", "headerTop": "headerTop_ae2ee", "branding": "branding_ae2ee", "logo": "logo_ae2ee", "subtitle": "subtitle_ae2ee", "meta": "meta_ae2ee", "scope": "scope_ae2ee", "scopeLabel": "scopeLabel_ae2ee", "stats": "stats_ae2ee", "statBlock": "statBlock_ae2ee", "statValue": "statValue_ae2ee", "statLabel": "statLabel_ae2ee", "body": "body_ae2ee", "content": "content_ae2ee", "emptyState": "emptyState_ae2ee", "empty": "empty_ae2ee", "placeholder": "placeholder_ae2ee", "overrideArco": "overrideArco_ae2ee" };
+var App_module_default = { "shell": "shell_ae2ee", "sidebar": "sidebar_ae2ee", "tabItem": "tabItem_ae2ee", "activeTab": "activeTab_ae2ee", "panel": "panel_ae2ee", "header": "header_ae2ee", "headerTop": "headerTop_ae2ee", "branding": "branding_ae2ee", "logo": "logo_ae2ee", "subtitle": "subtitle_ae2ee", "meta": "meta_ae2ee", "scope": "scope_ae2ee", "scopeLabel": "scopeLabel_ae2ee", "stats": "stats_ae2ee", "statBlock": "statBlock_ae2ee", "statValue": "statValue_ae2ee", "statLabel": "statLabel_ae2ee", "body": "body_ae2ee", "content": "content_ae2ee", "emptyState": "emptyState_ae2ee", "empty": "empty_ae2ee", "placeholder": "placeholder_ae2ee", "overrideArco": "overrideArco_ae2ee", "headerActions": "headerActions_ae2ee" };
 export {
   App_module_default as default
 };

package/dist/es/App_module.css

@@ -304,4 +304,110 @@ body[arco-theme=dark] {
 
 .shell_ae2ee.arco-theme-dark {
   background: radial-gradient(circle at 10% 20%, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.98) 55%), linear-gradient(135deg, var(--color-bg-1, #020617) 0%, var(--color-bg-2, #020617) 100%);
+}
+
+html[data-devtools-view="popup"] {
+  overflow: hidden;
+}
+html[data-devtools-view="popup"] body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+}
+html[data-devtools-view="popup"] .shell_ae2ee {
+  height: 100vh;
+  min-height: 0;
+  padding: 10px;
+  gap: 8px;
+  flex-direction: column;
+  background: var(--color-bg-1, #fff);
+}
+html[data-devtools-view="popup"] .sidebar_ae2ee {
+  flex: 0 0 auto;
+  width: 100%;
+  min-width: 0;
+  padding: 4px;
+  gap: 2px;
+  border-radius: 8px;
+  box-shadow: none;
+}
+html[data-devtools-view="popup"] .tabItem_ae2ee {
+  padding: 7px 9px;
+  font-size: 12px;
+  border-radius: 5px;
+  letter-spacing: 0;
+  text-transform: none;
+}
+html[data-devtools-view="popup"] .tabItem_ae2ee:focus-visible {
+  outline: 2px solid var(--color-primary-6, #165dff);
+  outline-offset: -2px;
+}
+html[data-devtools-view="popup"] .panel_ae2ee {
+  flex: 1 1;
+  min-height: 0;
+  padding: 12px;
+  gap: 10px;
+  border-radius: 8px;
+  box-shadow: none;
+  overflow: hidden;
+}
+html[data-devtools-view="popup"] .header_ae2ee {
+  flex: 0 0 auto;
+  gap: 6px;
+}
+html[data-devtools-view="popup"] .logo_ae2ee {
+  font-size: 16px;
+}
+html[data-devtools-view="popup"] .subtitle_ae2ee,
+html[data-devtools-view="popup"] .scopeLabel_ae2ee {
+  display: none;
+}
+html[data-devtools-view="popup"] .headerActions_ae2ee {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+html[data-devtools-view="popup"] .meta_ae2ee {
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+html[data-devtools-view="popup"] .scope_ae2ee {
+  min-width: 0;
+  flex: 1 1;
+  overflow: hidden;
+}
+html[data-devtools-view="popup"] .scope_ae2ee .arco-tag {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+html[data-devtools-view="popup"] .stats_ae2ee {
+  flex: 0 0 auto;
+  gap: 12px;
+  width: auto;
+}
+html[data-devtools-view="popup"] .statBlock_ae2ee {
+  padding: 0;
+  min-width: 0;
+  flex-direction: row;
+  align-items: baseline;
+  gap: 4px;
+  border: 0;
+  background: none;
+  box-shadow: none;
+}
+html[data-devtools-view="popup"] .statValue_ae2ee {
+  font-size: 14px;
+}
+html[data-devtools-view="popup"] .statLabel_ae2ee {
+  font-size: 10px;
+  text-transform: none;
+}
+html[data-devtools-view="popup"] .body_ae2ee {
+  flex: 1 1;
+}
+html[data-devtools-view="popup"] .content_ae2ee {
+  flex: 1 1;
+  overscroll-behavior: contain;
 }

package/dist/es/component/Form/index_module.css

@@ -195,4 +195,44 @@
   align-items: center;
   justify-content: center;
   display: flex;
+}
+
+html[data-devtools-view="popup"] .wrapper_20b79,
+html[data-devtools-view="popup"] .rules_20b79 {
+  gap: 10px;
+}
+html[data-devtools-view="popup"] .sectionHeader_20b79 {
+  padding: 8px;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+html[data-devtools-view="popup"] .titleRow_20b79 {
+  font-size: 13px;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+html[data-devtools-view="popup"] .subtitle_20b79 {
+  display: none;
+}
+html[data-devtools-view="popup"] .ruleCard_20b79 {
+  padding: 10px;
+  gap: 6px;
+  border-radius: 6px;
+  box-shadow: none;
+}
+html[data-devtools-view="popup"] .inputs_20b79 {
+  gap: 8px;
+}
+html[data-devtools-view="popup"] .field_20b79 {
+  min-width: 0;
+  margin-bottom: 0;
+}
+html[data-devtools-view="popup"] .field_20b79 .arco-select-view {
+  min-height: 32px;
+  border-radius: 5px;
+  padding: 2px 8px;
+}
+html[data-devtools-view="popup"] .emptyWrapper_20b79 {
+  padding: 16px;
+  border-radius: 6px;
 }

package/dist/es/component/Layout/index.js

@@ -207,7 +207,8 @@ const Layout = (props) => {
           if (hadPreviousEffective) {
             yield removeStorage(MODULE_DEVTOOL_IDENTIFIER);
             yield removeStorage(BROWSER_ENV_KEY);
-            yield removeStorageKey(__FEDERATION_DEVTOOLS__, "overrides");
+            yield mergeStorage(__FEDERATION_DEVTOOLS__, "overrides", {});
+            yield mergeStorage(__FEDERATION_DEVTOOLS__, "proxyRules", rawRules);
             yield injectScript(reloadPage, false);
             setCondition(statusInfo.noProxy);
             lastEffectiveRulesRef.current = "";
@@ -253,6 +254,8 @@ const Layout = (props) => {
         yield setStorage(MODULE_DEVTOOL_IDENTIFIER, snapshotJson);
         yield setStorage(BROWSER_ENV_KEY);
         yield mergeStorage(__FEDERATION_DEVTOOLS__, "overrides", overrides);
+        yield mergeStorage(__FEDERATION_DEVTOOLS__, "proxyRules", rawRules);
+        yield mergeStorage(__FEDERATION_DEVTOOLS__, ENABLE_CLIP, enableClip);
         yield injectScript(reloadPage, false);
         window.__FEDERATION__.moduleInfo = moduleInfo2;
         onModuleInfoChange == null ? void 0 : onModuleInfoChange(moduleInfo2);
@@ -295,6 +298,10 @@ const Layout = (props) => {
         if (typeof overridesState === "string" && overridesState) {
           const parsedState = JSON.parse(overridesState);
           const overrides = parsedState == null ? void 0 : parsedState.overrides;
+          setEnableClip(Boolean(parsedState == null ? void 0 : parsedState[ENABLE_CLIP]));
+          setEnalbeHMR(
+            (parsedState == null ? void 0 : parsedState[__ENABLE_FAST_REFRESH__]) ? "enable" : "disable"
+          );
           if (isObject(overrides)) {
             const overrideRules = Object.entries(overrides).map(([key, value]) => ({
               key,
@@ -304,12 +311,10 @@ const Layout = (props) => {
               (rule) => Boolean(rule.key) && Boolean(rule.value)
             );
             const filteredRules = producer.length ? overrideRules.filter((rule) => producer.includes(rule.key)) : overrideRules;
-            if (filteredRules.length) {
-              storeData = __spreadProps(__spreadValues({}, storeData), {
-                [proxyFormField]: filteredRules
-              });
-              overridesApplied = true;
-            }
+            storeData = __spreadProps(__spreadValues({}, storeData), {
+              [proxyFormField]: Array.isArray(parsedState.proxyRules) ? parsedState.proxyRules : filteredRules
+            });
+            overridesApplied = true;
           }
         }
       } catch (error) {
@@ -347,15 +352,25 @@ const Layout = (props) => {
     return () => {
       cancelled = true;
     };
-  }, [moduleInfo, producerKey, form]);
+  }, [moduleInfo, producerKey, form, tabId]);
   useEffect(() => {
-    chrome.storage.sync.get([ENABLEHMR]).then((data) => {
-      const enable = data[ENABLEHMR];
-      if (typeof enable === "boolean") {
-        onHMRChange(enable);
+    let cancelled = false;
+    getStorageValue(__FEDERATION_DEVTOOLS__).then((raw) => {
+      try {
+        const config = typeof raw === "string" ? JSON.parse(raw) : {};
+        if (!cancelled) {
+          setEnalbeHMR(
+            (config == null ? void 0 : config[__ENABLE_FAST_REFRESH__]) ? "enable" : "disable"
+          );
+          setEnableClip(Boolean(config == null ? void 0 : config[ENABLE_CLIP]));
+        }
+      } catch (e) {
       }
     });
-  }, []);
+    return () => {
+      cancelled = true;
+    };
+  }, [tabId]);
   useEffect(() => {
     validateForm(form);
   }, []);
@@ -396,20 +411,22 @@ const Layout = (props) => {
     setChromeStorage(formData);
     run(formData);
   };
-  const onHMRChange = (on) => {
+  const onHMRChange = (on) => __async(void 0, null, function* () {
     setEnalbeHMR(on ? "enable" : "disable");
-    chrome.storage.sync.set({
+    yield chrome.storage.sync.set({
       [ENABLEHMR]: on
     });
     if (on) {
-      mergeStorage(__FEDERATION_DEVTOOLS__, __ENABLE_FAST_REFRESH__, on);
+      yield mergeStorage(__FEDERATION_DEVTOOLS__, __ENABLE_FAST_REFRESH__, on);
     } else {
-      removeStorageKey(__FEDERATION_DEVTOOLS__, __ENABLE_FAST_REFRESH__);
-      removeStorageKey(__FEDERATION_DEVTOOLS__, __EAGER_SHARE__);
+      yield removeStorageKey(__FEDERATION_DEVTOOLS__, __ENABLE_FAST_REFRESH__);
+      yield removeStorageKey(__FEDERATION_DEVTOOLS__, __EAGER_SHARE__);
     }
     injectScript(reloadPage, false);
-  };
-  const onClipChange = (on) => {
+  });
+  const onClipChange = (on) => __async(void 0, null, function* () {
+    yield mergeStorage(__FEDERATION_DEVTOOLS__, ENABLE_CLIP, on);
+    lastFormSignatureRef.current = "";
     setEnableClip(on);
     try {
       if (tabId) {
@@ -419,7 +436,7 @@ const Layout = (props) => {
       console.error(e);
     }
     run(form.getFieldsValue());
-  };
+  });
   const remotePreview = producer.map((id) => {
     const [, name] = id.split(":");
     return name || id;

package/dist/es/component/Layout/index_module.css

@@ -65,4 +65,34 @@
   padding: 22px 24px;
   border: 1px solid rgba(228, 228, 231, 0.5);
   background: var(--color-bg-1, rgba(255, 255, 255, 0.9));
+}
+
+html[data-devtools-view="popup"] .wrapper_084ab {
+  gap: 10px;
+}
+html[data-devtools-view="popup"] .summaryCard_084ab {
+  padding: 10px;
+  min-height: 0;
+  gap: 6px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+html[data-devtools-view="popup"] .summaryHeader_084ab {
+  flex: 1 1 100%;
+}
+html[data-devtools-view="popup"] .summaryTitle_084ab {
+  font-size: 13px;
+}
+html[data-devtools-view="popup"] .summaryHint_084ab {
+  display: none;
+}
+html[data-devtools-view="popup"] .chip_084ab,
+html[data-devtools-view="popup"] .moreChip_084ab,
+html[data-devtools-view="popup"] .chipPlaceholder_084ab {
+  padding: 3px 7px;
+  border-radius: 4px;
+}
+html[data-devtools-view="popup"] .formSection_084ab {
+  padding: 10px;
 }

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

@@ -22,7 +22,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { getUnpkgUrl } from "../index";
+import { getUnpkgUrl, REACT_19_DEV_VERSION } from "../index";
 import { definePropertyGlobalVal } from "../sdk";
 import {
   __FEDERATION_DEVTOOLS__,
@@ -210,6 +210,25 @@ var require_fast_refresh = __commonJS({
       return null;
     };
     const devtoolsMessage = getDevtoolsMessage();
+    if ((devtoolsMessage == null ? void 0 : devtoolsMessage[__ENABLE_FAST_REFRESH__]) && !window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+      let nextId = 0;
+      const renderers = /* @__PURE__ */ new Map();
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+        supportsFiber: true,
+        renderers,
+        inject(renderer) {
+          const id = nextId++;
+          renderers.set(id, renderer);
+          return id;
+        },
+        onScheduleFiberRoot() {
+        },
+        onCommitFiberRoot() {
+        },
+        onCommitFiberUnmount() {
+        }
+      };
+    }
     const eagerShareInfo = getEagerShareInfo(devtoolsMessage == null ? void 0 : devtoolsMessage[__EAGER_SHARE__]);
     if ((devtoolsMessage == null ? void 0 : devtoolsMessage[__ENABLE_FAST_REFRESH__]) && eagerShareInfo) {
       const { version, scopes } = eagerShareInfo;
@@ -221,6 +240,43 @@ var require_fast_refresh = __commonJS({
       );
     }
     const fastRefreshPlugin = () => {
+      const react19Pending = /* @__PURE__ */ new Map();
+      const loadReact19 = (pkg, scopes, sync = false) => {
+        const existing = getScopeGlobal(pkg, scopes);
+        if ((existing == null ? void 0 : existing.version) === REACT_19_DEV_VERSION) {
+          return setScopeGlobals(pkg, scopes, existing);
+        }
+        const save = (library) => {
+          const cached = getScopeGlobal(pkg, scopes);
+          if ((cached == null ? void 0 : cached.version) === REACT_19_DEV_VERSION)
+            return setScopeGlobals(pkg, scopes, cached);
+          if ((library == null ? void 0 : library.version) !== REACT_19_DEV_VERSION)
+            throw new Error(`Expected development ${pkg}@${REACT_19_DEV_VERSION}.`);
+          if (pkg === "react" && (typeof library.createElement !== "function" || !Object.isFrozen(library.createElement("div"))))
+            throw new Error("React provider is not a development build.");
+          return setScopeGlobals(pkg, scopes, library);
+        };
+        if (sync) {
+          if (pkg === "react-dom")
+            loadReact19("react", scopes, true);
+          return save(loadUmdModuleSync(pkg, REACT_19_DEV_VERSION, scopes));
+        }
+        const key = `${pkg}:${JSON.stringify([...scopes].sort())}`;
+        let pending = react19Pending.get(key);
+        if (!pending) {
+          pending = (() => __async(exports, null, function* () {
+            if (pkg === "react-dom")
+              yield loadReact19("react", scopes);
+            const cached = getScopeGlobal(pkg, scopes);
+            if ((cached == null ? void 0 : cached.version) === REACT_19_DEV_VERSION)
+              return setScopeGlobals(pkg, scopes, cached);
+            return save(yield loadUmdModule(pkg, REACT_19_DEV_VERSION, scopes));
+          }))();
+          react19Pending.set(key, pending);
+          void pending.catch(() => react19Pending.delete(key));
+        }
+        return pending;
+      };
       let orderResolve;
       const orderPromise = new Promise((resolve) => {
         orderResolve = resolve;
@@ -228,12 +284,13 @@ var require_fast_refresh = __commonJS({
       return {
         name: "mf-fast-refresh-plugin",
         beforeRegisterShare(args) {
-          var _a2;
+          var _a2, _b;
           const { pkgName, shared } = args;
-          if (!SUPPORT_PKGS.includes(pkgName)) {
+          const isReact19 = /^19\./.test(shared.version);
+          if (!SUPPORT_PKGS.includes(pkgName) && !(isReact19 && pkgName === "react-dom/client")) {
             return args;
           }
-          const supportPkgName = pkgName;
+          const supportPkgName = pkgName === "react-dom/client" ? "react-dom" : pkgName;
           const shareScopes = getShareScopes(shared.scope);
           let enableFastRefresh = false;
           let devtoolsMessage2 = {};
@@ -249,7 +306,29 @@ var require_fast_refresh = __commonJS({
           if (!enableFastRefresh) {
             return args;
           }
-          if (((_a2 = shared.shareConfig) == null ? void 0 : _a2.eager) || shared.lib) {
+          if (isReact19) {
+            shared.version = REACT_19_DEV_VERSION;
+            shared.get = () => __async(this, null, function* () {
+              const library = yield loadReact19(supportPkgName, shareScopes);
+              return () => library;
+            });
+            if (((_a2 = shared.shareConfig) == null ? void 0 : _a2.eager) || shared.lib) {
+              const library = loadReact19(supportPkgName, shareScopes, true);
+              shared.lib = () => library;
+              updateEagerShareInfo(
+                devtoolsMessage2,
+                pkgName,
+                REACT_19_DEV_VERSION,
+                shareScopes
+              );
+              localStorage.setItem(
+                __FEDERATION_DEVTOOLS__,
+                JSON.stringify(devtoolsMessage2)
+              );
+            }
+            return args;
+          }
+          if (((_b = shared.shareConfig) == null ? void 0 : _b.eager) || shared.lib) {
             if (!(devtoolsMessage2 == null ? void 0 : devtoolsMessage2[__EAGER_SHARE__])) {
               const eagerShareInfo2 = updateEagerShareInfo(
                 devtoolsMessage2,

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

@@ -153,7 +153,10 @@ const getGlobalModuleInfo = (callback) => __async(void 0, null, function* () {
     callback(normalizeModuleInfoPayload((_b = window.__FEDERATION__) == null ? void 0 : _b.moduleInfo));
   }
   yield sleep(300);
-  const listener = (message) => {
+  const listener = (message, sender) => {
+    var _a2;
+    if (((_a2 = sender == null ? void 0 : sender.tab) == null ? void 0 : _a2.id) !== void 0 && sender.tab.id !== getCurrentTabId())
+      return;
     const { data } = message;
     if (!isModuleInfoSyncMessage(data) || (data == null ? void 0 : data.appInfos)) {
       return;

package/dist/es/utils/chrome/observability.js

@@ -204,5 +204,6 @@ export {
   mergeObservabilityReports,
   readObservabilityConfig,
   readObservabilitySnapshot,
+  readSnapshotFromPage,
   reloadInspectedPage
 };

package/dist/es/utils/chrome/webmcp-entry.js

@@ -0,0 +1,2 @@
+import { startDevtoolsWebMCP } from "./webmcp";
+startDevtoolsWebMCP();