在Chrome擴展插入圖像

Question

我想知道如何在Chrome擴展插入圖像。

<img id="image" src="logo.png" /> 

我將該html標籤正確地插入網站，但自然無法加載該logo.png圖像。

關於如何修改manifest.json的任何想法？

Answer 1

該問題有兩種可能的原因。

1. 您正在用src="logo.png"注射圖像。插入的圖片元素成爲頁面的一部分，因此瀏覽器不會嘗試從加載來自擴展名的圖像。
   要解決此問題，請使用chrome.extension.getURL('logo.png');獲取資源的絕對URL。

2. "manifest_version": 2在清單文件中啓用。這會默認禁用所有資源以供外部使用。出現此錯誤時，出現在控制檯以下消息：

   不允許加載本地資源：鉻：//gbmfhbpbiibnbbgjcoankapcmcgdkkno/logo.png

   爲了解決這個問題，將資源添加到白名單，即"web_accessible_resources"清單文件：

   ..., 
       "web_accessible_resources": ["logo.png"] 
   }