如何通过Chrome扩展编程激活React DevTools访问$r并获取组件名

核心实现前提 #

• 首先要明确Chrome扩展的权限边界：你没办法绕过Chrome的安全机制，强制替用户激活React DevTools、模拟用户在DevTools面板的选中操作，所有读取能力都建立在用户已经完成React DevTools基础交互的前提下。
• 你需要先打通主世界脚本的访问通道：$r是React DevTools在用户选中组件后，挂载到页面主window对象上的全局引用，扩展默认运行在隔离世界，和页面的window是完全隔离的，不做专门的主世界注入根本读不到这个值。
• 要提前校验页面环境：如果目标页面的React是生产构建、没有暴露内部实例的hook，哪怕装了React DevTools，也永远不会生成$r引用，这种场景下所有读取逻辑都会失效。

具体实现操作 #

• 第一步：配置Manifest V3的必要权限
  在扩展的manifest配置中，需要声明三类能力：
  1. 开启scripting权限，支持向页面主世界注入执行脚本
  2. 为目标站点配置对应的host_permissions，允许扩展访问目标页面的脚本注入接口
  3. 不需要额外申请devtools权限除非你要开发自己的DevTools面板——普通的页面脚本注入不需要申请这个高权限。
• 第二步：编写主世界的读取脚本
  把下面的逻辑作为注入脚本，运行在页面的MAIN世界，核心就是直接读取挂在window上的$r引用，提取对应的组件名称：

  function readCurrentSelectedComponent() {
    try {
      // 校验$r是否存在
      if (!window.$r || !window.$r.type) {
        return {
          status: 'no_selected_component',
          name: null
        }
      }
      // 兼容函数式组件、类组件的名称读取，处理匿名组件的场景
      const componentName = window.$r.type.displayName || window.$r.type.name || 'AnonymousComponent'
      return {
        status: 'success',
        name: componentName
      }
    } catch (err) {
      return {
        status: 'error',
        errorMessage: err.message
      }
    }
  }
  

• 第三步：降低用户的激活操作成本
  因为没办法自动替用户激活React DevTools，你可以在扩展的交互层做引导：
  • 在扩展弹窗增加明确的操作指引：提示用户先打开页面的开发者工具，切换到React DevTools面板，点击选中需要获取名称的组件
  • 如果你希望和页面元素选中联动，可以监听扩展的元素检查事件，当用户点击页面元素时，主动通知React DevTools的内部逻辑去匹配对应的React实例，自动把实例挂到$r上，减少用户在DevTools面板的手动选中操作——注意这部分逻辑依赖React DevTools的内部接口，没有官方稳定文档，升级React DevTools版本时可能出现兼容问题。

常见踩坑提醒 #

• 不要在隔离世界直接尝试读window.$r：隔离世界的window是独立的沙箱，哪怕主世界有这个值，隔离世界的脚本也完全感知不到，必须通过scripting.executeScript指定world: 'MAIN'注入才能拿到。
• 不要无判断直接读window.$r.type.name：当用户刷新页面、关闭React DevTools、没有选中过组件时，$r会被自动清空，直接读属性会触发空指针报错，必须加存在性校验和异常捕获。
• 不要在生产构建的React页面期待拿到这个值：生产环境的React默认会剥离内部实例的暴露接口，这个场景下React DevTools本身都无法读取组件结构，你的扩展自然也拿不到$r引用。

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