Loading a JSON file in Firefox Addon Page Script, everything locally within the package
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.