Merge branch 'main' into main

.changeset/bright-peaches-wink.md

@@ -0,0 +1,5 @@
+---
+"@crxjs/vite-plugin": patch
+---
+
+fix: hmr error

.changeset/eight-stingrays-provide.md

@@ -0,0 +1,5 @@
+---
+"@crxjs/vite-plugin": patch
+---
+
+Fix/web accessible resources script modules

.changeset/fair-flies-admire.md

@@ -0,0 +1,5 @@
+---
+"@crxjs/vite-plugin": patch
+---
+
+Delete invalid changeset

.changeset/fluffy-geckos-flash.md

@@ -0,0 +1,5 @@
+---
+"@crxjs/vite-plugin": patch
+---
+
+fix: background scripts for firefox build

.changeset/happy-carpets-boil.md

@@ -0,0 +1,5 @@
+---
+"@crxjs/vite-plugin": patch
+---
+
+feat: add compatibility mode for Firefox

.changeset/pre.json

@@ -9,14 +9,18 @@
   "changesets": [
     "beige-snails-kiss",
     "breezy-plums-study",
+    "eight-stingrays-provide",
     "eleven-buttons-dream",
     "eleven-planes-tease",
     "fair-eggs-change",
+    "fair-flies-admire",
+    "fluffy-geckos-flash",
     "fluffy-numbers-brake",
     "fresh-suns-do",
     "gold-spies-occur",
     "grumpy-brooms-exist",
     "grumpy-comics-explain",
+    "happy-carpets-boil",
     "kind-donkeys-cry",
     "late-paws-change",
     "long-kangaroos-work",
@@ -32,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"
   ]
 }

.changeset/unlucky-goats-exist.md

@@ -0,0 +1,5 @@
+---
+"rollup-plugin-chrome-extension": patch
+---
+
+Add match_origin_as_fallback to manifest-v3.schema.json

.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.

.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"

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

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",

packages/rollup-plugin/schema/manifest-v3.schema.json

@@ -150,6 +150,7 @@
           "scripting",
           "search",
           "sessions",
+          "sidePanel",
           "signedInDevices",
           "storage",
           "system.cpu",
@@ -279,6 +280,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": {
@@ -678,6 +684,17 @@
       "maxLength": 12,
       "type": "string"
     },
+    "side_panel": {
+      "description": "The Side Panel API allows extensions to display their own UI in the side panel, enabling persistent experiences that complement the user's browsing journey.",
+      "properties": {
+        "default_path": {
+          "description": "The path to your site panel page, relative to your extension's root.",
+          "type": "string"
+        }
+      },
+      "required": ["default_path"],
+      "type": "object"
+    },
     "signature": {},
     "spellcheck": {},
     "storage": {},

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>

packages/vite-plugin-docs/docs/getting-started/react/01-dev-basics.md

@@ -18,6 +18,9 @@ import Installing from '../\_install-extension.md';
 
 <Intro/>
 
+## Install the extension
+
+<Installing/>
 
 ## Opening the extension
 

packages/vite-plugin/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @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
+
+- cbfd0b3: Delete invalid changeset
+
+## 2.0.0-beta.20
+
+### Patch Changes
+
+- f5c4bd7: fix: background scripts for firefox build
+
+## 2.0.0-beta.19
+
+### Patch Changes
+
+- 34980de: feat: add compatibility mode for Firefox
+
 ## 2.0.0-beta.18
 
 ### Patch Changes

packages/vite-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.22",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",

packages/vite-plugin/src/client/es/loading-page-script.ts

@@ -0,0 +1,64 @@
+/**
+ * This script runs in Vite dev mode if an extension page opens before the
+ * service worker takes control of fetch (e.g., in the onInstalled event).
+ */
+
+const VITE_URL = 'http://localhost:%PORT%'
+
+document.body.innerHTML = `
+<div
+      id="app"
+      style="
+        border: 1px solid #ddd;
+        padding: 20px;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      "
+    >
+      <h1 style="color: #333">Vite Dev Mode</h1>
+      <p style="color: #666">
+        Cannot connect to the Vite Dev Server on <a href="${VITE_URL}">${VITE_URL}</a>
+      </p>
+      <p style="color: #666">
+        Double-check that Vite is working and reload the extension.
+      </p>
+      <p style="color: #666">
+        This page will close when the extension reloads.
+      </p>
+      <button
+        style="
+          padding: 10px 20px;
+          border: none;
+          background-color: #007bff;
+          color: #fff;
+          border-radius: 5px;
+          cursor: pointer;
+        "
+      >
+        Reload Extension
+      </button>
+    </div>`
+document.body.querySelector('button')?.addEventListener('click', () => {
+  chrome.runtime.reload()
+})
+
+// ping the dev server until it's ready
+let tries = 0
+let ready = false
+do {
+  try {
+    await fetch(VITE_URL)
+    ready = true
+  } catch {
+    // exponential backoff for retries, maxing out at every 5 seconds
+    const timeout = Math.min(100 * Math.pow(2, ++tries), 5000)
+    console.log(`[CRXJS] Vite Dev Server is not available on ${VITE_URL}`)
+    console.log(`[CRXJS] Retrying in ${timeout}ms...`)
+    await new Promise((resolve) => setTimeout(resolve, timeout))
+  }
+} while (!ready)
+
+// reload the page to load the built files from the dev server
+location.reload()
+
+export {}

packages/vite-plugin/src/client/html/loading-page.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Vite Dev Mode</title>
+    <script src="%SCRIPT%" type="module"></script>
+  </head>
+  <body
+    style="font-family: Arial, sans-serif; padding: 20px; text-align: center"
+  >
+    <h1>Vite Dev Mode</h1>
+  </body>
+</html>