Object.keys在浏览器控制台正常运行但在Mozilla扩展中返回空数组

• 火狐扩展的内容脚本默认运行在独立的隔离世界，和页面自身的JavaScript上下文完全分离，两者仅能共享DOM树的原生标准属性，页面JS在DOM元素上挂载的__reactProps这类非标准自定义属性，不会暴露给内容脚本拿到的DOM对象实例。
• 浏览器控制台默认执行上下文是当前页面的JS上下文，所以可以正常读取到React挂载的内部属性，和扩展内容脚本的执行环境有本质区别。

将需要读取__reactProps的逻辑注入到页面上下文执行即可，若需要将结果传回扩展的内容脚本，可以通过自定义事件完成通信，示例代码如下：

// 内容脚本中编写注入逻辑
function injectScript(code) {
  const script = document.createElement('script');
  script.textContent = code;
  (document.head || document.documentElement).appendChild(script);
  script.remove();
}

// 要注入到页面执行的代码
const execCode = `
  (function() {
    var colorSelectorElements = document.getElementsByName('color-selector');
    var addInColorListFunctionKey = Object.keys(colorSelectorElements[0]).find(key => key.startsWith('__reactProps'));
    // 将结果通过自定义事件发回内容脚本
    document.dispatchEvent(new CustomEvent('__reactPropsResult', { detail: addInColorListFunctionKey }));
  })();
`;

// 监听页面上下文发回的结果
document.addEventListener('__reactPropsResult', e => {
  const targetKey = e.detail;
  // 拿到目标key后即可执行后续扩展逻辑
  console.log('读取到的reactProps键：', targetKey);
});

// 执行注入操作
injectScript(execCode);

注意事项 #

• __reactProps是React框架的内部私有属性，不同React版本的命名规则、挂载逻辑可能发生变更，非必要不建议依赖该属性实现业务逻辑。
• 注入页面上下文的代码会和页面自身的JS拥有相同权限，注意避免引入安全风险，不要执行不可信的动态代码。

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