6

我一直在使用 Addon 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>

最初，我们将数据作为“data.js”简单地存储到一个 js 文件中，并使用 script src 标签从“panel.html”中包含在内，它可以正常工作。但是，当我们将插件提交到 Mozilla 插件网站时，这被作为要修复的问题之一解决，说我们需要使用不可执行的格式，例如 JSON 文件以使其更安全。

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

4

1 回答 1

7

这是一个关于探索和解决此问题的附加组件构建器的示例。

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

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

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

这是同步加载的，所以它不是你想要经常做的事情，在这个例子中，它只会在插件首先在浏览会话中激活时发生。

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

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

我做了一些额外的工作来确保我只发出一次数据。数据，仅供参考，是从我本地 pub的 live beer keg data api 中保存的。

于 2012-11-15T03:36:30.503 回答