fix: the issue with chrome.runtime.getURL introduced in Chrome 130 ca…

…using CSP rejecting script due to different origin (GUID instead of chrome extension id)
crxjs · Oct 18, 2024 · 04855df · 04855df
1 parent a6d882a
commit 04855df
Show file tree

Hide file tree

Showing 17 changed files with 70 additions and 29 deletions.
diff --git a/.changeset/smart-bottles-warn.md b/.changeset/smart-bottles-warn.md
@@ -0,0 +1,5 @@
+---
+'@crxjs/vite-plugin': major
+---
+
+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)
diff --git a/packages/vite-plugin/src/node/plugin-webAccessibleResources.ts b/packages/vite-plugin/src/node/plugin-webAccessibleResources.ts
@@ -163,7 +163,7 @@ export const pluginWebAccessibleResources: CrxPluginFn = () => {
                     resources: [...assets, ...imports],
                     use_dynamic_url: isDynamicScript
                       ? dynamicScriptDynamicUrl
-                      : true,
+                      : false,
                   }
 
                   if (isDynamicScript || !injectCss) {

diff --git a/packages/vite-plugin/tests/out/basic-js/__snapshots__/build.test.ts.snap b/packages/vite-plugin/tests/out/basic-js/__snapshots__/build.test.ts.snap
@@ -36,7 +36,7 @@ Object {
       "resources": Array [
         "assets/content.js.hash1.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }

diff --git a/packages/vite-plugin/tests/out/basic-ts/__snapshots__/build.test.ts.snap b/packages/vite-plugin/tests/out/basic-ts/__snapshots__/build.test.ts.snap
@@ -33,7 +33,7 @@ Object {
       "resources": Array [
         "assets/content.ts.hash1.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }

diff --git a/packages/vite-plugin/tests/out/content-script-module-api/__snapshots__/build.test.ts.snap b/packages/vite-plugin/tests/out/content-script-module-api/__snapshots__/build.test.ts.snap
@@ -29,7 +29,7 @@ Object {
       "resources": Array [
         "assets/content.js.hash1.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }

diff --git a/packages/vite-plugin/tests/out/dynamic-script/__snapshots__/build.test.ts.snap b/packages/vite-plugin/tests/out/dynamic-script/__snapshots__/build.test.ts.snap
@@ -30,7 +30,7 @@ Object {
         "assets/declared-script.ts.hash1.js",
         "assets/main-world.ts.hash2.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
     Object {
       "matches": Array [

diff --git a/.../vite-plugin/tests/out/vite-content-script-css-imports-2/__snapshots__/build.test.ts.snap b/.../vite-plugin/tests/out/vite-content-script-css-imports-2/__snapshots__/build.test.ts.snap
@@ -41,7 +41,7 @@ Object {
         "assets/index.ts.hash4.js",
         "assets/index.ts.hash5.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }

diff --git a/.../vite-plugin/tests/out/vite-content-script-css-imports-3/__snapshots__/build.test.ts.snap b/.../vite-plugin/tests/out/vite-content-script-css-imports-3/__snapshots__/build.test.ts.snap
@@ -44,7 +44,7 @@ Object {
         "assets/index.ts.hash6.js",
         "assets/index.ts.hash7.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }

diff --git a/...es/vite-plugin/tests/out/vite-content-script-css-imports/__snapshots__/build.test.ts.snap b/...es/vite-plugin/tests/out/vite-content-script-css-imports/__snapshots__/build.test.ts.snap
@@ -28,7 +28,7 @@ Object {
       "resources": Array [
         "assets/content.ts.hash2.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }

diff --git a/...ges/vite-plugin/tests/out/vite-declared-script-resources/__snapshots__/build.test.ts.snap b/...ges/vite-plugin/tests/out/vite-declared-script-resources/__snapshots__/build.test.ts.snap
@@ -28,7 +28,7 @@ Object {
         "assets/image.hash3.png",
         "assets/script.ts.hash4.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }

diff --git a/packages/vite-plugin/tests/out/vite-react-fast-refresh/__snapshots__/build.test.ts.snap b/packages/vite-plugin/tests/out/vite-react-fast-refresh/__snapshots__/build.test.ts.snap
@@ -28,7 +28,7 @@ Object {
         "assets/content.tsx.hash2.js",
         "assets/vendor.hash3.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }

diff --git a/packages/vite-plugin/tests/out/vite-react-fast-refresh/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/vite-react-fast-refresh/__snapshots__/serve.test.ts.snap
@@ -46,7 +46,7 @@ Array [
   "src/content.tsx-loader.js",
   "src/content.tsx.js",
   "src/popup.html",
-  "vendor/chunk-D6CDYV2H.js__v--hash.js",
+  "vendor/chunk-MPSAKQTA.js__v--hash.js",
   "vendor/crx-client-port.js",
   "vendor/crx-client-preamble.js",
   "vendor/id-__x00__react-jsx-dev-runtime.js",
@@ -170,15 +170,42 @@ export default App;
 var _c;
 $RefreshReg$(_c, \\"App\\");
 if (import.meta.hot) {
+  let isReactRefreshBoundary = function(mod) {
+    if (mod == null || typeof mod !== \\"object\\") {
+      return false;
+    }
+    let hasExports = false;
+    let areAllExportsComponents = true;
+    for (const exportName in mod) {
+      hasExports = true;
+      if (exportName === \\"__esModule\\") {
+        continue;
+      }
+      const desc = Object.getOwnPropertyDescriptor(mod, exportName);
+      if (desc && desc.get) {
+        return false;
+      }
+      const exportValue = mod[exportName];
+      if (!RefreshRuntime.isLikelyComponentType(exportValue)) {
+        areAllExportsComponents = false;
+      }
+    }
+    return hasExports && areAllExportsComponents;
+  };
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
-  import.meta.hot.accept();
-  if (!window.__vite_plugin_react_timeout) {
-    window.__vite_plugin_react_timeout = setTimeout(() => {
-      window.__vite_plugin_react_timeout = 0;
-      RefreshRuntime.performReactRefresh();
-    }, 30);
-  }
+  import.meta.hot.accept((mod) => {
+    if (isReactRefreshBoundary(mod)) {
+      if (!window.__vite_plugin_react_timeout) {
+        window.__vite_plugin_react_timeout = setTimeout(() => {
+          window.__vite_plugin_react_timeout = 0;
+          RefreshRuntime.performReactRefresh();
+        }, 30);
+      }
+    } else {
+      import.meta.hot.invalidate();
+    }
+  });
 }
 "
 `;

diff --git a/packages/vite-plugin/tests/out/vite-self-directive-in-csp/__snapshots__/build.test.ts.snap b/packages/vite-plugin/tests/out/vite-self-directive-in-csp/__snapshots__/build.test.ts.snap
@@ -36,7 +36,7 @@ Object {
       "resources": Array [
         "assets/content.ts.hash1.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }

diff --git a/packages/vite-plugin/tests/out/vite-svelte/__snapshots__/build.test.ts.snap b/packages/vite-plugin/tests/out/vite-svelte/__snapshots__/build.test.ts.snap
@@ -32,7 +32,7 @@ Object {
         "assets/svelte.hash.png",
         "assets/vendor.hash.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }

diff --git a/packages/vite-plugin/tests/out/vite-svelte/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/vite-svelte/__snapshots__/serve.test.ts.snap
@@ -52,7 +52,7 @@ Array [
   "src/lib/Counter.svelte.js",
   "src/lib/Counter.svelte__svelte_type--style_lang.css.js",
   "src/popup.html",
-  "vendor/chunk-3BFMV3YN.js__v--hash.js",
+  "vendor/chunk-GTBF3NP3.js__v--hash.js",
   "vendor/crx-client-port.js",
   "vendor/svelte-hmr-runtime-hot-api-esm.js__v--hash.js",
   "vendor/svelte-hmr-runtime-hot-api.js__v--hash.js",
@@ -137,7 +137,7 @@ import 'http://localhost:3000/@crx/client-worker';
 `;
 
 exports[`serve fs output > src/App.svelte.js 1`] = `
-"import { createHotContext as __vite__createHotContext } from \\"/vendor/vite-client.js\\";import.meta.hot = __vite__createHotContext(\\"/src/App.svelte.js\\");/* src/App.svelte generated by Svelte v3.48.0 */
+"import { createHotContext as __vite__createHotContext } from \\"/vendor/vite-client.js\\";import.meta.hot = __vite__createHotContext(\\"/src/App.svelte.js\\");/* src/App.svelte generated by Svelte v3.59.2 */
 import {
 	SvelteComponentDev as SvelteComponentDev$,
 	add_location as add_location$,
@@ -304,7 +304,7 @@ class App$ extends SvelteComponentDev$ {
 	}
 }
 
-import * as ___SVELTE_HMR_HOT_API from '/vendor/svelte-hmr-runtime-hot-api-esm.js__v--hash.js';import { adapter as ___SVELTE_HMR_HOT_API_PROXY_ADAPTER } from '/vendor/svelte-hmr-runtime-proxy-adapter-dom.js__v--hash.js';if (import.meta && import.meta.hot) { if (false) import.meta.hot.acceptExports(['default']);; App$ = ___SVELTE_HMR_HOT_API.applyHmr({ m: import.meta, id: \\"<root>/src/App.svelte\\", hotOptions: {\\"preserveLocalState\\":false,\\"noPreserveStateKey\\":[\\"@hmr:reset\\",\\"@!hmr\\"],\\"preserveAllLocalStateKey\\":\\"@hmr:keep-all\\",\\"preserveLocalStateKey\\":\\"@hmr:keep\\",\\"noReload\\":false,\\"optimistic\\":false,\\"acceptNamedExports\\":true,\\"acceptAccessors\\":true,\\"injectCss\\":false,\\"cssEjectDelay\\":100,\\"native\\":false,\\"importAdapterName\\":\\"___SVELTE_HMR_HOT_API_PROXY_ADAPTER\\",\\"noOverlay\\":true,\\"allowLiveBinding\\":false,\\"partialAccept\\":true}, Component: App$, ProxyAdapter: ___SVELTE_HMR_HOT_API_PROXY_ADAPTER, acceptable: true, preserveLocalState: false, emitCss: true, }); }
+import * as ___SVELTE_HMR_HOT_API from \\"/vendor/svelte-hmr-runtime-hot-api-esm.js__v--hash.js\\";import { adapter as ___SVELTE_HMR_HOT_API_PROXY_ADAPTER } from \\"/vendor/svelte-hmr-runtime-proxy-adapter-dom.js__v--hash.js\\";if (import.meta && import.meta.hot) { if (false) import.meta.hot.acceptExports(['default']);; App$ = ___SVELTE_HMR_HOT_API.applyHmr({ m: import.meta, id: \\"<root>/src/App.svelte\\", hotOptions: {\\"preserveLocalState\\":false,\\"noPreserveStateKey\\":[\\"@hmr:reset\\",\\"@!hmr\\"],\\"preserveAllLocalStateKey\\":\\"@hmr:keep-all\\",\\"preserveLocalStateKey\\":\\"@hmr:keep\\",\\"noReload\\":false,\\"optimistic\\":false,\\"acceptNamedExports\\":true,\\"acceptAccessors\\":true,\\"injectCss\\":false,\\"cssEjectDelay\\":100,\\"native\\":false,\\"importAdapterName\\":\\"___SVELTE_HMR_HOT_API_PROXY_ADAPTER\\",\\"noOverlay\\":true,\\"allowLiveBinding\\":false,\\"partialAccept\\":true}, Component: App$, ProxyAdapter: ___SVELTE_HMR_HOT_API_PROXY_ADAPTER, acceptable: true, preserveLocalState: false, emitCss: true, }); }
 export default App$;
 
 
@@ -365,7 +365,7 @@ exports[`serve fs output > src/content.js-loader.js 1`] = `
 `;
 
 exports[`serve fs output > src/lib/Counter.svelte.js 1`] = `
-"import { createHotContext as __vite__createHotContext } from \\"/vendor/vite-client.js\\";import.meta.hot = __vite__createHotContext(\\"/src/lib/Counter.svelte.js\\");/* src/lib/Counter.svelte generated by Svelte v3.48.0 */
+"import { createHotContext as __vite__createHotContext } from \\"/vendor/vite-client.js\\";import.meta.hot = __vite__createHotContext(\\"/src/lib/Counter.svelte.js\\");/* src/lib/Counter.svelte generated by Svelte v3.59.2 */
 import {
 	SvelteComponentDev as SvelteComponentDev$,
 	add_location as add_location$,
@@ -412,7 +412,7 @@ function create_fragment(ctx) {
 			append_dev$(button$, t1$);
 
 			if (!mounted) {
-				dispose = listen_dev$(button$, \\"click\\", /*increment*/ ctx[1], false, false, false);
+				dispose = listen_dev$(button$, \\"click\\", /*increment*/ ctx[1], false, false, false, false);
 				mounted = true;
 			}
 		},
@@ -481,7 +481,7 @@ class Counter$ extends SvelteComponentDev$ {
 	}
 }
 
-import * as ___SVELTE_HMR_HOT_API from '/vendor/svelte-hmr-runtime-hot-api-esm.js__v--hash.js';import { adapter as ___SVELTE_HMR_HOT_API_PROXY_ADAPTER } from '/vendor/svelte-hmr-runtime-proxy-adapter-dom.js__v--hash.js';if (import.meta && import.meta.hot) { if (false) import.meta.hot.acceptExports(['default']);; Counter$ = ___SVELTE_HMR_HOT_API.applyHmr({ m: import.meta, id: \\"<root>/src/lib/Counter.svelte\\", hotOptions: {\\"preserveLocalState\\":false,\\"noPreserveStateKey\\":[\\"@hmr:reset\\",\\"@!hmr\\"],\\"preserveAllLocalStateKey\\":\\"@hmr:keep-all\\",\\"preserveLocalStateKey\\":\\"@hmr:keep\\",\\"noReload\\":false,\\"optimistic\\":false,\\"acceptNamedExports\\":true,\\"acceptAccessors\\":true,\\"injectCss\\":false,\\"cssEjectDelay\\":100,\\"native\\":false,\\"importAdapterName\\":\\"___SVELTE_HMR_HOT_API_PROXY_ADAPTER\\",\\"noOverlay\\":true,\\"allowLiveBinding\\":false,\\"partialAccept\\":true}, Component: Counter$, ProxyAdapter: ___SVELTE_HMR_HOT_API_PROXY_ADAPTER, acceptable: true, preserveLocalState: false, emitCss: true, }); }
+import * as ___SVELTE_HMR_HOT_API from \\"/vendor/svelte-hmr-runtime-hot-api-esm.js__v--hash.js\\";import { adapter as ___SVELTE_HMR_HOT_API_PROXY_ADAPTER } from \\"/vendor/svelte-hmr-runtime-proxy-adapter-dom.js__v--hash.js\\";if (import.meta && import.meta.hot) { if (false) import.meta.hot.acceptExports(['default']);; Counter$ = ___SVELTE_HMR_HOT_API.applyHmr({ m: import.meta, id: \\"<root>/src/lib/Counter.svelte\\", hotOptions: {\\"preserveLocalState\\":false,\\"noPreserveStateKey\\":[\\"@hmr:reset\\",\\"@!hmr\\"],\\"preserveAllLocalStateKey\\":\\"@hmr:keep-all\\",\\"preserveLocalStateKey\\":\\"@hmr:keep\\",\\"noReload\\":false,\\"optimistic\\":false,\\"acceptNamedExports\\":true,\\"acceptAccessors\\":true,\\"injectCss\\":false,\\"cssEjectDelay\\":100,\\"native\\":false,\\"importAdapterName\\":\\"___SVELTE_HMR_HOT_API_PROXY_ADAPTER\\",\\"noOverlay\\":true,\\"allowLiveBinding\\":false,\\"partialAccept\\":true}, Component: Counter$, ProxyAdapter: ___SVELTE_HMR_HOT_API_PROXY_ADAPTER, acceptable: true, preserveLocalState: false, emitCss: true, }); }
 export default Counter$;
 
 

diff --git a/packages/vite-plugin/tests/out/with-circular-deps/__snapshots__/build.test.ts.snap b/packages/vite-plugin/tests/out/with-circular-deps/__snapshots__/build.test.ts.snap
@@ -29,7 +29,7 @@ Object {
         "assets/content.ts.hash1.js",
         "assets/module.hash2.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }
@@ -59,14 +59,23 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
   if (!deps || deps.length === 0) {
     return baseModule();
   }
+  const links = document.getElementsByTagName(\\"link\\");
   return Promise.all(deps.map((dep) => {
     dep = assetsURL(dep);
     if (dep in seen)
       return;
     seen[dep] = true;
     const isCss = dep.endsWith(\\".css\\");
     const cssSelector = isCss ? '[rel=\\"stylesheet\\"]' : \\"\\";
-    if (document.querySelector(\`link[href=\\"\${dep}\\"]\${cssSelector}\`)) {
+    const isBaseRelative = !!importerUrl;
+    if (isBaseRelative) {
+      for (let i = links.length - 1; i >= 0; i--) {
+        const link2 = links[i];
+        if (link2.href === dep && (!isCss || link2.rel === \\"stylesheet\\")) {
+          return;
+        }
+      }
+    } else if (document.querySelector(\`link[href=\\"\${dep}\\"]\${cssSelector}\`)) {
       return;
     }
     const link = document.createElement(\\"link\\");

diff --git a/packages/vite-plugin/tests/out/with-sourcemaps/__snapshots__/build.test.ts.snap b/packages/vite-plugin/tests/out/with-sourcemaps/__snapshots__/build.test.ts.snap
@@ -33,7 +33,7 @@ Object {
       "resources": Array [
         "assets/content.ts.hash1.js",
       ],
-      "use_dynamic_url": true,
+      "use_dynamic_url": false,
     },
   ],
 }