谷歌Chrome浏览器是否可针对单个标签页禁用硬件加速？

可行性结论 #

可以实现，无需全局禁用硬件加速，通过Chrome扩展注入JS拦截指定站点的WebGL API即可满足需求，完全不影响YouTube等其他站点的硬件加速能力。

你之前使用onload事件删除canvas的方案失效，原因是onload触发时页面JS早已执行完毕，WebGL上下文已经完成创建，且部分页面会使用无DOM挂载的离屏canvas生成WebGL，无法通过删除DOM元素的方式拦截。

具体实现步骤 #

1. 扩展配置（manifest.json，Manifest V3版本） #

核心要配置run_at: document_start，保证拦截代码在页面所有JS执行之前生效：

{
  "manifest_version": 3,
  "name": "指定站点WebGL拦截",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://你需要拦截的目标域名/*"],
      "js": ["content.js"],
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}

把matches字段里的域名替换为你实际要拦截的站点地址即可，不要添加YouTube等你需要保留硬件加速的站点。

2. 拦截逻辑（content.js） #

重写canvas的上下文创建方法，碰到WebGL相关请求直接返回null，模拟浏览器不支持WebGL的效果：

const originalGetContext = HTMLCanvasElement.prototype.getContext;
HTMLCanvasElement.prototype.getContext = function(type, ...args) {
  // 拦截所有WebGL相关的上下文类型请求
  if (['webgl', 'webgl2', 'experimental-webgl', 'experimental-webgl2'].includes(type.toLowerCase())) {
    return null;
  }
  // 2D canvas等其他类型请求正常放行
  return originalGetContext.apply(this, [type, ...args]);
};

// 可选：如果目标站点用到了OffscreenCanvas离屏画布，也同步拦截
if (typeof OffscreenCanvas !== 'undefined') {
  const originalOffscreenGetContext = OffscreenCanvas.prototype.getContext;
  OffscreenCanvas.prototype.getContext = function(type, ...args) {
    if (['webgl', 'webgl2', 'experimental-webgl', 'experimental-webgl2'].includes(type.toLowerCase())) {
      return null;
    }
    return originalOffscreenGetContext.apply(this, [type, ...args]);
  };
}

效果说明 #

该方案只会拦截你指定站点的WebGL上下文创建，完全不会修改浏览器全局硬件加速配置，YouTube的HDR视频解码、其他站点的2D canvas渲染、GPU加速的UI渲染都不受任何影响。

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