Question

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

这是我的清单文件：

{
"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：Web可访问资源不是内容脚本的子集：

{
  "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") );

外部文件Chrome扩展程序

1 个答案: