Merge branch 'main' into main

crxjs · Jan 14, 2024 · 81316bf · 81316bf
2 parents d7a3e0c + 7c3c4fd
commit 81316bf
Show file tree

Hide file tree

Showing 21 changed files with 76 additions and 20 deletions.
diff --git a/.changeset/eight-stingrays-provide.md b/.changeset/eight-stingrays-provide.md
@@ -0,0 +1,5 @@
+---
+"@crxjs/vite-plugin": patch
+---
+
+Fix/web accessible resources script modules
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -9,6 +9,7 @@
   "changesets": [
     "beige-snails-kiss",
     "breezy-plums-study",
+    "eight-stingrays-provide",
     "eleven-buttons-dream",
     "eleven-planes-tease",
     "fair-eggs-change",
@@ -35,8 +36,10 @@
     "swift-years-kick",
     "tidy-shrimps-cross",
     "tiny-planes-float",
+    "unlucky-goats-exist",
     "wet-hornets-run",
     "wicked-moose-listen",
+    "yellow-paws-search",
     "young-terms-tickle"
   ]
 }
diff --git a/.changeset/unlucky-goats-exist.md b/.changeset/unlucky-goats-exist.md
@@ -0,0 +1,5 @@
+---
+"rollup-plugin-chrome-extension": patch
+---
+
+Add match_origin_as_fallback to manifest-v3.schema.json
diff --git a/.changeset/yellow-paws-search.md b/.changeset/yellow-paws-search.md
@@ -0,0 +1,6 @@
+---
+'@crxjs/vite-plugin': patch
+---
+
+Vite 5 moved vite manifest from 'manifest.json' to '.vite/manifest.json'. 
+This change updates the plugin to use the new location if Vite major version is >4, old location otherwise.
diff --git a/.github/workflows/vite-plugin.yml b/.github/workflows/vite-plugin.yml
@@ -113,7 +113,7 @@ jobs:
         run: pnpm install --filter "vite-plugin"
 
       - name: Run e2e tests
-        uses: xvfb-run -a npm test
+        uses: coactions/setup-xvfb@v1
         with:
           run: pnpm test:run:e2e
           working-directory: "packages/vite-plugin"

diff --git a/packages/rollup-plugin/CHANGELOG.md b/packages/rollup-plugin/CHANGELOG.md
@@ -1,5 +1,11 @@
 # rollup-plugin-chrome-extension
 
+## 3.6.13-beta.1
+
+### Patch Changes
+
+- a0d4592: Add match_origin_as_fallback to manifest-v3.schema.json
+
 ## 3.6.13-beta.0
 
 ### Patch Changes

diff --git a/packages/rollup-plugin/package.json b/packages/rollup-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rollup-plugin-chrome-extension",
-  "version": "3.6.13-beta.0",
+  "version": "3.6.13-beta.1",
   "description": "Build Chrome Extensions with this Rollup plugin.",
   "keywords": [
     "rollup-plugin",

diff --git a/packages/rollup-plugin/schema/manifest-v3.schema.json b/packages/rollup-plugin/schema/manifest-v3.schema.json
@@ -279,6 +279,11 @@
             "description": "Controls whether the content script runs in all frames of the matching page, or only the top frame.",
             "type": "boolean"
           },
