How To Access Internal Resources From Background.js

In a Google Chrome application is it possible to access bundled data files from within the background.js script? E.g. if I had a file called data.json that I include with the app,

Solution 1:

Background scripts can access resources using XHR. To get the URL of the included resource, use chrome.extension.getURL(), which returns a fully-qualified URL for the resource.

functionloadData (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) {
    // 
  });
});

Another approach is to convert the data.json file into a data.js file and include it as a background script in manifest.json. This will let you access any variables set by data.js.

manifest.json:

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

Solution 2:

In the API docs you can get the DirectoryEntry object for the package directory, and then using the HTML5 FileSystem API get the contents of the file. The API function is chrome.runtime.getPackageDirectoryEntry.

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

Solution 3:

Since getPackageDirectoryEntry is not supported by firefox, it is not recommended. Now there is a simpler way.

asyncfunctionloadData(resourcePath) {
    var url = chrome.extension.getURL(resourcePath);
    return (awaitfetch(url)).text();
}