gpt4 book ai didi

javascript - 如何从 Firefox 的 webextension 中读取本地文件?

转载 作者:太空宇宙 更新时间:2023-11-04 13:29:31 24 4
gpt4 key购买 nike

如主题中所述,我需要使用本地可用的数据作为 excel 表格来填写 Web 表单。我已经在结合使用 python 和 autohotkey,但我想要某种程度的 JavaScript 控制,以便正确处理加载时间和条件。作为一个网络开发新手,我首先想到我可以只用一个本地 iframe 来控制表单所在的网站,但我很快发现 XSS 东西不允许这样的黑客攻击。我无权访问服务器。

我的最后一次体验是使用 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>

background-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 的 popup.html 文件。在这种情况下,不会到达任何 console.error 行。顺便说一句,这是我的 manifest.json:

list .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"
}

}

有没有更简单的方法来完成我正在做的事情?我期待这种事情成为一种普遍的需求,我错了吗?为什么我的代码不起作用?

最佳答案

在这个问题中已经指出了这个问题: 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> 中检索它 field 。我的解决方案是从输入文本字段读取路径,这大大降低了可用性

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.

关于javascript - 如何从 Firefox 的 webextension 中读取本地文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41876561/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com