外部ファイルChrome拡張子

Question

私の拡張機能のコンテンツスクリプトで画像を参照しようとしています。私はWebアクセス可能なリソースで宣言しました。私はchrome.extension.getURL（）を使用しています。ここで何が間違っているのか分かりません。画像はaltのみ表示されていません。

{ 
"manifest_version": 2, 
"name": "Test Image", 
"description": "", 
"version": "1.0", 
"content_scripts": [ 
{ 
    "matches": ["<all_urls>"], 
    "js": ["script.js"], 
    "web_accessible_resources":["images/Image.png"] 
} 
] 
} 

、ここでは私のjavascriptが

window.onload = function() { 
var div = document.createElement("div"); 
div.innerHTML = '<img alt="image" src="">'; 
div.src = chrome.extension.getURL("images/image.png"); 
div.style.visibility = "visible"; 
div.style.position = "absolute"; 
div.style.zIndex = "20000"; 
div.className = "jack"; 
div.id = "jack"; 
document.body.appendChild(div); 

Answer 1

1である：ここで

は私のマニフェストファイルでウェブアクセス可能なリソースコンテンツスクリプトのサブセットではありません。

{ 
    "manifest_version": 2, 
    "name": "Test Image", 
    "description": "", 
    "version": "1.0", 
    "content_scripts": [{ 
    "matches": ["<all_urls>"], 
    "js": ["script.js"] 
    }], 
    "web_accessible_resources":["images/Image.png"] 
} 

2A ：div.srcではなく、img.srcを設定する必要があります。高速なソリューション：

div.firstElementChild.src = chrome.extension... 

2B：HTMLのDOMを操作するためのより良い方法：

var img = div.appendChild(document.createElement("img")); 
img.setAttribute("alt", "image"); 
img.setAttribute("src", chrome.extension.getUrl("images/Image.png"));