@crxjs/vite-plugin 2.0.0 → 2.0.1

package/README.md

@@ -1,33 +1,54 @@
-> [!IMPORTANT]
-> CRXJS is seeking new maintainers. If no maintenance team is established by March 31, 2025, this repository will be archived. [Learn more](https://github.com/crxjs/chrome-extension-tools/discussions/974).
+![CRXJS](./banner-github.png)
 
-# ![CRXJS](./banner-github.png)
+<h1 align="center">CRXJS</h1>
 
-[![npm (scoped)](https://img.shields.io/npm/v/@crxjs/vite-plugin.svg)](https://www.npmjs.com/package/@crxjs/vite-plugin)
-[![GitHub last commit](https://img.shields.io/github/last-commit/crxjs/chrome-extension-tools.svg?logo=github)](https://github.com/crxjs/rollup-plugin-chrome-extension)
-![GitHub action badge](https://github.com/crxjs/chrome-extension-tools/actions/workflows/vite-plugin.yml/badge.svg)
+<p align="center">
+Modern Chrome extension development with built-in <code>HMR</code> and <code>zero-config</code> setup
+</p>
 
-## CRXJS Vite Plugin
+<p align="center">
+<a href="https://www.npmjs.com/package/@crxjs/vite-plugin">
+<img src="https://img.shields.io/npm/v/@crxjs/vite-plugin?color=298cd6&amp;label=CRXJS&labelColor=f2bae4" alt="NPM version">
+</a>
+</p>
 
-> Build a Chrome Extension with [Vite](https://vitejs.dev)⚡
+<h2 align="center">
+<a href="https://crxjs.dev/vite-plugin">📚 Documentation</a> |
+<a href="https://discord.gg/5yHKEa9v">💬 Discord </a>
+</h2>
 
-CRXJS brings the Vite developer experience to Chrome Extensions:
 
-- True HMR for extension pages and content scripts
-- Simple config - everything is in the extension manifest
-- Static asset imports with automatic web-accessible resources
+## 📦 Create CRXJS Project
+```shell
+npm create crxjs@latest
+``` 
 
-## Getting Started
+> [!IMPORTANT]
+> `@latest` MUST NOT be omitted, otherwise `npm` may resolve to a cached and outdated version of the package.
 
-See the CRXJS documentation to
-[get started in 90 seconds 🚀](https://crxjs.dev/vite-plugin)
+## ✨ Features
 
-## Supporting
+- 🧩 **Full Vite Plugin Ecosystem** - Leverage any Vite-compatible plugins with zero extra setup  
+- ⚙️ **Zero Configuration** - Start developing immediately with intelligent defaults  
+- 3️⃣ **Manifest V3 Support** - Built for modern Chrome extensions with enhanced security  
+- 🔥 **True Hot Module Replacement** - Instant UI updates while preserving extension state 🎈**works with content scripts**
+- 📁 **Static Asset Import** - Directly reference images/fonts in your code
+- 🤖 **Auto Web-Accessible Resources** - Automatic generation of `web_accessible_resources` manifest entries  
 
-If these plugins have helped you ship your product faster, please consider
-[sponsoring me](https://github.com/sponsors/jacksteamdev) on GitHub.
+> [!NOTE]  
+> Looking for MV2 support? See [`rollup-plugin`](packages/rollup-plugin/README.md)  
+
+## 💝 Contributors
 
-## Contributing
+This project exists thanks to all the people who contribute.
 
-We encourage pull requests! This is a
-[pnpm monorepo](https://pnpm.io/workspaces), so use pnpm instead of Yarn or npm.
+And thank you to all our backers! 🙏
+
+<a href="https://github.com/crxjs/chrome-extension-tools/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=crxjs/chrome-extension-tools" />
+</a>
+
+## 🤝 Supporting
+
+If these plugins have helped you ship your product faster, please consider
+[sponsoring me](https://github.com/sponsors/jacksteamdev) on GitHub.

package/dist/index.mjs

@@ -14,9 +14,9 @@ import { createLogger, version } from 'vite';
 import { readFileSync, existsSync, promises } from 'fs';
 import { createRequire } from 'module';
 import fg from 'fast-glob';
+import pc from 'picocolors';
 import { load } from 'cheerio';
 import jsesc from 'jsesc';
-import colors from 'picocolors';
 
 const pluginName$1 = "crx:optionsProvider";
 const pluginOptionsProvider = (options) => {
@@ -1270,6 +1270,31 @@ const pluginHMR = () => {
   ];
 };
 
+function printStr(dir) {
+  return `  ${pc.magentaBright("B R O W S E R")}
+  ${pc.greenBright("E X T E N S I O N")}
+  ${pc.blueBright("T O O L S")}
+  
+  ${pc.green("\u279C")}  ${pc.bold("CRXJS")}: ${pc.green(`Load ${pc.cyan(dir)} as unpacked extension`)}`;
+}
+const pluginPrint = () => {
+  let outDir = "dist";
+  return [
+    {
+      name: "crx:print",
+      enforce: "pre",
+      configResolved(resolvedConfig) {
+        outDir = resolvedConfig.build.outDir;
+      },
+      configureServer(server) {
+        server.printUrls = () => {
+          console.log(printStr(outDir));
+        };
+      }
+    }
+  ];
+};
+
 var loader = "try {\n  for (const p of JSON.parse(SCRIPTS)) {\n    const url = new URL(p, \"https://stub\");\n    url.searchParams.set(\"t\", Date.now().toString());\n    const req = url.pathname + url.search;\n    await import(\n      /* @vite-ignore */\n      req\n    );\n  }\n} catch (error) {\n  console.error(error);\n}\n";
 
 const pluginName = "crx:html-inline-scripts";
@@ -1665,11 +1690,11 @@ const pluginManifest = () => {
             const name = `[${plugin.name}]`;
             let message = error;
             if (error instanceof Error) {
-              message = colors.red(
+              message = pc.red(
                 `${name} ${error.stack ? error.stack : error.message}`
               );
             } else if (typeof error === "string") {
-              message = colors.red(`${name} ${error}`);
+              message = pc.red(`${name} ${error}`);
             }
             console.log(message);
             throw new Error(`Error in ${plugin.name}.renderCrxManifest`);
@@ -1985,7 +2010,8 @@ const crx = (options) => {
     pluginWebAccessibleResources(),
     pluginContentScriptsCss(),
     pluginHMR(),
-    pluginManifest()
+    pluginManifest(),
+    pluginPrint()
   ].flat();
 };
 const chromeExtension = crx;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",
@@ -92,7 +92,7 @@
     "eslint-plugin-react": "^7.29.4",
     "jest-image-snapshot": "^5.2.0",
     "npm-run-all": "^4.1.5",
-    "playwright-chromium": "1.33.0",
+    "playwright-chromium": "1.52.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "rimraf": "3.0.2",