0

I have a style sheet which is injected into a page. The style sheet has:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url(fonts/KFOkCnqEu92Fr1MmgVxIIzQ.woff) format('woff');
}

The problem I have is I need it to look at the fonts in my local (Chrome extension) resources. I have this working for JS files I include by using chrome.extension.getURL(src) but I can't do that for the html content I've injected into the page.

I have the same issue with images as well as the img tag is on the page as <img src="img/some-image.png" /> so again, it's looking for the img on the website the html is injected into.

Any ideas how I can get around this?

Note: The html content I'm injecting into a page is a VueJS SPA so it's not individual image tags etc.

Edit: For now, I have a nasty work around:

loadScript('www/app.js', () => {
    let images = document.getElementsByTagName('img')
    for (let i = 0, l = images.length; i < l; i++) {
      images[i].src = chrome.extension.getURL('www' + '/' + images[i].src.substring(images[i].src.indexOf('img/')))
    }
  })
webnoob
  • 15,747
  • 13
  • 83
  • 165
  • Either use [@@extension_id](https://developer.chrome.com/extensions/i18n#overview-predefined) as shown in the docs or switch to embedding the fonts as data:// URI. – wOxxOm Jul 21 '19 at 04:00
  • I know how to get the URL (`chrome.extension.getURL()` is the recommended way), the problem is setting it on the elements automatically... I'm going to investigate a way to do this using my webpack chain instead - we'll see. – webnoob Jul 21 '19 at 09:23
  • Sounds like we misunderstand each other. The method I suggested is to be used inside stylesheets, it's not related to JS. – wOxxOm Jul 21 '19 at 09:29
  • Right, well the issue I have is that I am compiling a VueJS application (Quasar framework) and injecting that into any web page (as configured by the `content_scripts.matches`). In that app, the URLs are `img/something.png` but when they're injected I need that URL to be a chrome-extension one. – webnoob Jul 21 '19 at 09:51
  • OK so I can't use webpack because I can't generate my own chrome extension ID. I did get it working by using the webpack publicPath but it's for naught because the ID is generated automatically. Content replacement it is... – webnoob Jul 21 '19 at 10:42
  • You can generate the extension id, see [this answer](https://stackoverflow.com/a/23877974). – wOxxOm Jul 21 '19 at 11:11
  • Right wow ... Looks like fun .. Thanks for that, I'll see what I can do. – webnoob Jul 21 '19 at 12:49

0 Answers0