+          "match_origin_as_fallback": {
+            "type": "boolean",
+            "description": "Controls whether the content script runs in frames that are related to a matching frame.",
+            "default": false
+          },
           "css": {
             "description": "The list of CSS files to be injected into matching pages. These are injected in the order they appear in this array, before any DOM is constructed or displayed for the page.",
             "items": {

diff --git a/packages/vite-plugin-docs/docs/getting-started/_create-project-tabs.mdx b/packages/vite-plugin-docs/docs/getting-started/_create-project-tabs.mdx
@@ -24,6 +24,12 @@ npm init vite@latest
 
 CRXJS support for Vite 3 is in beta.
 
+:::
+
+:::info react users
+
+HMR in CRXJS is incompatible with `@vite/plugin-react-swc`. We recommend using @vitejs/plugin-react instead.
+
 :::
 
   </TabItem>

diff --git a/packages/vite-plugin/CHANGELOG.md b/packages/vite-plugin/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @crxjs/vite-plugin
 
+## 2.0.0-beta.22
+
+### Patch Changes
+
+- ce9fe1c: Fix/web accessible resources script modules
+- 48d8c68: Vite 5 moved vite manifest from 'manifest.json' to
+  '.vite/manifest.json'. This change updates the plugin to use the new location
+  if Vite major version is >4, old location otherwise.
+
 ## 2.0.0-beta.21
 
 ### Patch Changes

diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.22",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",

diff --git a/packages/vite-plugin/src/client/es/loading-page-script.ts b/packages/vite-plugin/src/client/es/loading-page-script.ts
@@ -58,7 +58,7 @@ do {
   }
 } while (!ready)
 
-// reload the extension to load the built files from the dev server
-chrome.runtime.reload()
+// reload the page to load the built files from the dev server
+location.reload()
 
 export {}
diff --git a/packages/vite-plugin/src/node/plugin-webAccessibleResources.ts b/packages/vite-plugin/src/node/plugin-webAccessibleResources.ts
@@ -1,5 +1,9 @@
 import { OutputChunk } from 'rollup'
-import { Manifest as ViteManifest, ResolvedConfig } from 'vite'
+import {
+  Manifest as ViteManifest,
+  ResolvedConfig,
+  version as ViteVersion,
+} from 'vite'
 import { compileFileResources } from './compileFileResources'
 import { contentScripts } from './contentScripts'
 import { DYNAMIC_RESOURCE } from './defineManifest'
@@ -102,10 +106,16 @@ export const pluginWebAccessibleResources: CrxPluginFn = () => {
 
         // derive content script resources from vite file manifest
         if (contentScripts.size > 0) {
+          // Vite 5 changed the manifest.json location to .vite/manifest.json.
+          // In order to support both Vite <=4 and Vite 5, we need to check the Vite version and determine the path accordingly.
+          const viteMajorVersion = parseInt(ViteVersion.split('.')[0])
+          const manifestPath = viteMajorVersion > 4 ? '.vite/manifest.json' : 'manifest.json'
+
           const viteManifest = parseJsonAsset<ViteManifest>(
             bundle,
-            'manifest.json',
+            manifestPath,
           )
+
           const viteFiles = new Map()
           for (const [, file] of Object.entries(viteManifest))
             viteFiles.set(file.file, file)
@@ -141,7 +151,8 @@ export const pluginWebAccessibleResources: CrxPluginFn = () => {
                   contentScripts.get(key)!.css = [...css]
 
                   // loader files import the entry, so entry file must be web accessible
-                  if (type === 'loader') imports.add(fileName)
+                  if (type === 'loader' || isDynamicScript)
+                    imports.add(fileName)
 
                   const resource:
                     | WebAccessibleResourceById

diff --git a/packages/vite-plugin/tests/out/basic-js/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/basic-js/__snapshots__/serve.test.ts.snap
@@ -116,7 +116,7 @@ do {
     await new Promise((resolve) => setTimeout(resolve, timeout));
   }
 } while (!ready);
-chrome.runtime.reload();
+location.reload();
 "
 `;
 

diff --git a/packages/vite-plugin/tests/out/basic-ts/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/basic-ts/__snapshots__/serve.test.ts.snap
@@ -113,7 +113,7 @@ do {
     await new Promise((resolve) => setTimeout(resolve, timeout));
   }
 } while (!ready);
-chrome.runtime.reload();
+location.reload();
 "
 `;
 

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
@@ -117,7 +117,7 @@ do {
     await new Promise((resolve) => setTimeout(resolve, timeout));
   }
 } while (!ready);
-chrome.runtime.reload();
+location.reload();
 "
 `;
 

diff --git a/packages/vite-plugin/tests/out/vite-self-directive-in-csp/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/vite-self-directive-in-csp/__snapshots__/serve.test.ts.snap
@@ -116,7 +116,7 @@ do {
     await new Promise((resolve) => setTimeout(resolve, timeout));
   }
 } while (!ready);
-chrome.runtime.reload();
+location.reload();
 "
 `;
 

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
@@ -126,7 +126,7 @@ do {
     await new Promise((resolve) => setTimeout(resolve, timeout));
   }
 } while (!ready);
-chrome.runtime.reload();
+location.reload();
 "
 `;
 
@@ -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\\");/* tests/out/vite-svelte/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.48.0 */
 import {
 	SvelteComponentDev as SvelteComponentDev$,
 	add_location as add_location$,
@@ -165,7 +165,7 @@ import {
 const { Error: Error$, Object: Object$, console: console$ } = globals$;
 import logo from '/src/assets/svelte.png__import.js';
 import Counter from '/src/lib/Counter.svelte.js';
-const file$ = \\"tests/out/vite-svelte/src/App.svelte\\";
+const file$ = \\"src/App.svelte\\";
 
 function create_fragment(ctx) {
 	let main$;
@@ -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\\");/* tests/out/vite-svelte/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.48.0 */
 import {
 	SvelteComponentDev as SvelteComponentDev$,
 	add_location as add_location$,
@@ -386,7 +386,7 @@ import {
 } from \\"/vendor/svelte_internal.js__v--hash.js\\";
 
 const { Error: Error$, Object: Object$, console: console$ } = globals$;
-const file$ = \\"tests/out/vite-svelte/src/lib/Counter.svelte\\";
+const file$ = \\"src/lib/Counter.svelte\\";
 
 function create_fragment(ctx) {
 	let button$;

diff --git a/packages/vite-plugin/tests/out/with-circular-deps/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/with-circular-deps/__snapshots__/serve.test.ts.snap
@@ -115,7 +115,7 @@ do {
     await new Promise((resolve) => setTimeout(resolve, timeout));
   }
 } while (!ready);
-chrome.runtime.reload();
+location.reload();
 "
 `;
 

diff --git a/packages/vite-plugin/tests/out/with-public-dir/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/with-public-dir/__snapshots__/serve.test.ts.snap
@@ -115,7 +115,7 @@ do {
     await new Promise((resolve) => setTimeout(resolve, timeout));
   }
 } while (!ready);
-chrome.runtime.reload();
+location.reload();
 "
 `;
 

diff --git a/packages/vite-plugin/tests/out/with-sourcemaps/__snapshots__/serve.test.ts.snap b/packages/vite-plugin/tests/out/with-sourcemaps/__snapshots__/serve.test.ts.snap
@@ -113,7 +113,7 @@ do {
     await new Promise((resolve) => setTimeout(resolve, timeout));
   }
 } while (!ready);
-chrome.runtime.reload();
+location.reload();
 "
 `;