Search code examples
google-chrome-extension

Linking to local files within css file

I'm attempting to completely overhaul a websites css and possibly html and just trying to find a way that works for me.

The problem is that within an extension local css file I'm also trying to define a font url via extension local files.

manifest.json:

{
    "name": "Test theme",
    "description": "Custom theme for Darkmass.gg.",
    "version": "0.0.1",
    "manifest_version": 3,
    "content_scripts": [
        {
            "matches": [
                "https://*.example.com/*"
            ],
            "css": [
                "./css/main.css"
            ],
            "js": [
                "./js/app.js"
            ],
            "run_at": "document_end"
        }
    ],
    "web_accessible_resources": [
        {
            "resources": [ "./media/*" ],
            "matches": [ "https://*.example.com/*" ]
        }
    ]
}

main.css:

@font-face {
    font-family: NFLDolph;
    src: url('chrome-extension://ipbedjgbhlnngdddbaojpnaicdpifmgd//media/fonts/NFLDOLPH.TTF');
}

The problem clearly lies with the source url for the NFLDolph font-face, if I just leave it as ./media/fonts/NFLDOLPH.ttf than it just tries to load the font from example.com instead of locally.

And here is the error I get: Denying load of chrome-extension://ipbedjgbhlnngdddbaojpnaicdpifmgd//media/fonts/NFLDOLPH.TTF. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

Solution

  • I made a sample.

    enter image description here

    manifest.json

    {
  "name": "NFLDolph",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "css": [
        "main.css"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "font/*.TTF"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ]
}

    main.css

    @font-face {
  font-family: NFLDolph;
  src: url("chrome-extension://__MSG_@@extension_id__/font/NFLDOLPH.TTF");

}
* { font-family: NFLDolph, serif }