如何访问 HTML 中的数据目录

发布于 2024-12-05 02:55:16 字数 1238 浏览 0 评论 0原文

在 Mozilla Addon-SDK 的“Simple Addon”-tutorial，内容如下：

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

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

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

我知道您在 AddOn 脚本中使用 self 模块来访问 /data 目录，但如何从纯 HTML 文件或内容中执行此操作- 文档中未提及脚本。

这就是我的 HTML 文件中的内容（不需要标签）：

<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 目录的根目录中，但上面的代码仅显示替代文本。我还尝试使用 /data/spinner.gif 作为源，但没有成功。

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

原文

In the "Simple Addon"-tutorial of the Mozilla Addon-SDK, it reads:

/data - contains resources such as icons or HTML files, as well as
any content scripts included with your add-on. You can access the
content of the data subdirectory from within your add-on's code using
the Add-on SDK's self module.

In my Add-On, I use a HTML-page to display some contents in a panel. Since the contents are loaded by a Content-Script, i want to display a spinner.gif-file on the HTML-Page to show the user that the contents are being loaded. After the contents are fully loaded, I hide the spinner-image and display the contents (using jQuery).

My problem now is, that i don't have any clue how to embed the image in the HTML-page. The problem I'm facing is that I don't know the path to the image-file.

I know you use the self-module in an AddOn-Script to access the /data-directory, but on how to do this from a plain HTML-file or a Content-Script is not mentioned in the docs.

So this is what I have in my HTML-File (there is no need for the <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>

Both this HTML-page and the image (spinner.gif) are located in the root of the /data-directory, but the above code only shows the alt-text. I also tried using /data/spinner.gif as the source, no luck.

So, how do I load an image from the /data-directory?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

提赋 2024-12-12 02:55:16

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

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

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

现在，该附加组件将在安装后立即打开一个选项卡。我使用您问题中的源代码和图像文件 /data/spinner.gif 创建了一个文件 /data/test.html 。安装插件后，会打开一个新选项卡，图像就在那里 - 很漂亮。请注意，选项卡的 URL 为 resource://something-lated-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。您知道您的附加组件映射到什么 URL /data/spinner.gif。因此您可以简单地在网页中使用该 URL。问题是：在未来的 SDK 版本中，URL 可能会发生变化。

I tried reproducing your issue. I've created a trivial add-on and added a script file with the following code to the /lib directory:

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

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

Now the add-on will open a tab immediately after being installed. I created a file /data/test.html with the source code from your question and an image file /data/spinner.gif. And after the installation of the add-on a new tab opens and the image is there - beautiful. Note that the URL of the tab is resource://something-related-to-add-on-id-data/test.html and the URL of the image is resource://something-related-to-add-on-id-data/spinner.gif which is why the relative URL works. A URL like /data/spinner.gif wouldn't work, there is no data directory after the add-on has been compiled.

Now I guess that you are asking how you would find this URL from a content script? Fact is, the content script itself doesn't have the necessary API for that. But it can receive messages from your add-on. See "Communicating With Content Scripts" section in the documentation. Your content script needs to declare a function onMessage and the onAttach function in the add-on needs to actually send this message. Message payload can be this one URL or some more complicated data structure if you want to transfer more data.

As to regular web pages (not belonging to the add-on): all they can do is "guessing" the URL. You know what URL /data/spinner.gif is mapped to for your add-on. So you can simply use that URL in a web page. The catch: the URL might change in future SDK versions.

回复收藏 0 原文

油饼 2024-12-12 02:55:16

数据文件夹在 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);

请告诉我这是否适合您。

The data folder is available in main.js and you can pass that url as a content script option.

To preview the url in the console from main.js:

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

To pass the url to the content script in main.js:

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

To view the url from the content script:

alert(self.options.image_url);

Let me know if that works for you.

回复收藏 0 原文

~没有更多了~

关于作者

草莓酥

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

如何访问 HTML 中的数据目录

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

離殇

小姐丶请自重

Aik

国产ˉ祖宗

猥琐帝

半仙

友情链接

如何访问 HTML 中的数据目录

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

離殇

小姐丶请自重

Aik

国产ˉ祖宗

猥琐帝

半仙

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。