Access React component variable from Devtools in production build

Question

Given third party site that I'd like to extend its functionality through Chrome Extension,

How can I access React Component variable from outside the app, through DevTools code snippets maybe ?

I'd like to access _._replayUIController property.

I couldn't see anything obvious when I iterated through __reactFiber$ using this window.FindReact17 script.

  window.FindReact17 = function(dom) {
      let key = Object.keys(dom).find(key => key.startsWith("__reactFiber$"));
      let internalInstance = dom[key];
      if (internalInstance == null) return "internalInstance is null: " + key;
  
      return internalInstance;    
  } 



    class _ extends a.PureComponent {
        constructor(e, t) {
            super(e, t), this._replayUIController = null, this._handleClick = () => {
                const e = !(0, v.lastMouseOrTouchEventInfo)().isTouch;
                if ((0, b.trackButtonClick)("top toolbar", "bar replay"), !this._replayUIController) return (0, r.trackEvent)("Replay", "Open replay"), (0, C.trackReplaySnowplowEvent)("open_replay"), void this._loadUIController(e);
                this._replayUIController.isReplayModeEnabled().value() ? (this._replayUIController.requestCloseReplay(), (0, r.trackEvent)("Replay", "Close replay from header button"), (0, C.trackReplaySnowplowEvent)("close_replay_from_header_button")) : (alert(2345),this._replayUIController.enableReplayMode(e), (0, r.trackEvent)("Replay", "Open replay"), (0, C.trackReplaySnowplowEvent)("open_replay"))
            },
                this._onLayoutChange = () => {
                    this.setState({replayModeSelectionAvailable: this._isReplayModeSelectAvailable()})
                }, (0, m.validateRegistry)(t, {
                chartApiInstance: o.any.isRequired,
                chartWidgetCollection: o.any.isRequired
            }), this.state = {
                isActive: !1,
                replayMode: S.replayModeProperty.value(),
                replayModeSelectionAvailable: this._isReplayModeSelectAvailable()
            }
        }

        componentDidMount() {
            S.replayModeProperty.subscribe(this, (() => {
                this.setState({replayMode: S.replayModeProperty.value()})
            })), this.context.chartWidgetCollection.layout.subscribe(this._onLayoutChange)
        }

        componentWillUnmount() {
            null !== this._replayUIController && (this._replayUIController.onPropertiesChanged().unsubscribeAll(this), this._replayUIController.destroy(), this._replayUIController = null), S.replayModeProperty.unsubscribeAll(this), this.context.chartWidgetCollection.layout.unsubscribe(this._onLayoutChange)
        }

        render() {
            const {isActive: e} = this.state, t = a.createElement(d.ToolbarCollapsibleButton, {
                ...this.props,
                icon: f,
                text: n.t(null, void 0, i(254670)),
                isActive: e,
                onClick: this._handleClick,
                tooltip: n.t(null, void 0, i(976837)),
                "aria-pressed": p.PLATFORM_ACCESSIBILITY_ENABLED ? e : void 0
            });
            return this.state.replayModeSelectionAvailable ? a.createElement(g.ToolWidgetRowWrap, null, t, a.createElement(u.ToolbarMenuButton, {
                arrow: !0,
                tooltip: n.t(null, void 0, i(410153))
            }, a.createElement(s.PopupMenuItem, {
                label: "Current Chart",
                isActive: "ActiveChart" === this.state.replayMode,
                onClick: () => S.replayModeProperty.setValue("ActiveChart")
            }), a.createElement(s.PopupMenuItem, {
                label: "All Charts",
                isActive: "AllCharts" === this.state.replayMode,
                onClick: () => S.replayModeProperty.setValue("AllCharts")
            }))) : t
        }

        _loadUIController(e) {
            console.log('_loadUIController', this);


            const {chartWidgetCollection: t, chartApiInstance: n} = this.context, a = ({ReplayUIController: i}) => {
                null === this._replayUIController && (alert(567),this._replayUIController = new i(t, n), window.donReplayUIController = this._replayUIController, this._replayUIController.enableReplayMode(e), this._replayUIController.onPropertiesChanged().subscribe(this, this._updateButtonState), this._updateButtonState())
            };
            (0, l.isFeatureEnabled)("multichart_replay") ? Promise.all([i.e(42211), i.e(22666), i.e(5993), i.e(62253), i.e(92191), i.e(34465), i.e(9817), i.e(69121), i.e(53842), i.e(4015), i.e(66639), i.e(92108), i.e(88194), i.e(87845), i.e(93502), i.e(35649), i.e(36884), i.e(30006), i.e(542), i.e(58056), i.e(26855), i.e(67080), i.e(60123), i.e(47047), i.e(88096), i.e(80254), i.e(12339), i.e(73419), i.e(962), i.e(93318), i.e(73534), i.e(48305), i.e(57511), i.e(21551), i.e(6932)]).then(i.bind(i, 498836)).then(a) : Promise.all([i.e(42211), i.e(22666), i.e(5993), i.e(92191), i.e(34465), i.e(69121), i.e(53842), i.e(4015), i.e(88194), i.e(87845), i.e(35649), i.e(30006), i.e(542), i.e(58056), i.e(67080), i.e(60123), i.e(47047), i.e(88096), i.e(12339), i.e(58141), i.e(962), i.e(59255), i.e(52404), i.e(58431), i.e(73534), i.e(48305), i.e(57511), i.e(21551), i.e(25815)]).then(i.bind(i, 119061)).then(a)
        }

        _updateButtonState() {
            const e = this._replayUIController && this._replayUIController.isReplayModeEnabled().value();
            this.setState({isActive: Boolean(e)})
        }

        _isReplayModeSelectAvailable() {
            return (0, h.isMultipleLayout)(this.context.chartWidgetCollection.layout.value()) && w
        }
    }

Using React Devtools, I can see the props and the states, however, there is no linkage to any javascript class instance property