-
Notifications
You must be signed in to change notification settings - Fork 195
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
CSP Issue on Chrome 130+ #918
Comments
Same 🚨 My solution for build production remove
|
Having the same issue as well., |
I worked around this by setting |
It's not only about this CSP issue; it's always been frustrating to work with CRXJS. The docs are the worst I've ever seen. The dev runtime doesn't even work on Firefox. For my project, it has become a debt now. I want to move away from it, but I can't find an alternative that supports HMR for integrated CSUIs (not iframe). I've tried out |
Same idea with you but not found the best one 👨💻 Firefox does not support MV3 yet. So for me, only focus on Chrome. Still using this hot-fix for v130. |
I think it supports it now. I've ported my MV3 extension to firefox with almost no changes. |
Nice 😊. Thank you for your information. I will take a look |
This seems like a big deal. I've just got my first complaint about my extension not working (a user has Chrome Beta). Took me forever to find that this was the problem. Seems like this will impact every extension soon or am I missing something? I don't think the workaround posted earlier (#918 (comment)) will work for me. I need to call chrome.runtime.getURL in my content script. |
Can you show example in your code? I will help |
here's how I worked around this issue pnd280/complexity#7 |
More attachment on how to hot-fix my extensions After building, you should edit it like this. I hope it helps. |
@trungpv1601, @pnd280 - thank you both! The extra details allowed me to piece together a solution. |
Are we able prepare a PR for that change or more work is needed? |
I think this is the best solution for now. It works well for Chrome and Firefox builds. Thank you @pnd280 🙏 |
Same problem, we use our extension with InboxSDK to insert some buttons in the gmail page. |
Can we expect a PR to handle that ? Is someone already on that ? |
is this an issue with chrome that needs to be reported? how come |
Looks like support for that property was actually just added in Chrome 130: https://developer.chrome.com/blog/extension-news-october-2024
I don't know why CRXJS marks it as true in the final manifest.json, looks like a simple PR that removes it would be enough? |
FIX WITH PATCH-PACKAGE (DEV AND BUILD)Add patch-package:
Change the
Run patch-package:
Add
This fixes the issue at the source so it will work correctly in both dev and prod builds PS: If you are using yarn 3, this can be fixed with yarn patch instead of patch-package FIX WITH NODEJS SCRIPT (BUILD ONLY)create a js script, e.g
Add it to
Now the manifest.json in the |
For now, the production build works using @pnd280 's solution (thank you), dev mode is still an issue, did anyone get it to work yet? |
I threw together this hack plugin that uses import path from 'node:path';
import fs from 'fs';
import { PluginOption } from 'vite';
import { ManifestV3Export } from '@crxjs/vite-plugin';
const manifestPath = path.resolve('dist/manifest.json'); // your manifest output location
export function updateManifestPlugin(): PluginOption {
return {
name: 'update-manifest-plugin',
enforce: 'post',
closeBundle() {
forceDisableUseDynamicUrl();
},
configureServer(server) {
server.httpServer?.once('listening', () => {
const updated = forceDisableUseDynamicUrl();
if (updated) {
server.ws.send({ type: 'full-reload' });
console.log('** updated **');
}
fs.watchFile(manifestPath, (data) => {
console.log('** watchFile ** ');
const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
if (manifestContents.web_accessible_resources.some((resource: any) => resource.use_dynamic_url)) {
const updated = forceDisableUseDynamicUrl();
if (updated) {
server.ws.send({ type: 'full-reload' });
console.log('** updated **');
}
}
});
});
},
writeBundle() {
console.log('### writeBundle ##');
forceDisableUseDynamicUrl();
},
};
}
function forceDisableUseDynamicUrl() {
if (!fs.existsSync(manifestPath)) {
return false;
}
const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8')) as Awaited<ManifestV3Export>;
if (typeof manifestContents === 'function' || !manifestContents.web_accessible_resources) return false;
if (manifestContents.web_accessible_resources.every((resource) => !resource.use_dynamic_url)) return false;
manifestContents.web_accessible_resources.forEach((resource) => {
if (resource.use_dynamic_url) resource.use_dynamic_url = false;
});
fs.writeFileSync(manifestPath, JSON.stringify(manifestContents, null, 2));
return true;
} use normally in vite.config.ts plugins: [react(), crx({ manifest }), updateManifestPlugin()], |
my solution above with patch-package fixes it for dev and build modes |
I'm not using yarn tho |
yarn is not required, patch-package is a npm package. Just change it to
|
I will test that approach out. Thanks! |
Hi all, just checking in to say that we've landed a fix for this which is available in today's Chrome Canary (looks like @allcentury was ahead of me!). We appreciated all of the feedback - the impact here was greater than we hoped and it allowed us to prioritize working on the change. I also apologize for the lacks of heads up about this one - we did some outreach to |
I seem change use_dynamic_url to false will fix the problem right now |
Should we close this now, since jack released a fix in @crxjs/[email protected] Pre-release |
That works, thanks! |
updating to 2.0.0-beta.26 works! Thanks! |
Are we going to get a fix on the stable version (v1)? I appreciate the quick fix but now the only solution is to use a beta version. |
Hi, After upgrading to 2.0.0-beta.26 i get this error
|
In Chrome 1.30 and 1.31 there's a bug that caused plugins using the chrome.runtime.getURL(...) function loading failures from CSP errors. This should be fixed in v1.32. A fix is also in the crxjsv2 plugin. Refs: https://issues.chromium.org/issues/363027634?pli=1 crxjs/chrome-extension-tools#918 https://www.reddit.com/r/webdev/comments/1gf0v2p/suddenly_getting_content_security_policy_error_in/
* Updates vite and vite crxjs plugin In Chrome 1.30 and 1.31 there's a bug that caused plugins using the chrome.runtime.getURL(...) function loading failures from CSP errors. This should be fixed in v1.32. A fix is also in the crxjsv2 plugin. Refs: https://issues.chromium.org/issues/363027634?pli=1 crxjs/chrome-extension-tools#918 https://www.reddit.com/r/webdev/comments/1gf0v2p/suddenly_getting_content_security_policy_error_in/
getting the same issue package.json has the following dependencies: |
I am seeing this error with @crxjs/vite-plugin 2.0.0-beta.28 on Chrome 131.0. Starting from the default project template, I updated the manifest.json to:
And created this very simple
Loading any site with this extension enabled gives the following error:
If I manually edit the manifest.json generated by 'npm run build' (in dist/) and replace the pointer to the content-loader script directly with my content script, the content script runs as expected. The generated manifest.json is:
And the generated content loader script is:
|
Build tool
Vite
Where do you see the problem?
Describe the bug
When using Chrome version 130 and above, a browser error occurs when loading the content.js script.
content.ts-loader-DE-4zCml.js:
Reproduction
Clone this repository: https://github.com/furybee/crxjs-extension, or create a new repository with a content.js file as content_scripts.
Run the following command:
Import the extension into Chrome 130+ (Canary Builds): https://www.google.com/chrome/canary/
Check the console to see the error.
Logs
No response
System Info
manifest.json
Severity
🚨 blocking all usage of crxjs 🚨
The text was updated successfully, but these errors were encountered: