Chrome扩展开发：无法将函数获取的截图加载至HTML Canvas

你当前的Canvas绘制逻辑绑定在window.load事件上，该事件会在screenshot.html页面基础资源加载完成后立即触发，但此时background脚本还未调用setScreenshotUrl方法给#target图片元素赋值截图地址，相当于绘制的是空图片对象，所以无法实现预期效果。

// 原点击验证逻辑可保留
var cnv = document.getElementById("conv");
cnv.onclick = function() {
    var x = document.getElementById("target").src;
    document.getElementById("demo").innerHTML = x;
};

function setScreenshotUrl(url) {
    const img = document.getElementById('target');
    // 先绑定图片加载完成回调，再赋值src避免缓存场景下不触发onload的问题
    img.onload = function() {
        const c = document.getElementById("myCanvas");
        const ctx = c.getContext("2d");
        // 绘制参数可根据实际需求调整，建议先匹配图片原始尺寸测试
        ctx.drawImage(img, 10, 10, 300, 175, 0, 0, 100, 175);
    }
    img.src = url;
};

可以删除原有的window.addEventListener('load')相关的绘制逻辑，该部分逻辑已无用。

• 若你使用的是Manifest V3版本的扩展，需要将background脚本里的chrome.browserAction.onClicked替换为chrome.action.onClicked，同时调整background的配置为service worker模式。
• 确认manifest.json中已配置activeTab权限，保证chrome.tabs.captureVisibleTab可以正常调用。
• 建议提前给#myCanvas设置和绘制尺寸匹配的宽高属性，避免绘制内容被拉伸变形。

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