Firefox WebExtensions，按路径获取本地文件内容 [英] Firefox WebExtensions, get local files content by path

问题描述

我正在尝试使用 WebExtensions为firefox编写一个小插件结构。

I'm trying to write a small add-on for firefox using the WebExtensions structure.

此附加组件应按其绝对路径读取本地文件内容：

/ home / saba / desktop / test。 txt

This add-on should read a local file content by it's absolute path:
"/home/saba/desktop/test.txt"

manifest.json

{

    "manifest_version": 2,
    "name": "Test - load files",
    "version": "0.0.1",

    "description": "Test - load files",
    "permissions": [ "<all_urls>" ],

    "background": {
        "scripts": [ "main.js" ]
    }

}

这是我到目前为止所尝试的内容main.js）：

Here what I tried so far (inside the main.js):

function readFileAjax(_path){

    var xhr = new XMLHttpRequest();

    xhr.onloadend = function(event) {
        console.log("onloadend", this);
    };

    xhr.overrideMimeType("text/plain");
    xhr.open("GET", "file:///"+_path);
    xhr.send();
}

readFileAjax("/home/saba/desktop/test.txt");

失败。
我无法弄清楚为什么它总是返回空响应

（test.txt包含test，路径是正确的）

Failed. I can't figure out why it always return an empty response
(test.txt contains "test", the path is correct)

onloadend XMLHttpRequest { 
    onreadystatechange: null, 
    readyState: 4, 
    timeout: 0, 
    withCredentials: false, 
    upload: XMLHttpRequestUpload, 
    responseURL: "", 
    status: 0, 
    statusText: "", 
    responseType: "", 
    response: "" 
}

function readFileFR(_path){

    var reader  = new FileReader();

    reader.addEventListener("loadend", function() {
       console.log("loadend", this.result)
    });

    reader.readAsText(file);  // file ???? 
}

readFileFR("/home/saba/desktop/test.txt");

但是我因为文件参数。

这种方法通常与输入类型=文件标签相同，后者返回.files数组。 （但我只有一个本地路径字符串）

but here I got stuck because of the file argument.
This method usually get along with an input type="file" tag which gives back a .files array. (but I only have a local path string)

我搜索了是否有可能创建一个新的 Blob 或文件 var使用绝对本地文件路径，但不可能接缝。

I searched if was possible to create a new Blob or File var using an absolute local file path but seams like it's not possible.

我没有在文档页面上找到任何关于如何执行此操作的线索。

I didn't find any clue form the documentation pages on how to do this.

不存在（可能）某种 WebExtensions API ，这可以像在SDK中那样实现吗？

https://developer.mozilla.org/en- US / Add-ons / SDK / Low-Level_APIs / io_file

https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/io_text-streams

Isn't there (maybe) some kind of WebExtensions API which makes this possible like in the SDK?
https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/io_file
https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/io_text-streams

我做错了什么或丢失了什么？

What am I doing wrong or missing?

..是否可以通过WE附加组件的绝对路径获取本地文件的内容？

..is it possible to get the content of a local file by it's absolute path with a WE Add-on?

推荐答案

我终于找到了使用获取请求和 FileReader API。

I finally found the way to do this using the Fetch requests and FileReader APIs.

这就是我的目标：

function readFile(_path, _cb){

    fetch(_path, {mode:'same-origin'})   // <-- important

    .then(function(_res) {
        return _res.blob();
    })

    .then(function(_blob) {
        var reader = new FileReader();

        reader.addEventListener("loadend", function() {
            _cb(this.result);
        });

        reader.readAsText(_blob); 
    });
};

使用我的问题中的示例，这是如何使用它：

Using the example in my question this is how to use it:

readFile('file:///home/saba/desktop/test.txt', function(_res){

    console.log(_res); // <--  result (file content)

});

---

带承诺的ES6

如果您更喜欢使用承诺而不是回调：

let readFile = (_path) => {
    return new Promise((resolve, reject) => {
        fetch(_path, {mode:'same-origin'})
            .then(function(_res) {
                return _res.blob();
            })
            .then(function(_blob) {
                var reader = new FileReader();

                reader.addEventListener("loadend", function() {
                    resolve(this.result);
                });

                reader.readAsText(_blob);
            })
            .catch(error => {
                reject(error);
            });
    });
};

使用它：

readFile('file:///home/saba/desktop/test.txt')
    .then(_res => {
        console.log(_res); // <--  result (file content)
    })
    .catch(_error => {
        console.log(_error );
    });

这篇关于Firefox WebExtensions，按路径获取本地文件内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！