javascript - 如何在 HTML 标签中使用 chrome.extension.geturl() 方法？

Question

我想从扩展加载本地图像。我编写以下代码来加载图像。但它无法加载图像。

$('.aAU').append('<div id="DivScroll"><img id="imgSlider" width="25px" src=chrome.extension.getURL("images/slider.png") /></div>');

该文件也存在于该位置。

当我使用开发人员工具时，它显示 img 标签如下

<img id="imgSlider" src="chrome.extension.getURL('images/slider.png')">

如果我使用如下静态路径，那么它会显示图像

<img id="imgSlider" src="chrome-extension://ccpdgakpdgiklccnpnihmidbjnacgkch/images/slider.png">

chrome.extension.getURL()提供在 HTML 标签中使用方法的任何解决方案。

Answer 1

您的资源是否在清单文件中注册，如此处所示

{
  ...
"web_accessible_resources": [
    "images/my-awesome-image1.png",
    "images/my-amazing-icon1.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js"
  ],
  ...
}

然后，这些资源将通过 URL 在网页中可用chrome-extension://[PACKAGE ID]/[PATH]，可以使用该chrome.extension.getURL方法生成。

您是否尝试通过 Java Script 而不是将 src 设置为以下代码

<img id="imgSlider" src="chrome.extension.getURL('images/slider.png')">

Answer 2

    '<img id="imgSlider" width="25px" src='+chrome.extension.getURL("images/slider.png")+' />'

试试这个它应该可以解决问题