Google Chrome Extensions - Can't Load Local Images With Css

Google Chrome Extensions - Can't load local images with CSS

Your image URL should look like chrome-extension://<EXTENSION_ID>/image.jpg

You would be better off replacing css through javascript. From docs:

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;

Cannot open local file - Chrome: Not allowed to load local resource

We use Chrome a lot in the classroom and it is a must to working with local files.

What we have been using is "Web Server for Chrome". You start it up, choose the folder wishing to work with and go to URL (like 127.0.0.1:port you chose)

It is a simple server and cannot use PHP but for simple work, might be your solution:

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

Test Local Background Image on Live Site with Chrome Dev Tools?

You can replace the url of the background image in the Elements panel with the url of the image you wish to try. Check this link to see how that is done.

This change will show effect immediately in your browser window. As Johan Linder mentioned, you will have to host the image somewhere in case you have the image on your computer.

nate wilton's answer correctly points out how to do this using a Chrome extension.

Why i am getting chrome-extension://invalid/ error when trying to load local font

We can use chrome.runtime.getURL API to get the URL of our resource and then we can provide that URL in src of font-face.

const url = chrome.runtime.getURL('assets/ClashGrotesk-Variable.ttf')

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'ClashGrotesk-Variable';
    src: url(${url});
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
  }

  html body {
    font-family: 'ClashGrotesk-Variable';
  }
`

References

• Google Chrome extension relative path
• https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL

---

Related Topics