如何在HTML中访问数据目录

How to access the data-directory in HTML

本文关键字：访问 数据目录 HTML      更新时间：2023-09-26

在Mozilla Addon- sdk的"Simple Addon"-教程中，它是这样写的:

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

在我的Add-On中，我使用html页面在panel中显示一些内容。由于内容是由内容脚本加载的，我想在html页面上显示一个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 -目录加载图像呢?

我试图重现您的问题。我创建了一个简单的附加组件，并在/lib目录中添加了一个脚本文件，其中包含以下代码:

const data = require("self").data;
var tabs = require("tabs");
tabs.open(data.url("test.html"));

现在插件将在安装后立即打开一个选项卡。我创建了一个文件/data/test.html与源代码从你的问题和图像文件/data/spinner.gif。安装插件后，一个新的选项卡打开，图像就在那里-漂亮。请注意，选项卡的URL是resource://something-related-to-add-on-id-data/test.html，图像的URL是resource://something-related-to-add-on-id-data/spinner.gif，这就是相对URL有效的原因。像/data/spinner.gif这样的URL不能工作，在加载组件编译后没有data目录。

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

对于普通网页(不属于插件):他们所能做的就是"猜测"URL。您知道/data/spinner.gif为您的附加组件映射到的URL。所以你可以简单地在网页中使用那个URL。注意:URL可能会在未来的SDK版本中更改。

data文件夹在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);
相关文章：