Home/ Questions/Q 6580675
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:03:27+00:00

In the Simple Addon-tutorial of the Mozilla Addon-SDK, it reads: /data – contains resources

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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