如何訪問數據目錄中的HTML

-1

在Mozilla附加組件-SDK的"Simple Addon"-tutorial，它讀取：如何訪問數據目錄中的HTML

/data - 包含包括資源，如圖標或HTML文件，以及任何內容腳本與您的插件。您可以使用附加SDK的自我模塊從附加代碼中訪問數據子目錄的內容。

在我的附加組件中，我使用了一個HTML頁面來顯示panel中的一些內容。由於內容由內容腳本加載，我想在HTML頁面上顯示spinner.gif-文件以向用戶顯示正在加載內容。內容完全加載後，我隱藏微調圖像並顯示內容（使用jQuery）。

我現在的問題是，我沒有任何線索如何將圖像嵌入到HTML頁面中。我面臨的問題是我不知道圖像文件的路徑。

我知道您在AddOn腳本中使用self模塊來訪問/data目錄，但是如何從純文本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目錄，但上面的代碼只顯示alt-text。我也嘗試使用/data/spinner.gif作爲源，沒有運氣。

那麼，如何從/data目錄加載圖像呢？

來源

2011-09-18 Lukas Knuth

我試着重現你的問題。我創建了一個微不足道的增加和添加以下代碼的腳本文件到/lib目錄：

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

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

現在附加將被安裝後立即打開一個標籤。我用你的問題的源代碼和一個圖像文件/data/spinner.gif創建了一個文件/data/test.html。在安裝插件後，打開一個新選項卡並且圖像在那裏 - 很漂亮。請注意，該標籤的網址爲resource://something-related-to-add-on-id-data/test.html，圖片的網址爲resource://something-related-to-add-on-id-data/spinner.gif，這就是相對網址起作用的原因。像/data/spinner.gif這樣的URL將無法工作，編譯加載項後沒有data目錄。

現在我想你是問你如何從內容腳本中找到這個URL？事實是，內容腳本本身沒有必要的API。但它可以接收來自附加組件的消息。請參閱the documentation中的「使用內容腳本進行通信」部分。您的內容腳本需要聲明附加組件中的函數onMessage和onAttach才能實際發送此消息。如果您想傳輸更多數據，則消息負載可以是這一個URL或更復雜的數據結構。對於常規網頁（不屬於附加組件）：他們所能做的只是「猜測」URL。您知道什麼網址/data/spinner.gif映射到您的加載項。所以你可以簡單地在網頁中使用該URL。問題：URL可能在未來的SDK版本中發生變化。

來源

2011-09-18 15:22:06

數據文件夾在main.js中可用，您可以將該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}

從內容查看網址腳本：

alert(self.options.image_url);

讓我知道，如果這對你有用。

來源

2014-06-10 00:02:46 illusivetech

如何訪問數據目錄中的HTML

回答

相關問題