chore(release): v0.18.3

Signed-off-by: Emmanuel Ferdman <emmanuelferdman@gmail.com>

.github/workflows/sync-releases.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - main
     paths:
-      - CHANGELOG.md
+      - packages/wxt/CHANGELOG.md
 
 jobs:
   sync:

docs/.vitepress/components/UsingWxtSection.vue

@@ -26,6 +26,7 @@ const chromeExtensionIds = [
   'nhclljcpfmmaiojbhhnkpjcfmacfcian', // Facebook Video Controls
   'mblkhbaakhbhiimkbcnmeciblfhmafna', // ElemSnap - Quick capture of webpage elements and conversion to images,
   'oajalfneblkfiejoadecnmodfpnaeblh', // MS Edge TTS (Text to Speech)
+  'nedcanggplmbbgmlpcjiafgjcpdimpea', // YTBlock - Block any content from YouTube™
 ];
 
 const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);

docs/guide/content-script-ui.md

@@ -388,14 +388,14 @@ WXT provides a helper function, [`createIframeUi`](/api/wxt/client/functions/cre
    export default defineContentScript({
      matches: ['<all_urls>'],
 
-     async main(ctx) {
+     main(ctx) {
        // Define the UI
-       const ui = await createIframeUi(ctx, {
+       const ui = createIframeUi(ctx, {
          page: '/example-iframe.html',
          position: 'inline',
          onMount: (wrapper, iframe) => {
            // Add styles to the iframe like width
-           iframe.width = 123;
+           iframe.width = '123';
          },
        });
 

docs/guide/handling-updates.md

@@ -84,7 +84,7 @@ To validate this, you can create a third ZIP file with a rare permission like `g
 You can setup a callback that runs after your extension updates like so:
 
 ```ts
-browser.runtime.onInstalled.addEventListener(({ reason }) => {
+browser.runtime.onInstalled.addListener(({ reason }) => {
   if (reason === 'update') {
     // Do something
   }

docs/guide/remote-code.md

@@ -1,10 +1,10 @@
 # Remote Code
 
-WXT will automatically download and bundle imports with the `url:` prefix so the extension does not depend of remote code, [a requirement from Google for MV3](https://developer.chrome.com/docs/extensions/migrating/improve-security/#remove-remote-code).
+WXT will automatically download and bundle imports with the `url:` prefix so the extension does not depend on remote code, [a requirement from Google for MV3](https://developer.chrome.com/docs/extensions/migrating/improve-security/#remove-remote-code).
 
 ## Google Analytics
 
-For example, you can import google analytics:
+For example, you can import Google Analytics:
 
 ```ts
 // utils/google-analytics.ts

docs/guide/testing.md

@@ -22,4 +22,4 @@ If you want to try to use a different framework for unit tests, you will need to
 - **Global Variables**: If you consume them, manually define globals provided by WXT (like `import.meta.env.BROWSER`) by adding them to the global scope before accessing them (`import.meta.env.BROWSER = "chrome"`)
 - **Import paths**: If you use the `@/` or `~/` path aliases, add them to your test environment
 
-[Here's how Vitest is configured](https://github.com/wxt-dev/wxt/blob/main/src/testing/wxt-vitest-plugin.ts) for reference.
+[Here's how Vitest is configured](https://github.com/wxt-dev/wxt/blob/main/packages/wxt/src/testing/wxt-vitest-plugin.ts) for reference.

packages/wxt/CHANGELOG.md

@@ -1,5 +1,58 @@
 # Changelog
 
+## v0.18.3
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.18.2...v0.18.3)
+
+### 🩹 Fixes
+
+- Automatically add dev server to sandbox CSP ([#663](https://github.com/wxt-dev/wxt/pull/663))
+- Remove `import * as` imports from entrypoints during build ([#671](https://github.com/wxt-dev/wxt/pull/671))
+- **security:** Upgrade tar to 6.2.1 ([215def7](https://github.com/wxt-dev/wxt/commit/215def7))
+
+### 📖 Documentation
+
+- Add YTBlock to homepage ([#666](https://github.com/wxt-dev/wxt/pull/666))
+
+### 🏡 Chore
+
+- Add missing tests for dev mode CSP ([#662](https://github.com/wxt-dev/wxt/pull/662))
+- Upgrade templates to v0.18 ([3b954cc](https://github.com/wxt-dev/wxt/commit/3b954cc))
+
+### 🤖 CI
+
+- Fix sync-releases workflow trigger ([5d8efef](https://github.com/wxt-dev/wxt/commit/5d8efef))
+
+### ❤️ Contributors
+
+- Edoan ([@EdoanR](http://github.com/EdoanR))
+
+## v0.18.2
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.18.1...v0.18.2)
+
+### 🚀 Enhancements
+
+- **runner:** Add `keepProfileChanges` option ([#655](https://github.com/wxt-dev/wxt/pull/655))
+
+### 🩹 Fixes
+
+- Automatically detect and add "sidePanel" permission ([5fcaf7c](https://github.com/wxt-dev/wxt/commit/5fcaf7c))
+
+### 📖 Documentation
+
+- Fix `wxt-vitest-plugin` reference ([#650](https://github.com/wxt-dev/wxt/pull/650))
+- Fix spelling mistake in remote-code.md ([#652](https://github.com/wxt-dev/wxt/pull/652))
+- Correct event handler name in handling-updates.md ([#653](https://github.com/wxt-dev/wxt/pull/653))
+- Fix iframe typos ([c74e530](https://github.com/wxt-dev/wxt/commit/c74e530))
+
+### ❤️ Contributors
+
+- Edoan ([@EdoanR](http://github.com/EdoanR))
+- Linus Norton ([@linusnorton](http://github.com/linusnorton))
+- Jeffrey Zang ([@jeffrey-zang](http://github.com/jeffrey-zang))
+- Emmanuel Ferdman ([@emmanuel-ferdman](https://github.com/emmanuel-ferdman))
+
 ## v0.18.1
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.18.0...v0.18.1)

packages/wxt/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "description": "Next gen framework for developing web extensions",
   "repository": {
     "type": "git",

packages/wxt/src/core/runners/web-ext.ts

@@ -35,6 +35,7 @@ export function createWebExtRunner(): ExtensionRunner {
         console: wxtUserConfig?.openConsole,
         devtools: wxtUserConfig?.openDevtools,
         startUrl: wxtUserConfig?.startUrls,
+        keepProfileChanges: wxtUserConfig?.keepProfileChanges,
         ...(wxt.config.browser === 'firefox'
           ? {
               firefox: wxtUserConfig?.binaries?.firefox,

packages/wxt/src/core/utils/__tests__/manifest.test.ts

@@ -10,6 +10,7 @@ import {
   fakeOptionsEntrypoint,
   fakePopupEntrypoint,
   fakeSidepanelEntrypoint,
+  fakeWxtDevServer,
   setFakeWxt,
 } from '../testing/fake-objects';
 import { Manifest } from 'webextension-polyfill';
@@ -897,7 +898,7 @@ describe('Manifest Utils', () => {
 
     describe('sidepanel', () => {
       it.each(['chrome', 'safari', 'edge'])(
-        'should include a side_panel ignoring all options for %s',
+        'should include the side_panel and permission, ignoring all options for %s',
         async (browser) => {
           const sidepanel = fakeSidepanelEntrypoint({
             outputDir: outDir,
@@ -909,12 +910,14 @@ describe('Manifest Utils', () => {
               manifestVersion: 3,
               browser,
               outDir,
+              command: 'build',
             },
           });
           const expected = {
             side_panel: {
               default_path: 'sidepanel.html',
             },
+            permissions: ['sidePanel'],
           };
 
           const { manifest: actual } = await generateManifest(
@@ -1494,6 +1497,91 @@ describe('Manifest Utils', () => {
         expect(actual.host_permissions).toBeUndefined();
       });
     });
+
+    describe('Dev mode', () => {
+      it('should not add any code for production builds', async () => {
+        setFakeWxt({
+          config: {
+            command: 'build',
+          },
+          server: {
+            hostname: 'localhost',
+            port: 3000,
+            origin: 'http://localhost:3000',
+          },
+        });
+        const output = fakeBuildOutput();
+        const entrypoints: Entrypoint[] = [];
+
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          output,
+        );
+
+        expect(actual.permissions).toBeUndefined();
+        expect(actual.content_security_policy).toBeUndefined();
+      });
+
+      it('should add required permissions for dev mode to function for MV2', async () => {
+        setFakeWxt({
+          config: {
+            command: 'serve',
+            manifestVersion: 2,
+          },
+          server: fakeWxtDevServer({
+            port: 3000,
+            hostname: 'localhost',
+            origin: 'http://localhost:3000',
+          }),
+        });
+        const output = fakeBuildOutput();
+        const entrypoints: Entrypoint[] = [];
+
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          output,
+        );
+
+        expect(actual).toMatchObject({
+          content_security_policy:
+            "script-src 'self' http://localhost:3000; object-src 'self';",
+          permissions: ['http://localhost/*', 'tabs'],
+        });
+      });
+
+      it('should add required permissions for dev mode to function for MV3', async () => {
+        setFakeWxt({
+          config: {
+            command: 'serve',
+            manifestVersion: 3,
+            browser: 'chrome',
+          },
+          server: fakeWxtDevServer({
+            hostname: 'localhost',
+            port: 3000,
+            origin: 'http://localhost:3000',
+          }),
+        });
+        const output = fakeBuildOutput();
+        const entrypoints: Entrypoint[] = [];
+
+        const { manifest: actual } = await generateManifest(
+          entrypoints,
+          output,
+        );
+
+        expect(actual).toMatchObject({
+          content_security_policy: {
+            extension_pages:
+              "script-src 'self' 'wasm-unsafe-eval' http://localhost:3000; object-src 'self';",
+            sandbox:
+              "script-src 'self' 'unsafe-inline' 'unsafe-eval' http://localhost:3000; sandbox allow-scripts allow-forms allow-popups allow-modals; child-src 'self';",
+          },
+          host_permissions: ['http://localhost/*'],
+          permissions: ['tabs', 'scripting'],
+        });
+      });
+    });
   });
 
   describe('stripPathFromMatchPattern', () => {

packages/wxt/src/core/utils/__tests__/strings.test.ts

@@ -50,6 +50,7 @@ import "@/utils/github";
 import '@/utils/github';
 import"@/utils/github"
  import'@/utils/github';
+import * as abc from "@/utils/github"
     `;
       expect(removeImportStatements(imports).trim()).toEqual('');
     });

packages/wxt/src/core/utils/manifest.ts

@@ -347,6 +347,7 @@ function addEntrypoints(
       manifest.side_panel = {
         default_path: page,
       };
+      addPermission(manifest, 'sidePanel');
     } else {
       wxt.logger.warn(
         'Side panel not supported by Chromium using MV2. side_panel.default_path was not added to the manifest',
@@ -465,23 +466,34 @@ function addDevModeCsp(manifest: Manifest.WebExtensionManifest): void {
     addPermission(manifest, permission);
   }
 
-  const csp = new ContentSecurityPolicy(
+  const extensionPagesCsp = new ContentSecurityPolicy(
     manifest.manifest_version === 3
       ? // @ts-expect-error: extension_pages is not typed
         manifest.content_security_policy?.extension_pages ??
-        "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';" // default CSP for MV3
+        "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';" // default extension_pages CSP for MV3
       : manifest.content_security_policy ??
         "script-src 'self'; object-src 'self';", // default CSP for MV2
   );
+  const sandboxCsp = new ContentSecurityPolicy(
+    // @ts-expect-error: sandbox is not typed
+    manifest.content_security_policy?.sandbox ??
+      "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';", // default sandbox CSP for MV3
+  );
 
-  if (wxt.server) csp.add('script-src', allowedCsp);
+  if (wxt.server) {
+    extensionPagesCsp.add('script-src', allowedCsp);
+    sandboxCsp.add('script-src', allowedCsp);
+  }
 
   if (manifest.manifest_version === 3) {
     manifest.content_security_policy ??= {};
     // @ts-expect-error: extension_pages is not typed
-    manifest.content_security_policy.extension_pages = csp.toString();
+    manifest.content_security_policy.extension_pages =
+      extensionPagesCsp.toString();
+    // @ts-expect-error: sandbox is not typed
+    manifest.content_security_policy.sandbox = sandboxCsp.toString();
   } else {
-    manifest.content_security_policy = csp.toString();
+    manifest.content_security_policy = extensionPagesCsp.toString();
   }
 }
 

packages/wxt/src/core/utils/strings.ts

@@ -19,7 +19,7 @@ export function safeVarName(str: string): string {
  */
 export function removeImportStatements(text: string): string {
   return text.replace(
-    /(import\s?[{\w][\s\S]*?from\s?["'][\s\S]*?["'];?|import\s?["'][\s\S]*?["'];?)/gm,
+    /(import\s?[\s\S]*?from\s?["'][\s\S]*?["'];?|import\s?["'][\s\S]*?["'];?)/gm,
     '',
   );
 }

packages/wxt/src/core/utils/testing/fake-objects.ts

@@ -311,10 +311,27 @@ export const fakeWxt = fakeObjectCreator<Wxt>(() => ({
   logger: mock(),
   reloadConfig: vi.fn(),
   pm: mock(),
-  server: faker.helpers.arrayElement([undefined, mock<WxtDevServer>()]),
+  server: faker.helpers.arrayElement([undefined, fakeWxtDevServer()]),
   builder: mock(),
 }));
 
+export const fakeWxtDevServer = fakeObjectCreator<WxtDevServer>(() => ({
+  currentOutput: fakeBuildOutput(),
+  hostname: 'localhost',
+  origin: 'http://localhost:3000',
+  port: 3000,
+  reloadContentScript: vi.fn(),
+  reloadExtension: vi.fn(),
+  reloadPage: vi.fn(),
+  restart: vi.fn(),
+  restartBrowser: vi.fn(),
+  start: vi.fn(),
+  stop: vi.fn(),
+  transformHtml: vi.fn(),
+  watcher: mock(),
+  ws: mock(),
+}));
+
 export function setFakeWxt(overrides?: DeepPartial<Wxt>) {
   const wxt = fakeWxt(overrides);
   setWxtForTesting(wxt);

packages/wxt/src/types/index.ts

@@ -927,6 +927,10 @@ export interface ExtensionRunnerConfig {
    * @see https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#start-url
    */
   startUrls?: string[];
+  /**
+   * @see https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#keep-profile-changes
+   */
+  keepProfileChanges?: boolean;
 }
 
 export interface WxtBuilder {

pnpm-lock.yaml

@@ -1494,7 +1494,7 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.2.8(@types/node@20.10.3)
+      vite: 5.2.8
       vue: 3.4.21(typescript@5.3.3)
     dev: true
 
@@ -2988,7 +2988,7 @@ packages:
       mri: 1.2.0
       node-fetch-native: 1.6.4
       pathe: 1.1.2
-      tar: 6.2.0
+      tar: 6.2.1
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -3004,7 +3004,7 @@ packages:
       nypm: 0.3.8
       ohash: 1.1.3
       pathe: 1.1.2
-      tar: 6.2.0
+      tar: 6.2.1
     dev: false
 
   /glob-parent@5.1.2:
@@ -5219,8 +5219,8 @@ packages:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: true
 
-  /tar@6.2.0:
-    resolution: {integrity: sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==}
+  /tar@6.2.1:
+    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
     dependencies:
       chownr: 2.0.0
@@ -5563,7 +5563,7 @@ packages:
       debug: 4.3.4
       pathe: 1.1.2
       picocolors: 1.0.0
-      vite: 5.2.8(@types/node@20.10.3)
+      vite: 5.2.8
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -5575,6 +5575,41 @@ packages:
       - terser
     dev: true
 
+  /vite@5.2.8:
+    resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.20.2
+      postcss: 8.4.38
+      rollup: 4.14.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
   /vite@5.2.8(@types/node@20.10.3):
     resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -5609,6 +5644,7 @@ packages:
       rollup: 4.14.0
     optionalDependencies:
       fsevents: 2.3.3
+    dev: false
 
   /vitepress@1.0.0-rc.34(typescript@5.3.3):
     resolution: {integrity: sha512-TUbTiSdAZFni2XlHlpx61KikgkQ5uG4Wtmw2R0SXhIOG6qGqzDJczAFjkMc4i45I9c3KyatwOYe8oEfCnzVYwQ==}
@@ -5636,7 +5672,7 @@ packages:
       shikiji: 0.9.16
       shikiji-core: 0.9.16
       shikiji-transformers: 0.9.16
-      vite: 5.2.8(@types/node@20.10.3)
+      vite: 5.2.8
       vue: 3.4.21(typescript@5.3.3)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -5682,7 +5718,7 @@ packages:
     peerDependencies:
       vite: ^4.0.0 || ^5.0.0
     dependencies:
-      vite: 5.2.8(@types/node@20.10.3)
+      vite: 5.2.8
     dev: true
 
   /vitest@1.5.3:
@@ -5727,7 +5763,7 @@ packages:
       strip-literal: 2.1.0
       tinybench: 2.5.1
       tinypool: 0.8.4
-      vite: 5.2.8(@types/node@20.10.3)
+      vite: 5.2.8
       vite-node: 1.5.3
       why-is-node-running: 2.2.2
     transitivePeerDependencies:

templates/react/package.json

@@ -23,6 +23,6 @@
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.3.3",
-    "wxt": "^0.17.0"
+    "wxt": "^0.18.0"
   }
 }

templates/solid/package.json

@@ -20,6 +20,6 @@
   "devDependencies": {
     "typescript": "^5.3.3",
     "vite-plugin-solid": "^2.8.0",
-    "wxt": "^0.17.0"
+    "wxt": "^0.18.0"
   }
 }

templates/svelte/package.json

@@ -20,6 +20,6 @@
     "svelte-check": "^3.6.2",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "wxt": "^0.17.0"
+    "wxt": "^0.18.0"
   }
 }

templates/vanilla/package.json

@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "typescript": "^5.3.3",
-    "wxt": "^0.17.0"
+    "wxt": "^0.18.0"
   }
 }

templates/vue/package.json

@@ -21,6 +21,6 @@
     "@vitejs/plugin-vue": "^5.0.1",
     "typescript": "^5.3.3",
     "vue-tsc": "^2.0.6",
-    "wxt": "^0.17.0"
+    "wxt": "^0.18.0"
   }
 }