-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 回答