如何在Firefox中從webextension讀取本地文件？

正如在主題中所說的，我需要使用本地可用的Excel表格填寫一個Web表單。我已經使用python和autohotkey的組合，但我想要有一定程度的JavaScript控制，以正確處理加載時間和條件。作爲一個網站開發新手，我首先想到我可以擁有一個本地iframe來控制網站的表單，但我很快就發現XSS的東西不允許這樣的黑客攻擊。我無法訪問服務器。如何在Firefox中從webextension讀取本地文件？

我的經驗的最後一次迭代是與Firefox webextensions，我希望打開一個本地文件（通過html5文件輸入小部件），我以前寫我的js代碼填寫表單。但顯然這裏也有限制，我無法理解我看到的文檔。我的代碼是目前這樣的：

popup.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <body> 
    <input type="file" id="liquida-file" name="liquida"> 
    <br> 
    <script src="background-script.js"></script> 
    </body> 
</html>

背景的script.js

function handleFiles() { 
    var fileList = this.files; /* now you can work with the file list */ 
    var myFile = fileList[0] 
    var reader = new FileReader(); 

    reader.onloadend = function(evt){ 
    if (evt.target.readyState == FileReader.DONE) { // DONE == 2 
      var filedata = evt.target.result; 
     console.error("Analyzing file data") 
     console.error(filedata) 
     var data = JSON.parse(filedata) 
     console.error(data) 
    } 
    }; 
    reader.readAsText(myFile) 
} 
var inputElement = document.getElementById("liquida-file"); 
inputElement.addEventListener("change", handleFiles, false);

這可以作爲一個獨立的文件，但不能作爲彈出。我的webextension的html文件。在這種情況下，不會有任何console.error行到達。順便說一句，這是我的manifest.json：

manifest.json的

{ 

    "manifest_version": 2, 
    "name": "My extension", 
    "version": "1.0", 

    "description": "Retrieve local data.", 
    "homepage_url": "http://Nonefornow", 
    "icons": { 
     "48": "icons/beautiful-icon.png" 
    }, 

    "permissions": [ 
     "activeTab" 
    ], 

    "browser_action": { 
     "browser_style": true, 
     "default_icon": "icons/icon.png", 
     "default_title": "My Ext", 
     "default_popup": "popup.html" 
    } 

}

有沒有什麼簡單的方法做我在做什麼？我期待着這樣的事情是一個普遍的需求，我錯了嗎？爲什麼我的代碼不工作？

來源

2017-01-26 Tiago

-2

This works as a standalone file, but not as the popup.html file of my webextension.

啊哈。我會檢查permissions ...

來源

2017-01-29 08:45:01

我應該設置什麼樣的權限？ – Tiago

此問題已在此問題中指出： Firefox WebExtensions, get local files content by path。給出的solution有以下幾點：

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

如果要加載從一個文件<input>字段，您也必須傳遞文件的路徑，因爲出於安全原因，您無法從<input>字段檢索該文件。我的解決辦法是從一個輸入文本字段讀取路徑，顯著降低可用性

HTML

path: <input type="input" id="importFilePathInput" value="file://" /> 
<br /> 
file: <input type="file" id="importFileInput" />

的JavaScript

function importFromfile(){ 
    let filename = jQuery('#importFileInput').val().replace('C:\\fakepath\\', ''); 
    if (!filename) { 
    console.log('Select a filename'); 
    } else { 
    let path = jQuery('#importFilePathInput').val() + '/' + filename; 
    if (!path.startsWith('file://')) { 
     path = 'file://' + path; 
    } 
    fetch(path, {mode:'same-origin'}) 
     .then(function(result){ 
     return result.blob(); 
     }) 
     .then(function(blob){ 
     let reader = new FileReader(); 
     reader.addEventListener('loadend', function(){ 
      Model.save(JSON.parse(this.result)); // your function here 
     }); 
     reader.readAsText(blob); 
     }); 
    } 
}

注意，不幸的是這種解決方案並不在Firefox 57上工作，給出錯誤：

TypeError: NetworkError when attempting to fetch resource.

來源

2017-12-27 13:20:34 beaver

如何在Firefox中從webextension讀取本地文件？

回答

相關問題