Question

在Mozilla Addon-SDK的"Simple Addon"-tutorial中，它显示为：

/data - 包含图标或HTML文件等资源您的加载项附带的任何内容脚本。你可以访问使用附加组件代码中的数据子目录的内容附加SDK的自我模块。

在我的附加组件中，我使用HTML页面在panel中显示一些内容。由于内容是由Content-Script加载的，我想在HTML-Page上显示spinner.gif - 文件，以向用户显示正在加载内容。内容完全加载后，我隐藏了微调器图像并显示内容（使用jQuery）。

我现在的问题是，我不知道如何将图像嵌入HTML页面。我面临的问题是我不知道图像文件的路径。

我知道您使用AddOn-Script中的self - 模块来访问/data - 目录，但是如何从纯HTML文件或Content-Script执行此操作在文档中提到。

这就是我在HTML文件中所拥有的内容（不需要<head> - 标记）：

<html>
    <h2>StackExchange Statistics</h2>
    <div id="loading">
        <img src="spinner.gif" alt="loading...">
        <p>Fetching Data, please stand by</p>
    </div>
    <ul id="infos" style="display: none">

    </ul>
</html>

此HTML页面和图像（spinner.gif）都位于/data目录的根目录中，但上面的代码仅显示了alt-text。我也尝试使用/data/spinner.gif作为来源，没有运气。

那么，如何从/data - 目录中加载图像？

Answer 1

我尝试重现你的问题。我创建了一个简单的附加组件，并将以下代码添加到/lib目录中的脚本文件：

const data = require("self").data;
var tabs = require("tabs");

tabs.open(data.url("test.html"));

现在，加载项将在安装后立即打开一个选项卡。我创建了一个文件/data/test.html，其中包含您问题的源代码和图像文件/data/spinner.gif。安装附加组件后，将打开一个新选项卡，图像就在那里 - 很漂亮。请注意，该标签的网址为resource://something-related-to-add-on-id-data/test.html，图片的网址为resource://something-related-to-add-on-id-data/spinner.gif，这就是相对网址的工作原因。像/data/spinner.gif这样的网址不起作用，编译加载项后没有data目录。

现在我猜你是在问你如何从内容脚本中找到这个URL？事实上，内容脚本本身没有必要的API。但它可以从您的插件接收消息。请参阅the documentation中的“与内容脚本通信”部分。您的内容脚本需要声明函数onMessage，并且加载项中的onAttach函数需要实际发送此消息。如果要传输更多数据，消息有效负载可以是这一个URL或一些更复杂的数据结构。

对于常规网页（不属于附加组件）：他们所能做的只是“猜测”网址。您知道为您的加载项映射的URL /data/spinner.gif。因此，您只需在网页中使用该URL即可。问题：未来的SDK版本中的URL可能会发生变化。

Answer 2

数据文件夹在main.js中可用，您可以将该URL作为内容脚本选项传递。

从main.js预览控制台中的网址：

var data = require("sdk/self").data;
console.log(data.url('spinner.gif'));

将url传递给main.js中的内容脚本：

var image_url = data.url('spinner.gif');
contentScriptFile: data.url('myScript.js'),
contentScriptOptions: {"image_url" : image_url}

要查看内容脚本中的网址：

alert(self.options.image_url);

请告诉我这是否适合您。

如何访问HTML中的数据目录

2 个答案: