search

MrOtherGuy / fx-autoconfig

Load custom javascript in browser context
Mozilla Public License 2.0
164 stars 10 forks source link

Where should I put the image file to load in CSS #47

Closed alixTal closed 5 months ago

alixTal commented 5 months ago

Hi, I'm trying to change an extension icon, I put my icon in CSS folder, but it won't load the image

this is the CSS:

#_3c078156-979c-498b-8990-85f7987dd929_-BAP {
  --webextension-toolbar-image-light: url("icon.svg") !important;
}

When I check the inspector, it's showing the image path as this chrome://userstyles/skin/icon.svg where should I put the image in order to Firefox can load it?

MrOtherGuy commented 5 months ago

Let me clarify, are these correct?

  1. You have a custom css file in CSS folder - lets call it custom_style.uc.css
  2. You have an custom image named icon.svg that you want to use from custom_style.uc.css

If you use the image file like in your example url("icon.svg") then it needs to be saved to the CSS directory. I belive that should work fine if you want to do it that way. But my original intention in this kind of scenario would be to put custom assets like images into the resources directory and then refer to it as url("chrome://userchrome/content/icon.svg")

alixTal commented 5 months ago

Thank you, putting image in resources directory and chrome://userchrome/content path did the job. Putting image at same directory of my_custom_css_file (both in CSS folder) and url("icon.svg") didn't work for me.