將圖片嵌入到Chrome擴展程序

我正在構建Google Chrome瀏覽器擴展程序，該擴展程序將HTML注入到真實網頁中。注射還包含圖像，現在我想知道如何引用擴展名內的圖像。到目前爲止，我只能在使用http://example.com/myimage.png的服務器上引用它們。但是這需要注意，直到他們加載。將圖片嵌入到Chrome擴展程序

是否可以在擴展中打包圖像並在瀏覽器中的任何位置引用它們？怎麼樣？

感謝您的任何幫助。

來源

2012-06-02 Kaspi

您可以使用chrome.extension.getURL()（docs）獲取內部擴展文件夾URL。將它傳遞給圖像相對路徑，您將獲得完整的URL。

例如，如果你同時在擴展文件夾名爲「圖片」的文件夾，並在其名爲「profile.jpg」的圖像，你可以通過做其注入的頁面的正文：

var image = document.createElement("img"); 
image.src = chrome.extension.getURL("images/profile.jpg"); 
document.getElementsByTagName("body")[0].appendChild(image);

此外，請檢查web_accessible_resources清單屬性documented here - 您可能需要聲明資源以使它們可用於此方法。

來源

2012-06-02 22:43:00

我早些時候嘗試過。它返回'chrome-extension：// invalid /'，儘管只使用了一個空字符串：chrome.extension.getURL（''）返回一個正確的擴展根路徑。我不明白。：/ – Kaspi

@Kaspi：因爲您必須將函數傳遞給擴展文件夾中的文件夾/文件的相對路徑，並且它將形成完整的URL。所以不傳遞任何東西不是一個選項，而傳遞一個空字符串會給你的擴展的根文件夾的URL。 –

雖然根路徑似乎沒有改變。如果我只需在常規地址欄中輸入根路徑並添加圖像名稱，則圖像將正確顯示。 – Kaspi

將圖片嵌入到Chrome擴展程序

回答

相關問題