Manifest V3下Chrome扩展无法获取React Fiber键的解决方法求助

核心问题确实是内容脚本运行在隔离环境（isolated world），无法访问页面主环境中的DOM私有属性（比如React的__reactFiber$开头的键），必须把代码注入到页面的主执行环境才能解决。以下是具体实现步骤：

1. 配置Manifest V3清单文件 #

首先确保你的manifest.json包含必要的权限和内容脚本声明：

{
  "manifest_version": 3,
  "name": "React Marker操作工具",
  "version": "1.0",
  "permissions": ["scripting"],
  "host_permissions": ["https://目标网站域名/*"],
  "content_scripts": [
    {
      "matches": ["https://目标网站域名/*"],
      "js": ["content.js"]
    }
  ]
}

• 替换https://目标网站域名/*为你实际要操作的网站URL
• scripting权限用于后续注入脚本，host_permissions授权访问目标网站

2. 编写内容脚本注入主环境代码 #

内容脚本本身无法访问React私有属性，所以我们需要把你的placeMarker函数注入到页面的主执行环境里。有两种简单的实现方式：

方式一：动态创建script标签（新手友好） #

在content.js中添加以下代码，直接将脚本注入页面主环境：

// content.js
function injectMainWorldCode() {
  const script = document.createElement('script');
  script.textContent = `
    // 定义操作Marker的函数
    function placeMarker(a, b) {
      const element = document.getElementsByClassName("guess-map__canvas-container")[0];
      const keys = Object.keys(element);
      const reactKey = keys.find(key => key.startsWith("__reactFiber$"));
      // 注意：部分React版本可能用__reactInternalInstance$开头，需根据目标网站调整
      if (!reactKey) {
        console.error("未找到React Fiber属性");
        return;
      }
      const placeFunc = element[reactKey].return.memoizedProps.onMarkerLocationChanged;
      if (placeFunc) {
        placeFunc({a, b});
      } else {
        console.error("未找到onMarkerLocationChanged方法");
      }
    }

    // 监听来自内容脚本的消息，调用placeMarker
    window.addEventListener('message', (event) => {
      if (event.source !== window || event.data.type !== 'PLACE_MARKER') return;
      const { a, b } = event.data;
      placeMarker(a, b);
    });
  `;
  document.head.appendChild(script);
  script.remove(); // 注入后移除标签，清理DOM
}

// 页面加载完成后执行注入
if (document.readyState === 'complete') {
  injectMainWorldCode();
} else {
  window.addEventListener('load', injectMainWorldCode);
}

方式二：使用chrome.scripting.executeScript（Manifest V3推荐） #

如果你更倾向于用官方API注入，可修改content.js为：

// content.js
// 直接执行注入的函数，传入a和b的值
async function runPlaceMarker(a, b) {
  try {
    await chrome.scripting.executeScript({
      func: (x, y) => {
        const element = document.getElementsByClassName("guess-map__canvas-container")[0];
        const keys = Object.keys(element);
        const reactKey = keys.find(key => key.startsWith("__reactFiber$"));
        if (!reactKey) {
          console.error("未找到React Fiber属性");
          return;
        }
        const placeFunc = element[reactKey].return.memoizedProps.onMarkerLocationChanged;
        placeFunc && placeFunc({a: x, b: y});
      },
      args: [a, b] // 传入Marker的坐标参数
    });
  } catch (err) {
    console.error("注入脚本失败:", err);
  }
}

// 测试调用，比如传入坐标(100, 200)
runPlaceMarker(100, 200);

3. 注意事项 #

• React的私有属性（如__reactFiber$）会随版本变化，若代码失效，可打开浏览器控制台，选中目标DOM元素，查看其属性确认正确的键名（比如部分版本是__reactInternalInstance$）
• 注入的脚本运行在页面主环境，和网站自身的JS共享上下文，因此能访问所有DOM私有属性和全局变量
• 若需要从扩展的其他部分（如弹出页）调用placeMarker，可通过chrome.tabs.sendMessage先通知内容脚本，再由内容脚本通过window.postMessage或executeScript触发主环境的函数

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