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

Question

I am building a chrome extension and hoping to customize it by adding icons.

The extension is using vanilla JS, so we create our HTML elements using js. I have been able to use imported .png icons in the HTML popup, but when I am in my js file and try to set the img src to the correct path of the .png I get an error that looks like chrome is adding my path to the end of the current URL. Obviously that URL doesn't exist, so I error out and never see the icon.

Why can't I do <img src="C:/localfile.jpg">? sounds similar to what I am trying to do, but I don't want the image saved on my drive anywhere, I want it from within the project. Adding file:// or e:// before the path didn't work anyway. I do see a Not allowed to load local resource: error when I prepend with file:// so maybe it really is a security issue?

Is it simply going to be a security concern to add an icon to my buttons? anyone know of a work around? Maybe someone knows of an online library where I could grab a url of an icon similar to https://fontawesome.com/icons/exclamation-circle?style=solid (I haven't been able to create an element from that html button either)

Ideally, I would be able to use the icon png my product team provided. I am starting general just trying to get the icon to show up on the page where I have other elements appended. Here is what I have done to add the icon so far:

JS file:

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

when visiting this product page https://www.target.com/p/general-mills-cheerios-honey-nut-breakfast-cereal-19-5oz/-/A-14765766#lnk=sametab on target.com the above code results in this 404 error: GET https://www.target.com/images/alert_small.png 404

EDIT: Part of my problem has been that I didn't add the icon resource to my manifest.json

I tried adding a top level icon section like this https://developer.chrome.com/docs/extensions/mv3/manifest/icons/ Looks like that didn't change my error, nor did trying the suggested web_accessible_resources

Current 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"
  }
}

I have been trying setting the src to "/images/alert_small.png" (GET https://www.target.com/images/outline_info_black_24dp.png 404) and to "file:///images/alert_small.png" (Not allowed to load local resource: file:///images/small_alert.png)

Got it! I didn't find helpful chrome docs, but the mozilla docs were helpful! Difference being I ran `chrome.runtime.getURL("image.png")` instead of `browser.runtime...` https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources Thanks for the push in the right direction! — Bmerkle, Apr 30 '21 at 04:20

Bmerkle · Accepted Answer · 2021-04-30T14:37:40.630

thanks to the help of wOOxxOm I got the icon to show up. Changes in my manifest.json file were pretty straight forward, helped out by the answer of this question 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"
  }
}

in my js file I created the icon element and assigned the source like this:

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

mozilla docs were helpful for this part (but obviously for a chrome extension use chrome.runtime... instead of browser.runtime... https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources

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

1 Answers1