fix(security): Use import.meta.hot for communication with Vite 6.0.9+ (and 5.4.14+) dev server
#1411
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for creative-fairy-df92c4 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
aklinker1
commented
Feb 8, 2025
packages/wxt/build.config.ts
Outdated
Comment on lines
40
to
41
| 'http://localhost:3000/@id/wxt/background-client', | ||
| 'http://localhost:3000/@vite/client', |
There was a problem hiding this comment.
TODO:
Suggested change
| 'http://localhost:3000/@id/wxt/background-client', | |
| 'http://localhost:3000/@vite/client', | |
| '__DEV_SERVER_ORIGIN__/@id/wxt/background-client', | |
| '__DEV_SERVER_ORIGIN__/@vite/client', |
aklinker1
commented
Feb 8, 2025
| @@ -123,7 +127,7 @@ | |||
| "publish-browser-extension": "^2.2.2", | |||
| "scule": "^1.3.0", | |||
| "unimport": "^3.13.1", | |||
| "vite": "^5.0.0 || ^6.0.0", | |||
| "vite": "^5.0.0 || <=6.0.8", | |||
There was a problem hiding this comment.
Suggested change
| "vite": "^5.0.0 || <=6.0.8", | |
| "vite": "^5.0.0 || ^6.0.0", |
aklinker1
commented
Feb 8, 2025
Comment on lines
+1
to
6
| if (import.meta.hot) { | ||
| import.meta.hot.on('wxt:reload-page', (event) => { | ||
| // "popup.html" === "/popup.html".substring(1) | ||
| if (event.detail === location.pathname.substring(1)) location.reload(); | ||
| }); | ||
| } |
aklinker1
commented
Feb 8, 2025
| }; | ||
|
|
||
| const wxtBackgroundClientUrl = `http://${server.hostname}:${server.port}/@id/wxt/background-client`; | ||
| console.log({ wxtBackgroundClientUrl }); |
aklinker1
commented
Feb 8, 2025
| } | ||
| }); | ||
| } | ||
| console.log('__WXT_BACKGROUND_CLIENT_IMPORT__'); |
import.meta.hot for communication with Vite 6.0.9+ dev serverimport.meta.hot for communication with Vite 6.0.9+ (and 5.4.14+) dev server
|
Status update. I should have it all working, but for some reason I can't load the vite client from the server, debugging this. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
WXT previously relied on connecting to Vite's dev server manually, instead of using
import.meta.hot. Vite 6.0.9 introduced several changes that broke WXT's dev mode:Vite introduced a randomly generated auth token to ensure of your application can access it
This broke WXT because WXT doesn't know what the token is. While it is possible to get the token from the dev server, it would take quite a bit of refactoring to route the token into the background script during development, so I'm not gonna do that. Instead, WXT now uses
import.meta.hot.For MV2, WXT dynamically imports the
vite/clientpackage from the dev server. For MV3, we're updating dev mode to always setbackground.type: "module"in the manifest.Warning
This is technically a breaking change to dev mode, however, it should have no effect. WXT will continue to bundle the background as IIFE if you don't specify
type: "module"in your entrypoint.Manual Testing
Install the new version from pkg.pr.new and spin up your extension in dev mode:
Related Issue