Ajax 在Firefox插件页面脚本中加载JSON文件，包中的所有内容都在本地加载

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

结构如下：

+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插件站点时，这是需要解决的问题之一，表示我们需要使用不可执行的格式，例如JSON文件，以使其更安全

---

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

下面是一个关于插件生成器的示例，它探索并解决了这一问题

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

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

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

这是同步加载的，因此您不希望经常这样做，在本例中，只有当加载项firrst在浏览会话中处于活动状态时，才会发生这种情况

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

在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');
});

self.port.on（'taps-data'，函数（数据）{
$（'#list'）.html（''）；
data.forEach（功能（项）{
$（“#列表”）.append（“”+item.name+“”）；
});
self.port.emit（'taps-load'）；
});

我做了一些额外的工作，以确保只发送一次数据。数据（仅供参考）是从api的活啤酒桶数据中保存的