Loading a JSON file in Firefox Addon Page Script, everything locally within the package

Question

I have been developing a Firefox extension using the Addon SDK and need to load some data that is stored in the same package, as a separate file: "data.json". It needs to be loaded from a page script, i.e. "loader.js" which is included in the "panel.html" using the script src tags.

The structure is like this:

+data
 panel.html
 panel.js
 loader.js
 data.json
 ...
+lib  
 main.js
 ...

panel.html has:

<script type="text/javascript" src="loader.js"></script>

Initially we stored the data simply into a js file as "data.js" and included from the "panel.html" using script src tags and it worked without any problems. However when we submitted the add-on to the Mozilla Addon site, this was addressed as one of the issues to fix, saying that we need to use a non-executable format, such as a JSON file to make it more safe.

Now the problem seems like "loader.js" is not allowed to make a AJAX request to "data.json". (Using the JQuery $.ajax() call returns with no success, giving the error code 0) So the solution I have been thinking of is to load "data.json" from "main.js" using the SDK's request() function and somehow pass it to the "loader.js", the page script. But that seems to be complicated since, as far as I understand, the data needs to be first sent to a content script, and then from there to the page script. And this needs to be happen when the page script is loading! I am confused about this since I am not sure if I am missing a much more practical solution, or is it really something complicated what I am trying to do, simply loading local JSON data in the package into a local page script?

Answer 1

Here's an example on the Add-on Builder that explores and approach to this.

First off, you can load the json file from data and parse it using self.data.load:

let data = require('self').data;

let taps_data = JSON.parse(data.load('taps.json'));

This loads synchronously, so it isn't something you want to do often, in the example it would only happen when the add-on firsst becomes active in a browsing session.

Next, you would use content scripts and message passing to pass the data in to the panel.

In the main.js script:

panel.on('show', function() {
    if (!loaded)
        panel.port.emit('taps-data', taps_data);
});

In the content script:

self.port.on('taps-data', function(data) {
    $('#list').html('');
    data.forEach(function(item) {
        $('#list').append('<div>'+ item.name +'</div>');
    });
    self.port.emit('taps-loaded');
});

I do a bit of extra work to make sure I'm only emitting the data once. The data, FYI, is saved from the live beer keg data api from my local pub.