-
Notifications
You must be signed in to change notification settings - Fork 197
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CORS policy blocks script access in development #971
Comments
managed to resolve by adding
|
now, we have another issue. |
i just encounter this same issue about websocket and take a lot time to find the reason. luckily, i found it. because of the update of vite. they add following this link
so the resolution is adding the legacy option to your vite config to close token verifying, then the problem solved. |
@liuwilliamBUPT you resolve my problem, thx you bro. You're really amazing! legacy: {
skipWebSocketTokenCheck: true,
} |
Amazing work @liuwilliamBUPT and @aqiongbei I'm going to reopen this because this is a significant breaking change in Vite that's affecting Chrome Extension development workflows. If you've updated Vite recently and your extension development suddenly stopped working, this is why. What's HappeningStarting with these Vite versions:
Vite changed default CORS policies in the dev server, which breaks CRXJS's development workflow. While this was done for security reasons, it's causing real issues for extension developers. Quick FixIf you need to get back to work immediately, you can add this to your vite.config.js: export default defineConfig({
// ... existing config
legacy: {
skipWebSocketTokenCheck: true
}
}) Long-term SolutionCRXJS should update to properly handle Vite's new WebSocket security requirements. Something like this might work: // vite.config.js
export default defineConfig({
server: {
cors: {
origin: [
'chrome-extension://', // Allow all extensions in dev
// Or for production, specific extension IDs:
// 'chrome-extension://<your-extension-id>'
]
}
}
}) Related Links
Would appreciate feedback from extension developers on these solutions, particularly if you're working with different Chrome extension configurations. |
Sorry for the breakage. For the websocket connection, passing the token here would probably work:
In other words, it can probably be fixed by updating this line to new WebSocket(`${socketProtocol}://${socketHost}?token=${token}`, 'vite-hmr') . You can get the token from config.webSocketToken in the configResolved hook.Ideally, it should not connect to the WebSocket server on its own and instead use import.meta.hot . I assume it's related to that fact that ESM support in extensions are not good. Is that the reason why it's connecting on its own?
For |
I have the same problem, even after adding the following to the vite.config.ts It seems that just when I add the "host_permissions": ["<all_urls>"] to the manifest the problem is solved. But obviously, I don't want to ask for this kind of permission. Asking for permissions to all websites get Google to take ages when reviewing every update + it can show a warning to users. Is there another way to solve this for now? |
@nechmads I believe it is possible to generate the manifest.json dynamically, where it is possible to configure this permission only when the environment is development, and then not add this line in the manifest.json of the build (production). I saw this in some code where the extension generated the manifest dynamically depending on the target browser and the environment. Including the background permission itself is an example, you may not need it in production. And here we are dealing with a problem when connecting to the Vite server to hot reload the extension while we are developing, it is not necessary in production because everything will be in the .js files. |
@aqiongbei Use npm init vite@^3.0 crxjs's website says it only supports vite 2 and 3 (3 is beta) |
I kept getting CORS error until I added this in defineConfig of vite.config.js file server: {
cors: {
origin: '*'
}
}, |
Wasted a few hours trying to fix this issue today "Error during WebSocket handshake: Unexpected response code: 400"
|
Let us know when the long-term solution is available |
Build tool
Vite
Where do you see the problem?
Describe the bug
i create a react crx demo according to this guide Get Started with React, when i run
pnpm dev
, i found this error info in chrome extension inspect page(chrome://extensions/?errors=gbfkgllkhphjnpfpgfgmpahkbekgeenh)the service-worker-loader.js's content is
my chrome version is 131.0.6778.265 (arm64)
Reproduction
do according to Get Started with React.
Logs
System Info
Severity
annoyance
The text was updated successfully, but these errors were encountered: