npm - @crxjs/vite-plugin - Versions diffs - 2.0.0-beta.19 → 2.0.0-beta.21 - Mend

@crxjs/vite-plugin 2.0.0-beta.19 → 2.0.0-beta.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/index.mjs +27 -8
package/package.json +1 -1

package/dist/index.mjs CHANGED Viewed

@@ -348,7 +348,8 @@ const pluginBackground = () => {
           };
         } else {
           manifest.background = {
-            scripts: [this.getFileName(refId)]
+            scripts: [this.getFileName(refId)],
+            type: "module"
           };
         }
         return manifest;
@@ -1409,9 +1410,9 @@ const pluginHtmlInlineScripts = () => {
   };
 };
-var precontrollerJs = "const id = setInterval(() => location.reload(), 100);\nsetTimeout(() => clearInterval(id), 5e3);\n";
+var loadingPageScript = "const VITE_URL = \"http://localhost:%PORT%\";\ndocument.body.innerHTML = `\n<div\n      id=\"app\"\n      style=\"\n        border: 1px solid #ddd;\n        padding: 20px;\n        border-radius: 5px;\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n      \"\n    >\n      <h1 style=\"color: #333\">Vite Dev Mode</h1>\n      <p style=\"color: #666\">\n        Cannot connect to the Vite Dev Server on <a href=\"${VITE_URL}\">${VITE_URL}</a>\n      </p>\n      <p style=\"color: #666\">\n        Double-check that Vite is working and reload the extension.\n      </p>\n      <p style=\"color: #666\">\n        This page will close when the extension reloads.\n      </p>\n      <button\n        style=\"\n          padding: 10px 20px;\n          border: none;\n          background-color: #007bff;\n          color: #fff;\n          border-radius: 5px;\n          cursor: pointer;\n        \"\n      >\n        Reload Extension\n      </button>\n    </div>`;\ndocument.body.querySelector(\"button\")?.addEventListener(\"click\", () => {\n  chrome.runtime.reload();\n});\nlet tries = 0;\nlet ready = false;\ndo {\n  try {\n    await fetch(VITE_URL);\n    ready = true;\n  } catch {\n    const timeout = Math.min(100 * Math.pow(2, ++tries), 5e3);\n    console.log(`[CRXJS] Vite Dev Server is not available on ${VITE_URL}`);\n    console.log(`[CRXJS] Retrying in ${timeout}ms...`);\n    await new Promise((resolve) => setTimeout(resolve, timeout));\n  }\n} while (!ready);\nchrome.runtime.reload();\n";
-var precontrollerHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Waiting for the extension service worker...</title>\n    <script src=\"%SCRIPT%\"></script>\n  </head>\n  <body>\n    <h1>Waiting for service worker</h1>\n\n    <p>\n      If you see this message, it means the service worker has not loaded fully.\n    </p>\n\n    <p>This page is never added in production.</p>\n  </body>\n</html>\n";
+var loadingPageHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <title>Vite Dev Mode</title>\n    <script src=\"%SCRIPT%\" type=\"module\"></script>\n  </head>\n  <body\n    style=\"font-family: Arial, sans-serif; padding: 20px; text-align: center\"\n  >\n    <h1>Vite Dev Mode</h1>\n  </body>\n</html>\n";
 const { readFile } = promises;
 const pluginManifest = () => {
@@ -1600,6 +1601,16 @@ const pluginManifest = () => {
             });
             manifest2.background.service_worker = refId2;
           }
+          if (manifest2.background && "scripts" in manifest2.background) {
+            const file = manifest2.background.scripts[0];
+            const id2 = join(config.root, file);
+            const refId2 = this.emitFile({
+              type: "chunk",
+              id: id2,
+              name: basename(file)
+            });
+            manifest2.background.scripts = [refId2];
+          }
           for (const file of htmlFiles(manifest2)) {
             const id2 = join(config.root, file);
             this.emitFile({
@@ -1629,6 +1640,11 @@ const pluginManifest = () => {
             const name = this.getFileName(ref);
             manifest2.background.service_worker = name;
           }
+          if (manifest2.background && "scripts" in manifest2.background) {
+            const ref = manifest2.background.scripts[0];
+            const name = this.getFileName(ref);
+            manifest2.background.scripts = [name];
+          }
           manifest2.content_scripts = manifest2.content_scripts?.map(
             ({ js = [], ...rest }) => {
               return {
@@ -1697,17 +1713,20 @@ Public dir: "${config.publicDir}"`
         if (config.command === "serve" && files.html.length) {
           const refId2 = this.emitFile({
             type: "asset",
-            name: "precontroller.js",
-            source: precontrollerJs
+            name: "loading-page.js",
+            source: loadingPageScript.replace(
+              "%PORT%",
+              `${config.server.port ?? 0}`
+            )
           });
-          const precontrollerJsName = this.getFileName(refId2);
+          const loadingPageScriptName = this.getFileName(refId2);
           files.html.map(
             (f) => this.emitFile({
               type: "asset",
               fileName: f,
-              source: precontrollerHtml.replace(
+              source: loadingPageHtml.replace(
                 "%SCRIPT%",
-                `/${precontrollerJsName}`
+                `/${loadingPageScriptName}`
               )
             })
           );

package/package.json CHANGED Viewed

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