Custom Font Support
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 10.5k
- Forks
- 564
- PR merge metrics
- No merged PRs in 30d
Description
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:
-
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:"
-
-
When loaded from the dev server during development,
chrome-extension://__MSG_@@extension_id__doesn't work for the popup because it's loaded overlocalhost, not a file from the extension's directory.
-
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:orwxt-extension:, and settled onwxt-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
- If someone is using
- 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 #1703
- Related to #1635
What are the alternatives?
Everyone writes their own vite plugins per-project to make these changes.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No files or tests are named; start by tracing the Vite build and development-server handling described in the request. Done means documenting the wxt-extension protocol, handling browser-specific protocols, transforming URLs in builds and development, and addressing unresolved asset warnings.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vite
- Domain
- build-system, devtools
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100