在Firefox Addon Page Script中加载JSON文件,包中的所有内容

Question

我一直在使用Addon SDK开发一个Firefox扩展,需要加载一些存储在同一个包中的数据,作为一个单独的文件:"data.json".它需要从页面脚本加载,即使用脚本src标记包含在"panel.html"中的"loader.js".

结构是这样的:

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

panel.html有:

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

最初我们将数据简单地存储到js文件中作为"data.js"并使用脚本src标签从"panel.html"中包含它并且它没有任何问题.但是,当我们向Mozilla Addon站点提交该附加组件时,这被解决为要解决的问题之一,并说我们需要使用非可执行格式,例如JSON文件,以使其更安全.

现在问题似乎是"loader.js"不允许向"data.json"发出AJAX请求.(使用JQuery $ .ajax()调用返回没有成功,给出错误代码0)所以我一直在考虑的解决方案是使用SDK的request()函数从"main.js"加载"data.json"并以某种方式将其传递给页面脚本"loader.js".但这似乎很复杂,因为据我所知,数据需要首先发送到内容脚本,然后从那里发送到页面脚本.这需要在加载页面脚本时发生!我对此感到困惑,因为我不确定我是否错过了一个更实用的解决方案,或者它是否真的像我想做的那样复杂,只需将包中的本地JSON数据加载到本地页面脚本中？

Answer 1

这是一个关于Add-on Builder的例子,它探讨并解决了这个问题.

首先,您可以从数据加载json文件并使用self.data.load解析它:

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

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

这会同步加载,因此它不是您想要经常执行的操作,在示例中,只有在加载项firsst在浏览会话中变为活动时才会发生.

接下来,您将使用内容脚本和消息传递将数据传递到面板.

在main.js脚本中:

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

在内容脚本中:

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

我做了一些额外的工作,以确保我只发出一次数据.数据FYI从我当地酒吧的实时啤酒桶数据api中保存.