Question

在谷歌Chrome应用程序中，是否可以从background.js脚本中访问捆绑的数据文件？

E.g。如果我在应用程序中包含一个名为data.json的文件，是否有一个JavaScript API可以在background.js脚本中用来获取文件内容？

使用示例包目录结构：

/app/manfifest.json
/app/backround.js
/app/data.json

我想做类似的事情：

chrome.app.runtime.onLaunched.addListener(function() {
  data = unknown.api.loadFileSync("data.json");
  // do stuff with data
  // ...
});

Answer 1

后台脚本可以使用XHR访问资源。要获取所包含资源的URL，请使用chrome.extension.getURL()，它将返回资源的完全限定URL。

function loadData (file, fn) {
  var dataUrl = chrome.extension.getURL(file),
      xhr = new XMLHttpRequest();

  xhr.responseType = 'json';
  xhr.onload = function () {
    fn(null, this.response);
  };
  xhr.onerror = function () { fn(this.status); };
  xhr.send();
}


chrome.app.runtime.onLaunched.addListener(function() {
  loadData('data.json', function (err, data) {
    // 
  });
});

另一种方法是将data.json文件转换为data.js文件，并将其作为后台脚本包含在manifest.json中。这将允许您访问由data.js设置的任何变量。

<强>的manifest.json ：

"background": {
  "scripts": ["data.js", "background.js"]
}

Answer 2

在API文档中，您可以获取包目录的DirectoryEntry对象，然后使用HTML5 FileSystem API获取文件的内容。 API函数为chrome.runtime.getPackageDirectoryEntry。

chrome.runtime.getPackageDirectoryEntry(function (dirEntry) {
    dirEntry.getFile("data.json", undefined, function (fileEntry) {
    fileEntry.file(function (file) {
            var reader = new FileReader()
            reader.addEventListener("load", function (event) {
                // data now in reader.result                                                        
                console.log(reader.result);
            });
            reader.readAsText(file);
        });
    }, function (e) {
        console.log(e);
    });
});

Answer 3

由于firefox不支持getPackageDirectoryEntry，因此不建议使用。现在有一种更简单的方法。

async function loadData(resourcePath) {
    var url = chrome.extension.getURL(resourcePath);
    return (await fetch(url)).text();
}

如何从background.js访问内部资源

3 个答案: