Chrome扩展内容脚本如何访问HTML元素的React内部属性？

问题场景 #

我开发Chrome扩展时，在页面开发者控制台中调用以下函数能正常获取React实例：

function getReactInstance(element: HTMLElement | undefined): Record<string, any> | undefined {
    if (element === undefined) {
       return;
    }

    for (const key in element) {
        if (key.startsWith('__reactInternalInstance$')) {
            return (element as any)[key] as any;
        }
    }
}

但在扩展的内容脚本里执行同一函数，返回的却是undefined。调试发现：内容脚本中调用Object.getOwnPropertyNames(element)返回空数组，而页面控制台能拿到['__reactInternalInstance$n8lnk6b117', '__reactEventHandlers$n8lnk6b117']这类React内部属性。

问题根源 #

Chrome扩展的内容脚本与页面主上下文是沙箱隔离的：内容脚本运行在独立环境中，无法直接访问页面上下文里添加到DOM元素的私有属性（比如React注入的__reactInternalInstance$xxx系列属性）。这些属性属于页面主环境，只有在该环境下运行的脚本才能读取。

解决方案：注入页面脚本跨上下文通信 #

要访问这些属性，必须把代码注入到页面主上下文执行，再通过自定义事件将结果传递回内容脚本。具体实现步骤如下：

1. 编写页面上下文执行的脚本 #

这段代码会在页面环境中运行，负责获取React实例并响应内容脚本的请求：

function getReactInstanceInPage(element) {
    if (!element) return;
    for (const key in element) {
        if (key.startsWith('__reactInternalInstance$')) {
            return element[key];
        }
    }
}

// 监听内容脚本的请求事件
window.addEventListener('get-react-instance', (event) => {
    const instance = getReactInstanceInPage(event.detail.element);
    // 发送结果回内容脚本
    window.dispatchEvent(new CustomEvent('react-instance-result', { detail: instance }));
});

2. 内容脚本中注入并封装调用逻辑 #

内容脚本负责将上述代码注入页面，同时封装请求和接收结果的逻辑：

// 注入脚本到页面主上下文的工具函数
function injectPageScript(code) {
    const script = document.createElement('script');
    script.textContent = code;
    document.documentElement.appendChild(script);
    script.remove(); // 注入后移除脚本标签，避免污染DOM
}

// 注入获取React实例的代码
const pageScriptCode = `
function getReactInstanceInPage(element) {
    if (!element) return;
    for (const key in element) {
        if (key.startsWith('__reactInternalInstance$')) {
            return element[key];
        }
    }
}

window.addEventListener('get-react-instance', (event) => {
    const instance = getReactInstanceInPage(event.detail.element);
    window.dispatchEvent(new CustomEvent('react-instance-result', { detail: instance }));
});
`;
injectPageScript(pageScriptCode);

// 封装Promise化的获取方法，供内容脚本调用
function getReactInstance(element: HTMLElement | undefined): Promise<Record<string, any> | undefined> {
    return new Promise((resolve) => {
        if (!element) {
            resolve(undefined);
            return;
        }

        // 监听结果返回事件
        const resultHandler = (event: CustomEvent) => {
            window.removeEventListener('react-instance-result', resultHandler);
            resolve(event.detail);
        };
        window.addEventListener('react-instance-result', resultHandler);

        // 向页面脚本发送请求
        window.dispatchEvent(new CustomEvent('get-react-instance', { detail: { element } }));
    });
}

// 使用示例
// const targetElement = document.querySelector('#target');
// getReactInstance(targetElement).then(instance => {
//     console.log('获取到的React实例:', instance);
// });

3. 注意事项 #

• DOM元素可以直接跨上下文传递，Chrome会自动处理不同环境间的DOM引用映射。
• React内部属性的命名规则会随版本变化，这种方法依赖React的实现细节，后续版本可能失效。如果追求稳定性，优先考虑页面提供的公开接口或React官方调试工具API。

内容的提问来源于stack exchange，提问作者Siro