Custom Font Support

[aklinker1]

Feature Request

I'm creating a custom fonts example, and while it works just fine in production for Chrome, there's a few problems that make adding custom font's not easy:

1. WXT doesn't automatically convert URLs in CSS files to use the target browser's extension protocol

   • url("chrome-extension://__MSG_@@extension_id__/...") works for Chrome, but not firefox:

     Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at chrome-extension://7b1c5813-0637-465b-9514-c36d236e4e43/fonts/poppins-v23-latin-regular.woff2. (Reason: CORS request not http).
     
     downloadable font: failed to start download (font-family: "Poppins" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: chrome-extension://7b1c5813-0637-465b-9514-c36d236e4e43/fonts/poppins-v23-latin-regular.woff2 
     

   • Here's the protocols for each browser:

     Browser	Protocols
     Chrome	"chrome-extension:"
     Firefox	"moz-extension:"
     Edge	"chrome-extension:"
     Safari	"safari-web-extension:"
     Chromium	"chrome-extension:"

2. When loaded from the dev server during development, chrome-extension://__MSG_@@extension_id__ doesn't work for the popup because it's loaded over localhost, not a file from the extension's directory.
   

3. Vite logs a warning when including any asset with chrome-extension:// in it.

   chrome-extension://__MSG_@@extension_id__/fonts/poppins-v23-latin-regular.woff2 referenced in chrome-extension://__MSG_@@extension_id__/fonts/poppins-v23-latin-regular.woff2 didn't resolve at build time, it will remain unchanged to be resolved at runtime
   

   • /* @vite-ignore */ does not fix this, or I haven't put it in the correct place.

So to fix these problems, we need to:

• Document the new wxt-extension: protocol and how to use it
  • If someone is using moz-extension:, chrome-extension:, etc, respect it.
  • I debated myself for what the protocol should be, web-extension: or wxt-extension:, and settled on wxt-extension: since it will be easy to find/replace with regex, don't need to worry about future protocols or partial matches with existing ones. Downside is that it's non-standard and hard to migrate away from
• During vite builds, replace wxt-extension: with the protocol of the target browser.
• During development, strip any wxt-extension://__MSG_@@extension_id__ prefixes from URLs so they are served as absolute paths from the dev server
• Figure out how to silence the unresolved asset warnings

Is your feature request related to a bug?

• This will close Add example for using custom fonts in content scripts #1703
• Related to feat: Add @font-face to be processed by splitShadowRootCss #1635

What are the alternatives?

Everyone writes their own vite plugins per-project to make these changes.