Fatal编程技术网
  • javascript/
  • Javascript 如何在Firefox中从webextension读取本地文件？

Javascript 如何在Firefox中从webextension读取本地文件？

javascript html firefox

Javascript 如何在Firefox中从webextension读取本地文件？,javascript,html,firefox,firefox-addon-webextensions,Javascript,Html,Firefox,Firefox Addon Webextensions,正如在本主题中所说，我需要使用本地可用的excel表格数据填写web表单。我已经使用python和autohotkey的组合实现了这一点，但我希望有一些JavaScript控制级别，以便正确处理加载时间和条件。作为一名web开发新手，我最初认为我可以用一个本地iframe来控制表单所在的网站，但很快我发现XSS不允许这样的攻击。我没有访问服务器的权限 我经历的最后一次迭代是使用Firefox webextensions，我希望用它打开一个本地文件（通过html5文件输入小部件），在那里我以前会编

正如在本主题中所说，我需要使用本地可用的excel表格数据填写web表单。我已经使用python和autohotkey的组合实现了这一点，但我希望有一些JavaScript控制级别，以便正确处理加载时间和条件。作为一名web开发新手，我最初认为我可以用一个本地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>

path: <input type="input" id="importFilePathInput" value="file://" />
<br />
file: <input type="file" id="importFileInput" />
这是一个独立文件，但不是我的webextension的popup.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"
    }

}
有没有更简单的方法来做我正在做的事情？我原以为这种事情会成为一种普遍的需要，我错了吗？为什么我的代码不起作用

这是一个独立文件，但不是我的webextension的popup.html文件

啊哈。我将检查…

此问题中已指出此问题： . 以下是给出的示例：

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); 
    });
};
请注意，不幸的是，此解决方案在Firefox 57上不再有效，出现以下错误：

TypeError: NetworkError when attempting to fetch resource.
那么我应该设置什么权限呢？ 
path: <input type="input" id="importFilePathInput" value="file://" />
<br />
file: <input type="file" id="importFileInput" />

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

TypeError: NetworkError when attempting to fetch resource.