Firefox WebExtensions，通过路径获取本地文件内容

Question

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

此插件应通过其绝对路径读取本地文件内容：
"/home/saba/desktop/test.txt"

ma​​nifest.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 中）：

---

使用XMLHttpRequest

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”，路径正确）

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

---

使用FileReader

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");

但由于file 参数，我在这里卡住了。
此方法通常与返回 .files 数组的 input type="file" 标记配合使用。 （但我只有一个本地路径字符串）

我搜索了是否可以使用绝对本地文件路径创建新的 Blob 或 File var，但似乎不可能。

---

使用WebExtensions API

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

难道没有（可能）某种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

---

我做错了什么或错过了什么？

..是否可以通过 WE Add-on 的绝对路径获取本地文件的内容？

Answer 1

我终于找到了使用Fetch requests 和FileReader API 的方法。

这是我想出的：

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); 
    });
};

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

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

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

});

---

带有承诺的 ES6

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

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 );
    });

Answer 2

这不起作用，或者至少不再考虑接受的答案。

插件在假根中运行，这意味着您只能访问已经存在的文件

1. 随您的扩展 [1] 一起使用，例如fetch() 或
2. 打开的交互式（意味着由用户使用文件启动 选择器或拖放）通过 File() 构造函数 [2]

其他一切都会导致Security Error: Content at moz-extension://... may not load data from file:///... 导致 fetch() 抛出上述TypeError: NetworkError when attempting to fetch resource.

[1]https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
[2]https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files#open_files_in_an_extension_using_a_file_picker