如何用纯JavaScript读取Google Chrome的use-angle标志值？

Chrome的内部flags（包括chrome://flags/#use-angle）没有公开的JavaScript API可供前端直接读取，因为这些属于浏览器私有配置，不对外暴露。但可以通过检测WebGL上下文的渲染器信息间接推断当前use-angle的设置，适配你的Apple Silicon + Chrome场景。

核心思路 #

当use-angle设置为不同后端时，WebGL上下文返回的渲染器字符串会有明显差异：

• 默认Metal后端（性能有问题的场景）：渲染器字符串通常包含ANGLE (Apple Metal)
• 切换到OpenGL后端：渲染器字符串会包含ANGLE (Apple OpenGL)或直接显示Apple OpenGL相关标识

结合你已有的Chrome+Apple Silicon检测逻辑，通过匹配渲染器字符串即可判断是否需要提示用户修改设置。

实现代码 #

// 你的现有Chrome+Apple Silicon检测函数（可根据实际情况调整）
function isChromeAppleSilicon() {
  // 基于userAgentData的更准确检测（Chrome 89+支持）
  if (navigator.userAgentData?.platform === 'macOS' && navigator.userAgentData?.architecture === 'arm') {
    return /Chrome/.test(navigator.userAgent);
  }
  // 兼容旧版Chrome的 fallback 检测
  return /Chrome/.test(navigator.userAgent) && navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 0;
}

// 获取WebGL渲染器信息
function getWebGLRendererInfo() {
  const canvas = document.createElement('canvas');
  const gl = canvas.getContext('webgl') || canvas.getContext('webgl2');
  if (!gl) return null;
  return gl.getParameter(gl.RENDERER);
}

// 判断是否需要提示用户修改use-angle设置
function needAngleSettingPrompt() {
  if (!isChromeAppleSilicon()) return false;
  
  const renderer = getWebGLRendererInfo();
  if (!renderer) return false;
  
  // 匹配Metal后端的标识（需根据Chrome版本调整字符串）
  return renderer.includes('ANGLE (Apple Metal)');
}

// 触发提示逻辑
if (needAngleSettingPrompt()) {
  // 这里可以替换为更友好的自定义弹窗
  alert('当前Chrome使用Metal作为ANGLE后端，可能导致WebGL性能问题。请前往chrome://flags/#use-angle，将选项改为「OpenGL」后重启浏览器以优化性能。');
}

注意事项 #

1. 渲染器字符串可能随版本变化：Chrome更新可能修改渲染器标识格式，需要定期在目标环境中验证字符串内容，调整匹配逻辑。
2. 未重启浏览器的情况：用户修改flag后未重启Chrome时，WebGL上下文仍会使用旧后端，检测结果会不准确，提示文案中需明确提醒重启。
3. 边缘场景覆盖：若用户切换到其他ANGLE后端（如Vulkan，部分版本支持），渲染器字符串会不同，需根据需求调整判断条件。

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