fix: workaround for the issue with chrome.runtime.getURL introduced in Chrome 130 causing CSP rejecting script due to different origin (GUID instead of chrome extension id)

[onv]

fix: workaround for the issue with chrome.runtime.getURL introduced in Chrome 130 causing CSP rejecting script due to different origin (GUID instead of chrome extension id)

Starting Chrome 130 use_dynamic_url has taken an effect and as a result chrome.runtime.getURL(path) now returns url with random GUID chrome-extension://1d4b08e1-f2c5-48e5-839d-32c125e7a989/${path} instead of chrome-extension://${chrome.runtime.id}/${path}
Setting use_dynamic_url to false or replacing chrome.runtime.getURL() with template string chrome-extension://${chrome.runtime.id}/${path} solves the issue.

The related issue

[changeset-bot]

🦋 Changeset detected

Latest commit: 9cdc3e7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@crxjs/vite-plugin	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
vite-plugin-docs	⬜️ Ignored (Inspect)	Visit Preview		Oct 19, 2024 7:14am

[onv]

@jacksteamdev could you please take a look?

[pietrofxq]

shouldn't we also address use_dynamic_url value not being passed over to generated manifest.json?

[goodideagiver]

I tried to use this changes in patch-package and manually editing vite-plugin/node_modules/dist but for me it didn't fix the issue

index c543f3e..654ed0d 100644
--- a/node_modules/@crxjs/vite-plugin/dist/index.mjs
+++ b/node_modules/@crxjs/vite-plugin/dist/index.mjs
@@ -1805,7 +1805,7 @@ function compileFileResources(fileName, {
 const defineManifest = (manifest) => manifest;
 const defineDynamicResource = ({
   matches = ["http://*/*", "https://*/*"],
-  use_dynamic_url = true
+  use_dynamic_url = false
 }) => ({
   matches,
   resources: [DYNAMIC_RESOURCE],
@@ -1839,7 +1839,7 @@ const pluginWebAccessibleResources = () => {
           // all resources are web accessible
           resources: ["**/*", "*"],
           // change the extension origin on every reload
-          use_dynamic_url: true
+          use_dynamic_url: false
         };
         if (browser === "firefox") {
           delete war.use_dynamic_url;

The iplementation from this PR works for me though xc2/follow-it-later#22

[pietrofxq]

I tried to use this changes in patch-package and manually editing vite-plugin/node_modules/dist but for me it didn't fix the issue

index c543f3e..654ed0d 100644
--- a/node_modules/@crxjs/vite-plugin/dist/index.mjs
+++ b/node_modules/@crxjs/vite-plugin/dist/index.mjs
@@ -1805,7 +1805,7 @@ function compileFileResources(fileName, {
 const defineManifest = (manifest) => manifest;
 const defineDynamicResource = ({
   matches = ["http://*/*", "https://*/*"],
-  use_dynamic_url = true
+  use_dynamic_url = false
 }) => ({
   matches,
   resources: [DYNAMIC_RESOURCE],
@@ -1839,7 +1839,7 @@ const pluginWebAccessibleResources = () => {
           // all resources are web accessible
           resources: ["**/*", "*"],
           // change the extension origin on every reload
-          use_dynamic_url: true
+          use_dynamic_url: false
         };
         if (browser === "firefox") {
           delete war.use_dynamic_url;

I think you updated the wrong lines. You should update the values on lines 1842 and 1924

[tance77]

We're excited about this patch. Our Extension is dead in the water till this is merged and deployed.

[pietrofxq]

@tance77 in the meantime you can patch the tool with patch-package, check #918 (comment)

[mr-menno]

This is also in issue: #929

The simplest fix to get this working again is updating:
const ownOrigin = new URL(chrome.runtime.getURL(\"/\")).origin;
to
const ownOrigin = 'chrome-extension://'+chrome.runtime.id;
in
packages/vite-plugin/src/client/es/hmr-client-worker.ts

Although I've validate the above patch in this PR works for me as well.

[mr-menno]

Thanks @onv !

When can this PR be merged and released? A lot of dev is at a standstill without manual patching.

[onv]

@jacksteamdev, can this PR be merged? Looks like I still need an approval from maintainer. Thanks.

[jacksteamdev]

Thanks @onv for putting this together!

[jacksteamdev]

This landed in 2.0.0-beta.26

[mr-menno]

Confirming this is all working well now! Thank you!

…

On Sun, Oct 20, 2024 at 1:37 PM Jack Steam ***@***.***> wrote: This landed in 2.0.0-beta.26 ***@***.***/vite-plugin/v/2.0.0-beta.26> — Reply to this email directly, view it on GitHub <#928 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABGK3LCAV65KFJLMYYHILT3Z4QIBXAVCNFSM6AAAAABQDD627KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMRVGIYTANZQGI> . You are receiving this because you commented.Message ID: ***@***.***>

[tance77]

2.0.0-beta26
seems to replace my background serverice worker path with service-worker-loader.js and that doesn't seem to exist for me.

[jacksteamdev]

2.0.0-beta26 seems to replace my background serverice worker path with service-worker-loader.js and that doesn't seem to exist for me.

@tance77 If this is still happening for you, please create an issue so we can reproduce it.

[rahulbansal16]

This landed in 2.0.0-beta.26

What is the version of Vite to use for this?
I am using the 5.4.6 and I'm getting the errors about import _vite_plugin.crx is not a function.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [
    react(),
    crx({ manifest }),
  ],
})

Tried this configs #939 (comment) but the error is persistent.

@jacksteamdev

[rahulbansal16]

Anyone able to resolve the issues of #939 (comment)