Question

我目前正在使用firefox进行插件，这应该非常简单。但由于我是新手，因此出现了一些问题：

目的是在用户单击图像（）时绑定上下文菜单上的项目。我想使用画布大量操作此图像（有些像可视加密一样工作），并在新的面板或对话框中显示结果。

要将新项目绑定到菜单上，请使用以下代码。

cm.Item({
    label: _("menu-label-encrypt"),
    context: cm.SelectorContext("img"),
    contentScriptFile: [
        data.url('jquery.js'),
        data.url('encrypt.menu.js'),
    ],
    onMessage: function(cmd){
        var cryptWorker = imgcrypt();
        cryptWorker.key(cmd.password);
        var ret = cryptWorker.encrypt( cmd.width, cmd.height, cmd.data);
        console.log(ret.length);
    },
});

我的想法是使用contextScriptFile encrypt.menu.js将代码注入页面，并将画布数据作为数组获取，然后使用self.postMessage将其发布到插件并进行处理：

self.on('click', function(node){
    var canvasID = 'cache';
    var img = $(node)[0];
    $('<canvas>', {id: canvasID}).appendTo('body').hide();

    var canvas = $('#' + canvasID)[0];
    var ctx = canvas.getContext('2d');
    ctx.canvas.width = img.width;
    ctx.canvas.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);

    var data = ctx.getImageData(0, 0, img.width, img.height).data,
        dataAry = new Array(data.length);

    for(var i=0; i<data.length; i++)
        dataAry[i] = data[i];

    var command = {
        'password': 'test',
        'width': img.width,
        'height': img.height,
        'data': dataAry,
    };

    self.postMessage(command);
});

现在问题让我感到惊讶：当我在localhost:4000托管的某个页面上尝试使用此插件时，它可以正常工作。在一些真实的网页上，它显示：

menu.js:14 - SecurityError: The operation is insecure.

我知道这可能是由违反某些同源策略引起的，但这是一个由插件注入的内容脚本。没有外部服务器的帮助也不可能读取图像数据，或者我做错了什么？

谢谢。

Answer 1

我没有找到任何这种方法的解决方案（就是说，注入内容以从远程恢复的图像中获取数据）。但是mozilla的sdk中的net/xhr在插件方面起作用。或者，我写了一个在main.js中工作的XHR并将其用作代理。

在插件一侧，此XMLHttpRequest没有相同的域限制，可用于检索URL给出的图像的二进制数据。通过设置ArrayBuffer

，可以xhr.responseType='arraybuffer';的形式返回已审核的数据

为插件的XHR提供的URL只是<IMG>的src，正在被点击。浏览器似乎正在缓存图像并使用XHR来快速检索此图像，并且不需要向服务器发送另一个请求。

从网页读取图像数据到firefox插件不安全？

1 个答案: