如何存储Object.keys？Chrome扩展获取React内部键值返回undefined问题

这问题我之前做Instagram相关扩展时也踩过坑，核心原因是Chrome扩展的隔离执行环境和浏览器控制台不一样，导致你拿不到那些React内部的私有键。下面给你拆解原因和可行的解决思路：

为什么控制台能拿到，扩展里不行？ #

Chrome扩展的内容脚本运行在**隔离世界（Isolated World）**里，和页面本身的JavaScript环境是完全隔离的。页面中React生成的那些带随机后缀的私有属性（比如__reactEventHandlers$2xpvrubm5hi），属于页面主环境的私有变量，内容脚本是无法直接访问的。而浏览器控制台是直接在页面的主环境中执行代码，所以能轻松拿到这些内部属性。

解决思路 #

1. 注入脚本到页面主环境执行 #

既然内容脚本碰不到主环境的属性，那我们可以把代码直接注入到页面的主环境里运行，拿到结果后再传递回内容脚本。具体做法是创建一个<script>标签，把你的逻辑写进去，插入到页面DOM中：

// 在你的扩展内容脚本里写这段代码
function getReactKeyFromPage() {
  // 创建脚本标签
  const injectScript = document.createElement('script');
  injectScript.textContent = `
    // 这段代码会在页面主环境执行
    const clientRoot = document.getElementsByClassName('client-root')[0];
    if (clientRoot?.ownerDocument?.links?.length > 0) {
      const generatedKey = Object.keys(clientRoot.ownerDocument.links[0])[1];
      // 通过postMessage把结果传给内容脚本
      window.postMessage({ type: 'REACT_KEY', value: generatedKey }, '*');
    }
  `;
  // 插入到页面头部执行
  document.head.appendChild(injectScript);
  // 执行完移除脚本，避免污染DOM
  injectScript.remove();
}

// 监听页面发送回来的消息
window.addEventListener('message', (event) => {
  if (event.source === window && event.data.type === 'REACT_KEY') {
    console.log('获取到的React键:', event.data.value);
    // 这里可以继续处理你的后续逻辑
  }
});

// 调用注入函数
getReactKeyFromPage();

2. 尽量避免依赖React内部私有属性 #

说实话，这些带随机后缀的内部属性非常不稳定——React版本更新、甚至页面刷新后，后缀的随机字符串都会改变，用它们来定位元素很容易失效。更靠谱的方案是：

• 用稳定的CSS选择器定位元素：比如找元素的data-*自定义属性（很多网站会用这些属性标记元素，比类名更稳定），或者结合元素的href、文本内容等特征
• 用MutationObserver监听DOM变化：当目标元素出现在页面中时，再执行你的定位逻辑，避免元素还没加载就执行代码
• 如果是要操作React组件的状态或方法，可以考虑用React DevTools的公开API（不过这个需要额外配置）

3. 检查扩展的配置 #

确保你的manifest.json里的内容脚本匹配规则正确覆盖了Instagram探索页，比如：

"content_scripts": [
  {
    "matches": ["https://www.instagram.com/explore/*"],
    "js": ["your-content-script.js"],
    "run_at": "document_idle" // 确保DOM加载完成后再执行
  }
]

run_at设置为document_idle可以保证页面DOM基本加载完成，避免你执行代码时目标元素还没出现。

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