如何使用JS在项目中将img src设置为png文件

Question

我正在构建一个 chrome 扩展，并希望通过添加图标对其进行自定义。

扩展使用的是 vanilla JS，因此我们使用 js 创建 HTML 元素。我已经能够在 HTML 弹出窗口中使用导入的 .png 图标，但是当我在我的 js 文件中并尝试将 img src 设置为 .png 的正确路径时，我得到一个看起来像 chrome 正在将我的路径添加到当前 URL 的末尾。显然 URL 不存在，所以我出错了，再也看不到图标了。

Why can't I do <img src="C:/localfile.jpg">? 听起来和我想做的很相似，但我不想将图像保存在我的驱动器上的任何地方，我希望它来自项目中。在路径前添加 file:// 或 e:// 无论如何都不起作用。当我在前面加上 file:// 时，我确实看到了 Not allowed to load local resource: 错误，所以也许这真的是一个安全问题？

将图标添加到我的按钮是否只是一个安全问题？有人知道解决方法吗？也许有人知道一个在线图书馆，在那里我可以获取一个类似于 https://fontawesome.com/icons/exclamation-circle?style=solid 的图标的 url（我也无法从那个 html 按钮创建一个元素）

理想情况下，我可以使用我的产品团队提供的图标 png。我开始一般只是试图让图标显示在我附加了其他元素的页面上。到目前为止，这是我为添加图标所做的工作：

JS文件：

const allDivs = document.getElementsByTagName("div");
const buttonContainerNode = allDivs[0].firstChild

let alertIcon = document.createElement("img");
alertIcon.src = "file:///images/alert_small.png"
buttonContainerNode.appendChild(alertIcon);

在 target.com 上访问此产品页面 https://www.target.com/p/general-mills-cheerios-honey-nut-breakfast-cereal-19-5oz/-/A-14765766#lnk=sametab 时，上述代码会导致此 404 错误：获取 https://www.target.com/images/alert_small.png 404

编辑：我的部分问题是我没有将图标资源添加到我的 manifest.json

我试过像这样添加顶级图标部分 https://developer.chrome.com/docs/extensions/mv3/manifest/icons/ 看起来这并没有改变我的错误，也没有尝试建议的 web_accessible_resources

当前 manifest.json:

  "manifest_version": 2,
  "name": "extension",
  "version": "0.1",
  "description": "A nutritional claims checker ",
  "content_scripts": [
    {
      "css": ["./content.css"],
      "matches": ["*://www.target.com/*"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "web_accessible_resources": ["/images/small_alert.png"],
  "permissions": ["tabs", "webNavigation", "*://www.target.com/*"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Demo extension",
    "default_icon": "/images/logoE4572E.png",
    "default_badge": "extension"
  }
}

我一直在尝试将 src 设置为 "/images/alert_small.png" (GET https://www.target.com/images/outline_info_black_24dp.png 404) 和 "file:///images/alert_small.png"（不允许加载本地资源：file:///images/small_alert.png）

Answer 1

感谢 wOOxxOm 的帮助，我得到了显示的图标。我的 manifest.json 文件中的更改非常简单，得到了这个问题 How to migrate manifest version 2 to v3 for chrome extension?

的回答的帮助

"manifest_version": 2,
  "name": "extension",
  "version": "0.1",
  "description": "A nutritional claims checker ",
  "content_scripts": [
    {
      "css": ["./content.css"],
      "matches": ["*://www.target.com/*"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "web_accessible_resources": ["*.png"],
  "permissions": ["tabs", "webNavigation", "*://www.target.com/*"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Demo extension",
    "default_icon": "/images/logoE4572E.png",
    "default_badge": "extension"
  }
}

在我的 js 文件中，我创建了图标元素并像这样分配了源：

    const alertIcon = document.createElement("img");
    const source = chrome.runtime.getURL("images/small_alert.png");
    alertIcon.src = source;
    iconDiv.appendChild(alertIcon);

mozilla 文档对这部分很有帮助（但显然对于 chrome 扩展使用 chrome.runtime... 而不是 browser.runtime... https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources

如何使用JS在项目中将img src设置为png文件

How to set img src to png file in project using JS

javascript

google-chrome-extension