上传前抓取带有 chrome 扩展名的文件 [英] Grab file with chrome extension before upload

问题描述

使用我的 chrome 扩展程序，我想在文件上传到网站之前获取文件(并可能更改它).特别是来自文件输入.换句话说，如果我选择一个带有 input[type=file] 的文件，我希望我的 chrome 扩展程序中断任何提交并获取文件.然后我的扩展程序将其魔法应用到文件，然后可以提交/上传文件.我该如何解决这个问题?

using my chrome extension i would like to grab a file(and maybe change it) before it gets uploaded to a website. Particularly from file-inputs. Put another way if i select a file with an input[type=file] i want my chrome extension to interrupt any submit and take the file. Then my extension applies its magic to the file and after that the file may be submitted/uploaded. How can i approach this?

文件路径出现问题.如果我获取文件输入的值，由于 HTML5 标准和兼容性问题，它总是将实际路径更改为C:fakepath".我怎样才能访问该文件呢?也许它是临时保存在某个 chrome 存储中的?

On problem occurs with the file path. If i grab the vaule of a file-input it always changes the actual path to " C:fakepath" due to HTML5 standard and compatibility issues. How can i access the file then? Maybe it is saved temporarily in some chrome storage?

好吧，我设法像这样读取在文件输入中选择的文件:

Well, i managed to read the file selected in the file input like this:

var file;
$('input[type=file]').change(function(e){
    file = e.target.files[0];
    var reader = new FileReader();      
    reader.onload = function (event) {
        console.log(event.target.result);  //contains the file data
        //maybe change data and use filewriter  

    };      
    reader.readAsDataURL(file);
};

现在我想使用 FileWriter 写入 e.target.files[0]

Now i would like to use a FileWriter to write to e.target.files[0]

我遵循了本教程:http://www.html5rocks.com/en/tutorials/file/filesystem/但我无法创建一个合适的 FileWriter.

I followed this tutorial: http://www.html5rocks.com/en/tutorials/file/filesystem/ but i am not able to create a proper FileWriter.

没有必要写入磁盘上的原始文件 - 甚至可能不可能 - 但我需要更改用于在相应文件输入表单字段中上传的数据.

It is not necessary to write to the original file on the disk - might not even possible - but i need to change the data that is used to upload in the corresponding file-input form field.

推荐答案

Chrome 扩展没有定义 API 来拦截请求的负载 (正在进行中).

There's no defined API for a Chrome extension to intercept the payload of a request (work in progress).

话虽如此，您可以使用内容脚本来添加一个事件侦听器:>

That being said, you can use a Content script to add an event listener which:

1. 取消正常的表单提交.
2. 使用 FileReader API.
3. 将结果 ArrayBuffer 包装在 视图 后修改它.
4. 根据修改后的数据创建Blob.

5. 通过创建一个 FormData 实例来重建表单，然后使用 .append(name, value[, filename]) 方法.
   注意:在下面的示例中，我没有没有包括表单重建方法.我只包括文件上传部分.有两种方法可以重构表单:

1. Cancels the normal form submission.
2. Reads the file as an ArrayBuffer using the FileReader API.
3. Modify the resulting ArrayBuffer after wrapping it in a view.
4. Create a Blob from the modified data.

5. Reconstruct the form by creating a FormData instance, then use the .append(name, value[, filename]) method.
   Note: In the example below, I did not include the form reconstruction method. I only included the file upload part. There are two approaches to reconstruct the form:

1. 编写一个特定于您的表单的方法.
2. 编写一个通用的表单解析方法，它负责处理无名/禁用/未选中/...元素.如果你想走这条路，看看W3 表单提交算法规范.

使用XMLHttpRequest提交数据.注意:如果您在 Chrome 扩展程序的上下文中运行此代码，请不要忘记将 permissions 部分在清单文件中.

这是一个实现示例:

// Reference to the form:
var form = document.forms["uploadForm"];
form.addEventListener('submit', function(ev) {
    ev.preventDefault(); // Cancel submission

    var fileInput = form.querySelector('input[type="file"]');
    var file = fileInput.files[0];
    if (!file) return; // No file selected

    var fileReader = new FileReader();
    fileReader.onload = function() {
        var arraybuffer = fileReader.result;
        // To manipulate an arraybuffer, wrap it in a view:
        var view = new Uint8Array(arraybuffer);
        view[0] = 0; // For example, change the first byte to a NULL-byte

        // Create an object which is suitable for use with FormData
        var blob = new Blob([view], {type: file.type});

        // Now, the form reconstruction + upload part:
        var formData = new FormData();
        formData.append(fileInput.name, blob, file.name);
        // ... handle remainder of the form ...

        // Now, submit the form
        var xhr = new XMLHttpRequest();
        xhr.open('POST', form.action);
        xhr.onload = function() {
            // Do something. For example:
            alert(xhr.responseText);
        };
        xhr.onerror = function() {
            console.log(xhr); // Aw. Error. Log xhr object for debugging
        }
        xhr.send(formData);
    };
    fileReader.readAsArrayBuffer(file);
});

这篇关于上传前抓取带有 chrome 扩展名的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！