Chrome 应用使用 JavaScript / jQuery / AngularJS 访问外部资源

Question

我正在构建一个 Chrome 应用程序来可视化一些数据。我的数据是单独收集的，存储在与 Chrome 应用程序无关的本地文件夹中。我正在使用 Angular + D3，我希望我的应用程序从指定的文件夹中获取数据。我该怎么做？

目前，我正在尝试使用 $http 服务，但它无法按我想要的方式运行。这是代码：

var app = angular.module('myApp', []);

app.controller('dataController', ['$scope', '$http', function($scope, $http) {
  $http.get('../data/file.json').success(function(data) {
    $scope.data = data;
    console.log($scope.data);
  });
}]);

问题是，在这种情况下，路径 ../data/file.json 只能指向应用程序文件夹内的文件，即我不能在我的文件系统上指定任意 directory/file。我该怎么做？一般来说，我可以拥有一个外部文件夹，其中包含 Chrome 应用程序可以使用的资源（只读对我来说就足够了）吗？

Answer 1

要访问任意目录，需要使用fileSystem.chooseEntry函数，它会提示用户select一个目录，然后return一个句柄给你.这是一个例子：

您必须首先向您的清单文件添加必要的权限：

"permissions": [
      { "fileSystem": 
       ["directory", "retainEntries"] 
      }
  ]

读取文件：

chrome.fileSystem.chooseEntry({ type: 'openDirectory' }, function (dirEntry) {
    dirEntry.getFile('file.json', {}, function (fileEntry) {
        fileEntry.file(function (file) {
            var reader = new FileReader();

            reader.onloadend = function (e) {
                var result = JSON.parse(this.result);
                console.log(result);
            };

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

要跨会话保留对目录的访问权限，您可以使用 retainEntry to get an id which you can save, and later use with restoreEntry 重新获得对该目录的访问权限。这样用户只需 select 目录一次。

Chrome 应用使用 JavaScript / jQuery / AngularJS 访问外部资源

Chrome app access external resources with JavaScript / jQuery / AngularJS

javascript

angularjs

d3.js

google-chrome-app