diff --git a/docs/guide/compare.md b/docs/guide/compare.md index 32bd2ab5..9099cd90 100644 --- a/docs/guide/compare.md +++ b/docs/guide/compare.md @@ -1,39 +1,40 @@ # Compare -Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework), another web extension framework. +Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework) (another web extension framework) and CRXJS (the most popular bundler plugin). ## Overview -| Features | WXT | Plasmo | -| ---------------------------------------------------- | :-------------------------: | :--------------------------------------: | -| Supports all browsers | ✅ | ✅ | -| MV2 Support | ✅ | ✅ | -| MV3 Support | ✅ | ✅ | -| Create Extension ZIPs | ✅ | ✅ | -| Create Firefox Sources ZIP | ✅ | ❌ | -| First-class TypeScript support | ✅ | ✅ | -| File based entrypoint discovery | ✅ | ✅ | -| Inline entrypoint config | ✅ | ✅ | -| Auto-imports | ✅ | ❌ | -| Supports all frontend frameworks | ✅ | 🟡 Only React, Vue, and Svelte | -| Framework specific entrypoints (like `Popup.tsx`) | 🟡 `.html` `.ts` `.tsx` | ✅ `.html` `.ts` `.tsx` `.vue` `.svelte` | -| Automated publishing | 🟡 Coming soon | ✅ | -| Remote Code Bundling (Google Analytics) | ✅ | ✅ | +| Features | WXT | Plasmo | CRXJS | +| ---------------------------------------------------- | :-------------------------: | :--------------------------------------: | :---------------------------------------------------------------------: | +| Supports all browsers | ✅ | ✅ | ❌ See [#56](https://github.com/crxjs/chrome-extension-tools/issues/56) | +| MV2 Support | ✅ | ✅ | 🟡 Either MV2 or MV3 | +| MV3 Support | ✅ | ✅ | 🟡 Either MV2 or MV3 | +| Create Extension ZIPs | ✅ | ✅ | ❌ | +| Create Firefox Sources ZIP | ✅ | ❌ | ❌ | +| First-class TypeScript support | ✅ | ✅ | ✅ | +| Entrypoint discovery | File based | File based | ❌ | +| Inline entrypoint config | ✅ | ✅ | Manifest based | +| Auto-imports | ✅ | ❌ | ❌ | +| Supports all frontend frameworks | ✅ | 🟡 Only React, Vue, and Svelte | ✅ | +| Framework specific entrypoints (like `Popup.tsx`) | 🟡 `.html` `.ts` `.tsx` | ✅ `.html` `.ts` `.tsx` `.vue` `.svelte` | ❌ | +| Automated publishing | ✅ | ✅ | ❌ | +| Remote Code Bundling (Google Analytics) | ✅ | ✅ | ❌ | | Dev Mode | | | -| `.env` Files | ✅ | ✅ | -| Opens browser and install extension | ✅ | ❌ | -| HMR for UIs | ✅ | 🟡 React only | -| Reload HTML Files on Change | ✅ | 🟡 Reloads entire extension | -| Reload Content Scripts on Change | ✅ | 🟡 Reloads entire extension | -| Reload Background on Change | 🟡 Reloads entire extension | 🟡 Reloads entire extension | -| Built-in Utils | | | -| Storage | ✅ | ✅ | -| Messaging | 🟡 Coming soon | ✅ | -| Content Script UI | ✅ | ✅ | +| `.env` Files | ✅ | ✅ | ✅ | +| Opens browser and install extension | ✅ | ❌ | ❌ | +| HMR for UIs | ✅ | 🟡 React only | ✅ | +| Reload HTML Files on Change | ✅ | 🟡 Reloads entire extension | ✅ | +| Reload Content Scripts on Change | ✅ | 🟡 Reloads entire extension | ✅ | +| Reload Background on Change | 🟡 Reloads entire extension | 🟡 Reloads entire extension | 🟡 Reloads entire extension | +| Respects Content Script `run_at` | ✅ | ✅ | ❌ ESM-style loaders run asynchronously | +| Built-in Utils | | | | +| Storage | ✅ | ✅ | ❌ | +| Messaging | ❌ | ✅ | ❌ | +| Content Script UI | ✅ | ✅ | ❌ | ## Dev Mode -WXT's main goal is improving the development experience (DX) of creating web extensions. There are two things WXT does differently: +WXT's main goal is improving the development experience (DX) of creating web extensions, while not sacrificing support. There are two things WXT does differently: 1. Automatically opens a browser with the extension installed when starting development 2. Reload each part of the extension individually rather than reloading the entire extension