点击注入按钮时如何获取React+Formik表单的当前状态值？

针对你开发浏览器扩展时遇到的表单值捕获问题，以下是几种可靠的实现方案，优先推荐直接从Formik实例获取结构化状态：

方法1：直接遍历React组件树提取Formik状态 #

Formik的核心状态（包括所有字段值）会挂载在组件实例上，我们可以通过DOM节点找到对应的React组件，再向上遍历树找到Formik实例：

function getFormikValues() {
    // 兼容React 17/18的实例属性名
    const reactInstanceKey = Object.keys(document.body).find(key => 
        key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$')
    );
    if (!reactInstanceKey) return null;

    // 定位表单根元素（可根据目标站点调整选择器）
    const formEl = document.querySelector('form') || document.querySelector('[data-formik]');
    if (!formEl) return null;

    let currentInstance = formEl[reactInstanceKey];
    while (currentInstance) {
        // 检查是否为Formik组件或持有Formik实例
        if (currentInstance.memoizedProps?.formik) {
            return currentInstance.memoizedProps.formik.values;
        }
        if (currentInstance.stateNode?.state?.values) {
            return currentInstance.stateNode.state.values;
        }
        currentInstance = currentInstance.return;
    }
    return null;
}

// 点击保存草稿时调用
const draftData = getFormikValues();
if (draftData) {
    chrome.storage.local.set({ [`draft_${Date.now()}`]: draftData });
}

优缺点：无需注入额外脚本，直接在content script中执行；但依赖React内部属性，需适配不同React版本，部分站点可能会混淆React内部属性名。

方法2：监听Formik自定义事件 #

Formik会触发formik:change、formik:submit等自定义事件，事件详情中包含完整的表单值：

// 实时捕获字段变化（可选，用于临时缓存）
document.addEventListener('formik:change', (e) => {
    const tempValues = e.detail.values;
    chrome.storage.local.set({ temp_draft: tempValues });
});

// 点击保存草稿时获取最终值
document.getElementById('your-save-btn').addEventListener('click', () => {
    // 优先从临时缓存取，或主动触发一次change事件确保值最新
    chrome.storage.local.get('temp_draft', (res) => {
        if (res.temp_draft) {
            chrome.storage.local.set({ [`draft_${Date.now()}`]: res.temp_draft });
        }
    });
});

优缺点：完全依赖Formik的事件机制，兼容性好；但需要用户与字段交互后才会触发formik:change，未交互的默认值可能无法捕获，需结合初始值获取逻辑。

方法3：利用React DevTools钩子遍历组件树 #

通过注入脚本到页面上下文，访问React DevTools的全局钩子来定位Formik组件：

// content script中注入页面脚本
const injectScript = document.createElement('script');
injectScript.textContent = `
window.getFormikValues = function() {
    const devHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
    if (!devHook) return null;

    const findFormikInTree = (fiber) => {
        // 通过组件displayName识别Formik
        if (fiber.type?.displayName === 'Formik') {
            return fiber.memoizedProps.formik.values;
        }
        // 递归遍历子组件
        if (fiber.child) {
            const result = findFormikInTree(fiber.child);
            if (result) return result;
        }
        // 遍历兄弟组件
        if (fiber.sibling) {
            const result = findFormikInTree(fiber.sibling);
            if (result) return result;
        }
        return null;
    };

    // 遍历所有React根节点
    for (const root of devHook.getRoots()) {
        const values = findFormikInTree(root);
        if (values) return values;
    }
    return null;
};
`;
document.body.appendChild(injectScript);
injectScript.remove();

// 在content script中调用页面脚本暴露的方法
const draftData = window.getFormikValues();
if (draftData) {
    chrome.storage.local.set({ [`draft_${Date.now()}`]: draftData });
}

优缺点：能稳定定位Formik组件，适配多数React版本；但需要注入脚本到页面上下文，部分站点可能屏蔽React DevTools钩子。

注意事项 #

1. 浏览器扩展的content script与页面上下文隔离，访问页面全局变量（如React实例）必须通过注入脚本实现。
2. 建议结合多种方案做降级处理：先尝试方法1，失败则用方法3，最后 fallback 到方法2。
3. 测试时需覆盖目标站点的所有字段类型（如复选框、下拉框、富文本），确保值捕获完整。

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