Chrome 擴展程序：將圖像添加到 DOM

Question

據我檢查，我找不到答案（Internet 和 stackoverflow）：當您擁有 chrome 擴展程序並且 content.js 中的代碼將一些 HTML 代碼插入網頁/DOM 時，您如何添加圖像？

我嘗試了以下操作，但沒有奏效 - 圖像出現，但已損壞（是否必須加載？如果是，如何加載？）。

document.getElementById("header").insertAdjacentHTML("afterend", "<div><img src='myimage.jpg'>This text has been added</div>"); 

編輯：（剛剛注意到）

1- 在 Chrome 中使用 Inspect 測試擴展程序時，IMG 標簽被很好地注入，但問題來自這樣一個事實，即圖像 URL 類似於http://www.example.com/myimage.jpg很明顯 myimage 不是在example.com上！ 那么我怎樣才能讓它在擴展而不是網絡服務器中找到呢？

2- 在下面的答案之一中， runtime.getURL應該在哪里，你在哪里可以看到它的輸出？

Answer 1

我在嘗試將圖像添加到 DOM 時遇到了同樣的問題。 執行以下操作修復了它：

假設我想將icon_128.png添加到 DOM

清單文件

{
  "web_accessible_resources": ["icon_128.png"]
}

js文件：

const img = document.createElement("img");
img.src = chrome.runtime.getURL("./icon_128.png");
document.body.appendChild(img);

Answer 2

好的，我找到了答案！ content.js IMG 標簽中缺少擴展路徑。 解決方案在這里解釋： http : //superuser.com/questions/224500/how-to-display-local-images-in-chrome-using-file-protocol

正確的代碼是：

<img src='chrome-extension://EXTENSION_ID/myimage.jpg'>

您的 chrome 擴展程序的 EXTENSION_ID 顯示在 chrome://extensions/ 頁面上的擴展程序中。 所以要繼續：
- 在 manifest.json 的“web_accessible_resources”中添加您的圖像
- 在 content.js 中使用上面的 IMG 語法標簽
- 您將在 chrome://extensions/ 頁面上找到您的 chrome 擴展 ID
- 重新加載擴展程序（在 chrome://extensions/ 頁面上）和您的網站以測試擴展程序。
您的圖像應該顯示。