Как получить доступ к каталогу данных в HTML - PullRequest
Новая
       4

Как получить доступ к каталогу данных в HTML

0 голосов
/ 18 сентября 2011

В учебнике "Простое дополнение" пакета Mozilla Addon-SDK написано:

/data - содержит ресурсы, такие как значки или файлы HTML, а также любые скрипты контента, включенные в ваше дополнение. Вы можете получить доступ к содержимое подкаталога данных из кода вашего дополнения, используя собственный модуль SDK дополнения.

В моем дополнении я использую HTML-страницу для отображения некоторого содержимого в panel. Поскольку содержимое загружается с помощью Content-Script, я хочу отобразить файл spinner.gif на HTML-странице, чтобы показать пользователю, что содержимое загружается. После того, как содержимое полностью загружено, я скрываю изображение счетчика и отображаю содержимое (используя jQuery).

Моя проблема сейчас в том, что я понятия не имею, как встроить изображение в HTML-страницу. Проблема в том, что я не знаю путь к файлу изображения.

Я знаю, что вы используете self -модуль в AddOn-Script для доступа к /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 -каталога, но в приведенном выше коде показан только альтернативный текст. Я также попытался использовать /data/spinner.gif в качестве источника, не повезло.

Итак, как мне загрузить изображение из /data -каталога?

Ответы [ 2 ]

1 голос
/ 18 сентября 2011

Я попытался воспроизвести вашу проблему. Я создал тривиальное дополнение и добавил файл сценария со следующим кодом в каталог /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-адрес работает. URL, такой как /data/spinner.gif, не будет работать, после компиляции надстройки нет каталога data.

Теперь я полагаю, что вы спрашиваете, как найти этот URL из скрипта контента? Дело в том, что сам скрипт контента не имеет необходимого API для этого. Но он может получать сообщения от вашего дополнения. См. Раздел «Связь со сценариями содержимого» в документации . Ваш скрипт контента должен объявить функцию onMessage, а функция onAttach в надстройке должна фактически отправлять это сообщение. Полезная нагрузка сообщения может быть одним URL или более сложной структурой данных, если вы хотите передать больше данных.

Что касается обычных веб-страниц (не принадлежащих надстройке): все, что они могут сделать, это «угадать» URL. Вы знаете, какой URL /data/spinner.gif отображается для вашего дополнения. Таким образом, вы можете просто использовать этот URL на веб-странице. Подвох: URL может измениться в будущих версиях SDK.

0 голосов
/ 10 июня 2014

Папка с данными доступна в main.js, и вы можете передать этот URL в качестве опции скрипта содержимого.

Для предварительного просмотра URL в консоли из main.js: 

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);

Дайте мне знать, если это работает для вас.

...