javascript - 从浏览器扩展访问图像和视频数据(对比 CORS)

Question

我正在尝试编写一个浏览器扩展来进行一些图像处理，但我需要访问图像数据。我的方法是创建一个隐藏的 canvas 元素，通过 drawImage 向其绘制图像和视频，然后使用 getImageData 读取像素数据。这工作得很好，但在许多页面上，一半的内容被 CORS 错误拒绝。

我仍然对为什么 CORS 存在感到困惑(类似于不窃取数据，但是如果数据在客户端的计算机上，它不是已经“被盗”了吗？:S)。它似乎导致的只是像 JS 脚本注入(inject)这样的弱智黑客。所以 1. 它不起作用，因为每个浏览器都太复杂了，无法正确监管，并且 2. 开发人员受到惩罚，必须编写特定于浏览器的解决方法。所以我想我一定是有错误的想法，因为这看起来很愚蠢。

退后一步，我认为可以进行一些图像处理的扩展的想法是完全正常的并且不是恶意的所以请不要回复“不，你不应该这样做出于安全原因”。

我怀疑浏览器将扩展程序视为外来的东西，可能试图做恶意的事情。 我如何向浏览器保证客户端需要这些功能，并让它授予我访问图像和视频内容的权限？我已经拥有对 DOM 的完全访问权限，额外的一点点如何使有区别吗？？

还有其他方法可以从扩展程序中获取图像/视频数据吗？

Answer 1

在manifest文件中添加合适的权限后，就可以不受同源策略的阻碍，处理跨域数据了。在 background page或扩展过程中的任何其他页面，您可以获得所描述逻辑的工作演示，如下所示:

// background.js
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var image = document.createElement('img');
image.onload = function() {
    context.drawImage(image, 0, 0);
    // Demo: Show image
    window.open(canvas.toDataURL('image/png'));
};
image.src = 'https://stackoverflow.com/favicon.ico';

这是这个特定演示的最小 list 文件:

{
    "name": "Get image data",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "https://stackoverflow.com/favicon.ico",
        "http://cdn.sstatic.net/stackoverflow/img/favicon.ico"
    ]
}

第二个权限是必需的，因为 https://stackoverflow.com/favicon.ico重定向到 http://cdn.sstatic.net/stackoverflow/img/favicon.ico .

请注意，代码不在content scripts 中有效，因为 DOM 是共享的，Chrome 无法仅提供对内容脚本的无限制来源访问。

根据您的实际需要，您也可以尝试使用 XMLHttpRequest 获取原始格式的图像数据，然后以您想要的任何方式处理它。这种方法也适用于内容脚本，它们的优点是效率更高，并且还保留了图像的字节(使用canvas方法，图像在转换为数据URL之前由浏览器解析和处理) .

var x = new XMLHttpRequest();
x.responseType = 'blob';
x.open('get', 'http://stackoverflow.com');
x.onload = function() {
    var fileReader = new FileReader();
    fileReader.onloadend = function() {
        // fileReader.result is a data-URL (string)
        window.open(fileReader.result);
    };
    // x.response is a Blob object
    fileReader.readAsDataURL(x.response);
};
x.send();