-1

在 Mozilla Addon-SDK 的“Simple Addon”教程中，它写道：

/data- 包含图标或 HTML 文件等资源，以及附加组件中包含的任何内容脚本。您可以使用插件 SDK 的 self 模块从插件代码中访问数据子目录的内容。

在我的附加组件中，我使用 HTML 页面来显示panel. 由于内容是由内容脚本加载的，我想spinner.gif在 HTML 页面上显示一个 -file 以向用户显示内容正在加载。内容完全加载后，我隐藏 spinner-image 并显示内容（使用 jQuery）。

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

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

所以这就是我的 HTML 文件中的内容（不需要<head>-tag）：

<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-directory 的根目录中，但上面的代码只显示了 alt-text。我也尝试使用/data/spinner.gif作为来源，没有运气。

那么，如何从/data-directory 加载图像？

4

2 回答 2

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的 URL 和图像的 URL 是resource://something-related-to-add-on-id-data/spinner.gif相对 URL 起作用的原因。像这样的 URL 是/data/spinner.gif行不通data的，插件编译后没有目录。

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

至于常规网页（不属于插件）：他们所能做的就是“猜测” URL。您知道/data/spinner.gif您的附加组件映射到哪个 URL。因此，您可以简单地在网页中使用该 URL。问题：URL 可能会在未来的 SDK 版本中发生变化。

于 2011-09-18T15:22:06.413 回答
0

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

从 main.js 在控制台中预览 url：

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}

要从内容脚本查看 url：

alert(self.options.image_url);

让我知道这是否适合你。

于 2014-06-10T00:02:46.310 回答