Chrome扩展读取WebGL Canvas像素：readPixels返回全0的求助

我正在开发一款Chrome扩展，用于读取Jstris网站上id为queueCanvas的WebGL Canvas特定位置像素颜色值，但调用readPixels()始终返回全0。我试过添加{preserveDrawingBuffer: true}参数，也尝试创建帧缓冲区，两种方案都未奏效。

以下是我的代码：

async function getData(){ // this function is run on even keyup or keydown and executes properly
    console.log("getData function")
    const queue = document.getElementById("queueCanvas");
    console.log(queue);
    // pixel locations |v|
    // 35,60 // 35,160 // 35,200 // 35,275 // 35,350
    var gl = queue.getContext("webgl", {preserveDrawingBuffer: true});
    // debug
    gl.viewport(0, 0, queue.width, queue.height);
    gl.clearColor(0, 0, 0.5, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    // debug (turn tha canvas background blue so that even if I search the wrong location, it should still give me a blue pixel
    var fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
    var tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.drawingBufferWidth, gl.drawingBufferHeight, 0 , gl.RGB, gl.UNSIGNED_BYTE, null);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
    

    console.log(gl)

    var pixels = new Uint8Array(
        4 * gl.drawingBufferWidth * gl.drawingBufferHeight
    );
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.readPixels(
        0,
        0,
        gl.drawingBufferWidth,
        gl.drawingBufferHeight,
        gl.RGB,
        gl.UNSIGNED_BYTE,
        pixels
    );
    console.log(pixels); // 0 0 0 0 0 ...
    var x = 35;
    var y = 60;
    var pixelR = pixels[4 * (y * gl.drawingBufferWidth + x)];
    var pixelG = pixels[4 * (y * gl.drawingBufferWidth + x) + 1];
    var pixelB = pixels[4 * (y * gl.drawingBufferWidth + x) + 2];

    console.log("pixel color " + pixelR+", "+pixelG+", "+pixelB); // 0,0,0

}

补充信息：

• 我查阅过相关技术问答和开发者论坛的资料，但问题仍未解决，可能是方案实现有误
• 该Canvas并非我创建，无法访问网站的渲染代码
• 我的目标是获取Jstris中即将出现的方块队列，用于分析最优开局

内容的提问来源于stack exchange，提问作者mlhome-dev