How to access internal resources from background.js

Question

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, is there a JavaScript API that I could use in the background.js script to get at the files contents?

With the example bundle directory structure:

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

I want to do something like:

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

Answer 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.

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

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"]
}