javascript - 外部文件 Chrome 扩展程序

Question

我正在尝试在我的扩展程序的内容脚本中引用图像。我已在我的网络可访问资源中声明了它。我正在使用 chrome.extension.getURL()。不知道这里出了什么问题。图像不显示，仅显示 alt。

这是我的 list 文件:

{
"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:您应该设置img.src，而不是div.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") );