chore(release): wxt v0.19.20

docs: fix colored-diff in es-modules.md (#1264 )
fix: Import entrypoint improvements (#1207 )
2024-12-09 20:12:43 +00:00 · 2024-12-09 07:42:54 -06:00 · 2024-12-08 12:10:05 -06:00 · 2024-12-08 08:55:01 -06:00 · 2024-12-07 08:57:17 -06:00 · 2024-12-07 08:56:13 -06:00
35 changed files with 1345 additions and 434 deletions
@@ -36,7 +36,7 @@ jobs:
      - uses: oven-sh/setup-bun@v2
      - name: pnpm test:coverage
        run: pnpm test:coverage -- --reporter=default --reporter=hanging-process
-      - uses: codecov/codecov-action@v4
+      - uses: codecov/codecov-action@v5
        env:
          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
  windows-tests:
@@ -4,11 +4,8 @@ import useListExtensionDetails, {
  ChromeExtension,
 } from '../composables/useListExtensionDetails';

-// Add extension IDs here. Order doesn't matter, will be sorted by weekly active users
-// During the transition from chrome.google.com/webstore to
-// chromewebstore.google.com, queue.wxt.dev might return null for your
-// extension. If it does, use "<slug>/<id>" instead of just the ID. The slug
-// can be retrieved from the URL of the item on chromewebstore.google.com
+// Add extension IDs here. Order doesn't matter, will be sorted by a combination of weekly active users and rating.
+// Change the commit message or PR title to: "docs: Added "[extension name]" to the homepage"
 const chromeExtensionIds = [
  'ocfdgncpifmegplaglcnglhioflaimkd', // GitHub: Better Line Counts
  'mgmdkjcljneegjfajchedjpdhbadklcf', // Anime Skip Player
@@ -16,7 +13,7 @@ const chromeExtensionIds = [
  'elfaihghhjjoknimpccccmkioofjjfkf', // StayFree - Website Blocker & Web Analytics
  'okifoaikfmpfcamplcfjkpdnhfodpkil', // Doozy: Ai Made Easy
  'lknmjhcajhfbbglglccadlfdjbaiifig', // tl;dv - Record, Transcribe & ChatGPT for Google Meet
-  'youtube中文配音/oglffgiaiekgeicdgkdlnlkhliajdlja', // Youtube中文配音
+  'oglffgiaiekgeicdgkdlnlkhliajdlja', // Youtube中文配音
  'agjnjboanicjcpenljmaaigopkgdnihi', // PreMiD
  'aiakblgmlabokilgljkglggnpflljdgp', // Markdown Sticky Notes
  'nomnkbngkijpffepcgbbofhcnafpkiep', // DocVersionRedirector
@@ -59,6 +56,8 @@ const chromeExtensionIds = [
  'macmkmchfoclhpbncclinhjflmdkaoom', // Wandpen - Instantly improve your writing with AI
  'lhmgechokhmdekdpgkkemoeecelcaonm', // YouTube Hider - Remove Comments By Keywords, Usernames & Tools
  'imgheieooppmahcgniieddodaliodeeg', // QA Compass - Record standardized bug reports easily
+  'npgghjedpchajflknnbngajkjkdhncdo', // aesthetic Notion, styled
+  'hmdcmlfkchdmnmnmheododdhjedfccka', // Eye Dropper
 ];

 const { data, err, isLoading } = useListExtensionDetails(chromeExtensionIds);
@@ -18,7 +18,7 @@ import { version as storageVersion } from '../../packages/storage/package.json';
 const title = 'Next-gen Web Extension Framework';
 const titleSuffix = ' – WXT';
 const description =
-  "WXT provides the best developer experience, making it quick, easy, and fun to develop chrome extensions for all browsers. With built-in utilities for building, zipping, and publishing your extension, it's easy to get started.";
+  "WXT provides the best developer experience, making it quick, easy, and fun to develop web extensions. With built-in utilities for building, zipping, and publishing your extension, it's easy to get started.";
 const ogTitle = `${title}${titleSuffix}`;
 const ogUrl = 'https://wxt.dev';
 const ogImage = 'https://wxt.dev/social-preview.png';
@@ -548,16 +548,21 @@ To use `injectScript`, we need two entrypoints, one content script and one unlis
 ```ts
 // entrypoints/example-main-world.ts
 export default defineUnlistedScript(() => {
-  console.log('Hello from the main world!');
+  console.log('Hello from the main world');
 });
 ```

 ```ts
 // entrypoints/example.content.ts
-export default defineContentScript(async () => {
-  await injectScript('/example-main-world.js', {
-    keepInDom: true,
-  });
+export default defineContentScript({
+  matches: ['*://*/*'],
+  async main() {
+    console.log('Injecting script...');
+    await injectScript('/example-main-world.js', {
+      keepInDom: true,
+    });
+    console.log('Done!');
+  },
 });
 ```

@@ -571,6 +576,39 @@ For MV3, `injectScript` is synchronous and the injected script will be evaluated
 However for MV2, `injectScript` has to `fetch` the script's text content and create an inline `<script>` block. This means for MV2, your script is injected asynchronously and it will not be evaluated at the same time as your content script's `run_at`.
 :::

+## Mounting UI to dynamic element
+
+In many cases, you may need to mount a UI to a DOM element that does not exist at the time the web page is initially loaded. To handle this, use the `autoMount` API to automatically mount the UI when the target element appears dynamically and unmount it when the element disappears. In WXT, the `anchor` option is used to target the element, enabling automatic mounting and unmounting based on its appearance and removal.
+
+```ts
+export default defineContentScript({
+  matches: ['<all_urls>'],
+
+  main(ctx) {
+    const ui = createIntegratedUi(ctx, {
+      position: 'inline',
+      // It observes the anchor
+      anchor: '#your-target-dynamic-element',
+      onMount: (container) => {
+        // Append children to the container
+        const app = document.createElement('p');
+        app.textContent = '...';
+        container.append(app);
+      },
+    });
+
+    // Call autoMount to observe anchor element for add/remove.
+    ui.autoMount();
+  },
+});
+```
+
+:::tip
+When the `ui.remove` is called, `autoMount` also stops.
+:::
+
+See the [API Reference](/api/reference/wxt/client/interfaces/ContentScriptUi.html#automount) for the complete list of options.
+
 ## Dealing with SPAs

 It is difficult to write content scripts for SPAs (single page applications) and websites using HTML5 history mode for navigation because content scripts are only ran on full page reloads. SPAs and websites that take advantage of HTML5 history mode **_do not perform a full reload when changing paths_**, and thus your content script isn't going to be ran when you expect it to be.
@@ -20,7 +20,7 @@ In your background script, set `type: "module"`:

 ```ts
 export default defineBackground({
-  type: 'module', // !code ++
+  type: 'module', // [!code ++]
  main() {
    // ...
  },
@@ -129,7 +129,7 @@ wxt zip

 Firefox requires you to upload a ZIP of your source code. This allows them to rebuild your extension and review the code in a readable way. More details can be found in [Firefox's docs](https://extensionworkshop.com/documentation/publish/source-code-submission/).

-When running `wxt zip -b firefox`, WXT will zip both your extension and sources. Certain files (such as config files, hidden files, and tests) are automatically excluded from your sources. However, it's important to manually check the ZIP to ensure it only contains the files necessary to rebuild your extension.
+When running `wxt zip -b firefox`, WXT will zip both your extension and sources. Certain files (such as config files, hidden files, tests, and excluded entrypoints) are automatically excluded from your sources. However, it's important to manually check the ZIP to ensure it only contains the files necessary to rebuild your extension.

 To customize which files are zipped, add the `zip` option to your config file.

@@ -75,3 +75,5 @@ Here are some examples:
    </body>
  </html>
  ```
+
+Alternatively, you can use the [`filterEntrypoints` config](/api/reference/wxt/interfaces/InlineConfig#filterentrypoints) to list all the entrypoints you want to build.
@@ -9,7 +9,7 @@ Check out the [comparison](/guide/resources/compare) to see how WXT compares to

 ## Prerequisites

-These docs assume you have a basic knowledge of how Chrome extensions are structured and how you access the extension APIs.
+These docs assume you have a basic knowledge of how web extensions are structured and how you access the extension APIs.

 :::warning New to extension development?
 If you have never written an extension before, follow Chrome's [Hello World tutorial](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world) to first **_create an extension without WXT_**, then come back here.
@@ -109,27 +109,6 @@ You have two options:
   ```
 2. Rename your `modules` directory to something else.

-## v0.18.0 &rarr; v0.18.5
-
-> When this version was released, it was not considered a breaking change... but it should have been.
-
-### New `modules/` Directory
-
-WXT now recognizes the `modules/` directory as a folder containing [WXT modules](/guide/essentials/wxt-modules).
-
-If you already have `<srcDir>/modules` or `<srcDir>/Modules` directory, `wxt prepare` and other commands will fail.
-
-You have two options:
-
-1. [Recommended] Keep your files where they are and tell WXT to look in a different folder:
-   ```ts
-   // wxt.config.ts
-   export default defineConfig({
-     modulesDir: 'wxt-modules', // defaults to "modules"
-   });
-   ```
-2. Rename your `modules` directory to something else.
-
 ## v0.17.0 &rarr; v0.18.0

 ### Automatic MV3 `host_permissions` to MV2 `permissions`
@@ -6,7 +6,7 @@ title: Next-gen Web Extension Framework
 hero:
  name: WXT
  text: Next-gen Web Extension Framework
-  tagline: An open source tool that makes Chrome Extension development faster than ever before.
+  tagline: An open source tool that makes web extension development faster than ever before.
  image:
    src: /hero-logo.svg
    alt: WXT
@@ -75,7 +75,7 @@ features:

 ## Put <span style="color: var(--vp-c-brand-1)">Developer Experience</span> First

-WXT simplifies the chrome extension development process by providing tools for zipping and publishing, the best-in-class dev mode, an opinionated project structure, and more. Iterate faster, develop features not build scripts, and use everything the JS ecosystem has to offer.
+WXT simplifies the web extension development process by providing tools for zipping and publishing, the best-in-class dev mode, an opinionated project structure, and more. Iterate faster, develop features not build scripts, and use everything the JS ecosystem has to offer.

 <div style="margin: auto; width: 100%; max-width: 900px; text-align: center">
  <video src="https://github.com/wxt-dev/wxt/assets/10101283/4d678939-1bdb-495c-9c36-3aa281d84c94" controls></video>
@@ -87,7 +87,7 @@ WXT simplifies the chrome extension development process by providing tools for z

 ## Who's Using WXT?

-Battle tested and ready for production. Explore chrome extensions made with WXT.
+Battle tested and ready for production. Explore web extensions made with WXT.

 <ClientOnly>
  <UsingWxtSection />
@@ -0,0 +1,76 @@
+import 'uno.css';
+import './style.css';
+
+export default defineContentScript({
+  matches: ['https://*.duckduckgo.com/*'],
+  cssInjectionMode: 'manifest',
+
+  async main(ctx) {
+    const dynamicUI = createIntegratedUi(ctx, {
+      position: 'inline',
+      append: 'after',
+      anchor: 'form[role=search]',
+      onMount: (container) => {
+        const app = document.createElement('div');
+        container.id = 'automount-anchor';
+        app.classList.add('m-4', 'text-center', 'text-red-500');
+        app.textContent = i18n.t('prompt_for_name');
+        container.append(app);
+        return { container, app };
+      },
+      onRemove() {
+        console.log('dynamicUI removed');
+      },
+    });
+
+    const autoMountUi = createIntegratedUi(ctx, {
+      position: 'inline',
+      append: 'after',
+      anchor: '#automount-anchor',
+      onMount: (container) => {
+        const app = document.createElement('div');
+        app.id = 'automount-ui';
+        app.classList.add('m-0', 'text-center', 'text-blue-500');
+        app.textContent = `Hello, I'm automount UI.`;
+        container.append(app);
+      },
+      onRemove() {
+        console.log('autoMountUi removed');
+      },
+    });
+
+    autoMountUi.autoMount({
+      onStop: () => {
+        console.log('Auto mount stopped.');
+      },
+    });
+
+    const stopAutoMountButton = createIntegratedUi(ctx, {
+      position: 'inline',
+      append: 'last',
+      anchor: 'form[role=search]',
+      onMount: (container) => {
+        const app = document.createElement('button');
+        container.classList.add('flex', 'flex-justify-center');
+        app.classList.add('mt-4', 'p-2');
+        app.textContent = 'Stop auto-mount';
+        app.onclick = (e) => {
+          e.preventDefault();
+          autoMountUi.remove();
+        };
+        container.append(app);
+        return { container, app };
+      },
+    });
+
+    stopAutoMountButton.mount();
+
+    setInterval(() => {
+      if (dynamicUI.mounted) {
+        dynamicUI.remove();
+      } else {
+        dynamicUI.mount();
+      }
+    }, 2000);
+  },
+});
@@ -0,0 +1,3 @@
+:root {
+  color-scheme: dark;
+}
@@ -1,5 +1,63 @@
 # Changelog

+## v0.19.20
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.19...wxt-v0.19.20)
+
+### 🚀 Enhancements
+
+- `autoMount` content script UIs ([#1210](https://github.com/wxt-dev/wxt/pull/1210))
+
+### 🩹 Fixes
+
+- Only show reopen browser shortcut when it can be done ([#1263](https://github.com/wxt-dev/wxt/pull/1263))
+- Import entrypoint improvements ([#1207](https://github.com/wxt-dev/wxt/pull/1207))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+- 1natsu ([@1natsu172](http://github.com/1natsu172))
+
+## v0.19.19
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.18...wxt-v0.19.19)
+
+### 🚀 Enhancements
+
+- Keyboard shortcut to reopen the browser without restarting the dev command ([#1211](https://github.com/wxt-dev/wxt/pull/1211))
+
+### 🩹 Fixes
+
+- Prevent changing dev server port when reloading config ([#1241](https://github.com/wxt-dev/wxt/pull/1241))
+- Ensure content scripts are registered immediately in dev mode ([#1253](https://github.com/wxt-dev/wxt/pull/1253))
+- Exclude skipped entrypoints from Firefox sources zip ([#1238](https://github.com/wxt-dev/wxt/pull/1238))
+
+### ❤️ Contributors
+
+- Nishu ([@nishu-murmu](http://github.com/nishu-murmu))
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+
+## v0.19.18
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.17...wxt-v0.19.18)
+
+### 🩹 Fixes
+
+- Correct `dev.reloadCommand` restriction to consider only commands with suggested keys ([#1226](https://github.com/wxt-dev/wxt/pull/1226))
+
+### 🌊 Types
+
+- Add overloads to `ContentScriptContext#addEventListener` for different targets ([#1245](https://github.com/wxt-dev/wxt/pull/1245))
+
+### 🏡 Chore
+
+- Refactor `findEntrypoints` to return all entrypoints with `skipped` set properly ([#1244](https://github.com/wxt-dev/wxt/pull/1244))
+
+### ❤️ Contributors
+
+- Aaron ([@aklinker1](http://github.com/aklinker1))
+- Jaguar Zhou ([@aiktb](http://github.com/aiktb))
+
 ## v0.19.17

 [compare changes](https://github.com/wxt-dev/wxt/compare/wxt-v0.19.16...wxt-v0.19.17)
@@ -2667,4 +2725,4 @@ Initial release of WXT. Full support for production builds and initial toolkit f
 ### 🤖 CI

 - Create validation workflow ([#12](https://github.com/wxt-dev/wxt/pull/12))
- Create release workflow ([#13](https://github.com/wxt-dev/wxt/pull/13))
+- Create release workflow ([#13](https://github.com/wxt-dev/wxt/pull/13))
@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest';
+import { TestProject } from '../utils';
+
+describe('Dev Mode', () => {
+  it('should not change ports when restarting the server', async () => {
+    const project = new TestProject();
+    project.addFile(
+      'entrypoints/background.ts',
+      'export default defineBackground(() => {})',
+    );
+
+    const server = await project.startServer({
+      runner: {
+        disabled: true,
+      },
+    });
+    const initialPort = server.port;
+    await server.restart();
+    const finalPort = server.port;
+    await server.stop();
+
+    expect(finalPort).toBe(initialPort);
+  });
+});
@@ -154,7 +154,7 @@ describe('Hooks', () => {
      'build:publicAssets': true,
      'build:manifestGenerated': true,
      'entrypoints:grouped': true,
-      'entrypoints:resolved': true,
+      'entrypoints:resolved': 2,
      'vite:build:extendConfig': 1,
      'vite:devServer:extendConfig': false,
      'zip:start': true,
@@ -181,6 +181,42 @@ describe('Zipping', () => {
    );
  });

+  it('should exclude skipped entrypoints from respective browser sources zip', async () => {
+    const project = new TestProject({
+      name: 'test',
+      version: '1.0.0',
+    });
+    project.addFile(
+      'entrypoints/not-firefox.content.ts',
+      `export default defineContentScript({
+        matches: ['*://*/*'],
+        exclude: ['firefox'],
+        main() {},
+      });`,
+    );
+    project.addFile(
+      'entrypoints/all.content.ts',
+      `export default defineContentScript({
+        matches: ['*://*/*'],
+        main(ctx) {},
+      });
+`,
+    );
+    const unzipDir = project.resolvePath('.output/test-1.0.0-sources');
+    const sourcesZip = project.resolvePath('.output/test-1.0.0-sources.zip');
+
+    await project.zip({
+      browser: 'firefox',
+    });
+    await extract(sourcesZip, { dir: unzipDir });
+    expect(
+      await project.fileExists(unzipDir, 'entrypoints/not-firefox.content.ts'),
+    ).toBe(false);
+    expect(
+      await project.fileExists(unzipDir, 'entrypoints/all.content.ts'),
+    ).toBe(true);
+  });
+
  it.each(['firefox', 'opera'])(
    'should create sources zip for "%s" browser when sourcesZip is undefined',
    async (browser) => {
@@ -1,7 +1,7 @@
 {
  "name": "wxt",
  "type": "module",
-  "version": "0.19.17",
+  "version": "0.19.20",
  "description": "Next gen framework for developing web extensions",
  "repository": {
    "type": "git",
@@ -81,6 +81,7 @@
    "prepack": "pnpm build"
  },
  "dependencies": {
+    "@1natsu/wait-element": "^4.1.2",
    "@aklinker1/rollup-plugin-visualizer": "5.12.0",
    "@types/chrome": "^0.0.280",
    "@types/webextension-polyfill": "^0.12.1",
@@ -3,7 +3,15 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { ContentScriptContext } from '..';
 import { fakeBrowser } from '@webext-core/fake-browser';
-import { sleep } from '../../../core/utils/time';
+
+/**
+ * When dispatching events on document/window/etc, they are fired on the next
+ * tick of the event loop. So waiting a timeout of 0 will ensure they've been
+ * fired.
+ */
+function waitForEventsToFire() {
+  return new Promise((res) => setTimeout(res));
+}

 describe('Content Script Context', () => {
  beforeEach(() => {
@@ -31,11 +39,11 @@ describe('Content Script Context', () => {
    ctx.onInvalidated(onInvalidated);

    // Wait for events to run before next tick next tick
-    await sleep(0);
+    await waitForEventsToFire();

    // Create a new context after first is initialized, and wait for it to initialize
    new ContentScriptContext(name);
-    await sleep(0);
+    await waitForEventsToFire();

    expect(onInvalidated).toBeCalled();
    expect(ctx.isValid).toBe(false);
@@ -47,13 +55,35 @@ describe('Content Script Context', () => {
    ctx.onInvalidated(onInvalidated);

    // Wait for events to run before next tick next tick
-    await sleep(0);
+    await waitForEventsToFire();

    // Create a new context after first is initialized, and wait for it to initialize
    new ContentScriptContext('test2');
-    await sleep(0);
+    await waitForEventsToFire();

    expect(onInvalidated).not.toBeCalled();
    expect(ctx.isValid).toBe(true);
  });
+
+  describe('addEventListener', () => {
+    const context = new ContentScriptContext('test');
+    it('should infer types correctly for the window target', () => {
+      context.addEventListener(window, 'DOMContentLoaded', (_) => {});
+      context.addEventListener(window, 'orientationchange', (_) => {});
+      context.addEventListener(window, 'wxt:locationchange', (_) => {});
+      // @ts-expect-error
+      context.addEventListener(window, 'visibilitychange', (_) => {});
+    });
+
+    it('should infer types correctly for the document target', () => {
+      context.addEventListener(document, 'visibilitychange', (_) => {});
+      context.addEventListener(document, 'readystatechange', (_) => {});
+    });
+
+    it('should infer types correctly for HTML element targets', () => {
+      const button = document.createElement('button');
+      context.addEventListener(button, 'click', (_) => {});
+      context.addEventListener(button, 'mouseover', (_) => {});
+    });
+  });
 });
@@ -175,19 +175,32 @@ export class ContentScriptContext implements AbortController {
   * ctx.addEventListener(document, "visibilitychange", () => {
   *   // ...
   * });
-   * ctx.addEventListener(document, "wxt:locationchange", () => {
+   * ctx.addEventListener(window, "wxt:locationchange", () => {
   *   // ...
   * });
   */
-  addEventListener<
-    TTarget extends EventTarget,
-    TType extends keyof WxtContentScriptEventMap,
-  >(
-    target: TTarget,
+  addEventListener<TType extends keyof WxtWindowEventMap>(
+    target: Window,
    type: TType,
-    handler: (event: WxtContentScriptEventMap[TType]) => void,
+    handler: (event: WxtWindowEventMap[TType]) => void,
    options?: AddEventListenerOptions,
-  ) {
+  ): void;
+  addEventListener<TType extends keyof DocumentEventMap>(
+    target: Document,
+    type: keyof DocumentEventMap,
+    handler: (event: DocumentEventMap[TType]) => void,
+    options?: AddEventListenerOptions,
+  ): void;
+  addEventListener<TTarget extends EventTarget>(
+    target: TTarget,
+    ...params: Parameters<TTarget['addEventListener']>
+  ): void;
+  addEventListener(
+    target: EventTarget,
+    type: string,
+    handler: (event: Event) => void,
+    options?: AddEventListenerOptions,
+  ): void {
    if (type === 'wxt:locationchange') {
      // Start the location watcher when adding the event for the first time
      if (this.isValid) this.locationWatcher.run();
@@ -195,7 +208,6 @@ export class ContentScriptContext implements AbortController {

    target.addEventListener?.(
      type.startsWith('wxt:') ? getUniqueEventName(type) : type,
-      // @ts-expect-error: Event don't match, but that's OK, EventTarget doesn't allow custom types in the callback
      handler,
      {
        ...options,
@@ -247,6 +259,6 @@ export class ContentScriptContext implements AbortController {
  }
 }

-interface WxtContentScriptEventMap extends WindowEventMap {
+export interface WxtWindowEventMap extends WindowEventMap {
  'wxt:locationchange': WxtLocationChangeEvent;
 }
@@ -1,12 +1,43 @@
 /** @vitest-environment happy-dom */
-import { describe, it, beforeEach, vi, expect } from 'vitest';
-import { createIntegratedUi, createIframeUi, createShadowRootUi } from '..';
+import { describe, it, beforeEach, afterEach, vi, expect } from 'vitest';
+import {
+  createIntegratedUi,
+  createIframeUi,
+  createShadowRootUi,
+  ContentScriptUi,
+} from '..';
 import { ContentScriptContext } from '../../content-script-context';

+/**
+ * Util for floating promise.
+ */
+async function runMicrotasks() {
+  return await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
 function appendTestApp(container: HTMLElement) {
  container.innerHTML = '<app>Hello world</app>';
 }

+function appendTestElement({
+  tagName = 'div',
+  id,
+}: {
+  tagName?: string;
+  id: string;
+}) {
+  const parent = document.querySelector('#parent');
+  if (!parent) {
+    throw Error(
+      'Parent element not found. Please check the testing environment DOM',
+    );
+  }
+  const element = document.createElement(tagName);
+  element.id = id;
+  parent.append(element);
+  return element;
+}
+
 const fetch = vi.fn();

 describe('Content Script UIs', () => {
@@ -480,4 +511,223 @@ describe('Content Script UIs', () => {
      });
    });
  });
+
+  /**
+   * Need call runMicrotasks after floating-promise and append/remove dom
+   */
+  describe('auto mount', () => {
+    const DYNAMIC_CHILD_ID = 'dynamic-child';
+    let ui: ContentScriptUi<any>;
+    beforeEach(async () => {
+      ui?.remove();
+      await runMicrotasks();
+    });
+    afterEach(async () => {
+      ui?.remove();
+      await runMicrotasks();
+    });
+
+    describe.each([
+      {
+        name: 'integrated',
+        createUiFunction: createIntegratedUi,
+        uiSelector: 'div[data-wxt-integrated]',
+      },
+      {
+        name: 'iframe',
+        createUiFunction: createIframeUi,
+        uiSelector: 'div[data-wxt-iframe]',
+      },
+      {
+        name: 'shadow-root',
+        createUiFunction: createShadowRootUi,
+        uiSelector: 'test-component[data-wxt-shadow-root]',
+      },
+    ] as const)(
+      'built-in UI type: $name',
+      ({ name, createUiFunction, uiSelector }) => {
+        it('should mount when an anchor is dynamically added and unmount when an anchor is removed', async () => {
+          const onMount = vi.fn(appendTestApp);
+          const onRemove = vi.fn();
+          ui = await createUiFunction(ctx, {
+            position: 'inline',
+            onMount,
+            onRemove,
+            anchor: `#parent > #${DYNAMIC_CHILD_ID}`,
+            page: name === 'iframe' ? '/page.html' : undefined,
+            name: 'test-component',
+          });
+          let dynamicEl;
+          ui.autoMount();
+          await runMicrotasks();
+
+          for (let index = 0; index < 3; index++) {
+            await expect
+              .poll(() => document.querySelector(uiSelector))
+              .toBeNull();
+
+            dynamicEl = appendTestElement({ id: DYNAMIC_CHILD_ID });
+            await runMicrotasks();
+            await expect
+              .poll(() => document.querySelector(uiSelector))
+              .not.toBeNull();
+
+            dynamicEl.remove();
+            await runMicrotasks();
+          }
+
+          expect(onMount).toHaveBeenCalledTimes(3);
+          expect(onRemove).toHaveBeenCalledTimes(3);
+        });
+
+        describe('options', () => {
+          it('should auto-mount only once mount and remove when the `once` option is true', async () => {
+            const onMount = vi.fn(appendTestApp);
+            const onRemove = vi.fn();
+            ui = await createUiFunction(ctx, {
+              position: 'inline',
+              onMount,
+              onRemove,
+              anchor: `#parent > #${DYNAMIC_CHILD_ID}`,
+              page: name === 'iframe' ? '/page.html' : undefined,
+              name: 'test-component',
+            });
+            let dynamicEl;
+            ui.autoMount({ once: true });
+            await runMicrotasks();
+            await expect
+              .poll(() => document.querySelector(uiSelector))
+              .toBeNull();
+
+            dynamicEl = appendTestElement({ id: DYNAMIC_CHILD_ID });
+            await runMicrotasks();
+            await expect
+              .poll(() => document.querySelector(uiSelector))
+              .not.toBeNull();
+
+            dynamicEl.remove();
+            await runMicrotasks();
+            expect(onMount).toHaveBeenCalledTimes(1);
+            expect(onRemove).toHaveBeenCalledTimes(1);
+
+            // re-append after once cycle
+            dynamicEl = appendTestElement({ id: DYNAMIC_CHILD_ID });
+            await runMicrotasks();
+
+            // expect stop automount
+            await expect
+              .poll(() => document.querySelector(uiSelector))
+              .toBeNull();
+            expect(onMount).toHaveBeenCalledTimes(1);
+            expect(onRemove).toHaveBeenCalledTimes(1);
+          });
+        });
+
+        describe('invalid anchors', () => {
+          it('should throw when anchor is set as type Element', async () => {
+            ui = await createUiFunction(ctx, {
+              position: 'inline',
+              onMount: appendTestApp,
+              anchor: document.documentElement,
+              page: name === 'iframe' ? '/page.html' : undefined,
+              name: 'test-component',
+            });
+            expect(() => ui.autoMount()).toThrowError(
+              'autoMount and Element anchor option cannot be combined. Avoid passing `Element` directly or `() => Element` to the anchor.',
+            );
+          });
+
+          it('should throw when anchor is set as type `() => Element`', async () => {
+            ui = await createUiFunction(ctx, {
+              position: 'inline',
+              onMount: appendTestApp,
+              anchor: () => document.documentElement,
+              page: name === 'iframe' ? '/page.html' : undefined,
+              name: 'test-component',
+            });
+            expect(() => ui.autoMount()).toThrowError(
+              'autoMount and Element anchor option cannot be combined. Avoid passing `Element` directly or `() => Element` to the anchor.',
+            );
+          });
+        });
+
+        describe('StopAutoMount', () => {
+          it('should stop auto-mounting and remove ui when `ui.remove` is called', async () => {
+            const onMount = vi.fn(appendTestApp);
+            const onRemove = vi.fn();
+            ui = await createUiFunction(ctx, {
+              position: 'inline',
+              onMount,
+              onRemove,
+              anchor: `#parent > #${DYNAMIC_CHILD_ID}`,
+              page: name === 'iframe' ? '/page.html' : undefined,
+              name: 'test-component',
+            });
+            let dynamicEl;
+            ui.autoMount();
+            await runMicrotasks();
+
+            dynamicEl = appendTestElement({ id: DYNAMIC_CHILD_ID });
+            await runMicrotasks();
+            await expect
+              .poll(() => document.querySelector(uiSelector))
+              .not.toBeNull();
+
+            dynamicEl.remove();
+            await runMicrotasks();
+            expect(onMount).toHaveBeenCalledTimes(1);
+            expect(onRemove).toHaveBeenCalledTimes(1);
+
+            ui.remove();
+
+            dynamicEl = appendTestElement({ id: DYNAMIC_CHILD_ID });
+            dynamicEl.remove();
+            await runMicrotasks();
+            expect(onMount).toHaveBeenCalledTimes(1);
+            expect(onRemove).toHaveBeenCalledTimes(2);
+          });
+
+          it('should call internal StopAutoMount when `ui.remove` is called', async () => {
+            const onMount = vi.fn(appendTestApp);
+            const onRemove = vi.fn();
+            const onStop = vi.fn();
+            ui = await createUiFunction(ctx, {
+              position: 'inline',
+              onMount,
+              onRemove,
+              anchor: `#parent > #${DYNAMIC_CHILD_ID}`,
+              page: name === 'iframe' ? '/page.html' : undefined,
+              name: 'test-component',
+            });
+            ui.autoMount({ onStop });
+            ui.remove();
+            expect(onStop).toHaveBeenCalledTimes(1);
+            expect(onRemove).toHaveBeenCalledTimes(1);
+          });
+
+          it('should allow calling automount again after internal StopAutoMount is called', async () => {
+            const onMount = vi.fn(appendTestApp);
+            ui = await createUiFunction(ctx, {
+              position: 'inline',
+              onMount,
+              anchor: `#parent > #${DYNAMIC_CHILD_ID}`,
+              page: name === 'iframe' ? '/page.html' : undefined,
+              name: 'test-component',
+            });
+            const onStop = vi.fn();
+            ui.autoMount({ onStop });
+            ui.autoMount({ onStop });
+
+            ui.remove();
+            expect(onStop).toBeCalledTimes(1);
+
+            ui.autoMount({ onStop });
+
+            ui.remove();
+            expect(onStop).toBeCalledTimes(2);
+          });
+        });
+      },
+    );
+  });
 });
@@ -1,12 +1,22 @@
 import { browser } from 'wxt/browser';
+import { waitElement } from '@1natsu/wait-element';
+import {
+  isExist as mountDetector,
+  isNotExist as removeDetector,
+} from '@1natsu/wait-element/detectors';
 import { ContentScriptContext } from '..';
 import {
+  AutoMount,
+  AutoMountOptions,
+  BaseMountFunctions,
  ContentScriptAnchoredOptions,
  ContentScriptPositioningOptions,
+  ContentScriptUiOptions,
  IframeContentScriptUi,
  IframeContentScriptUiOptions,
  IntegratedContentScriptUi,
  IntegratedContentScriptUiOptions,
+  MountFunctions,
  ShadowRootContentScriptUi,
  ShadowRootContentScriptUiOptions,
 } from './types';
@@ -39,6 +49,14 @@ export function createIntegratedUi<TMounted>(
    mounted = undefined;
  };

+  const mountFunctions = createMountFunctions(
+    {
+      mount,
+      remove,
+    },
+    options,
+  );
+
  ctx.onInvalidated(remove);

  return {
@@ -46,8 +64,7 @@ export function createIntegratedUi<TMounted>(
      return mounted;
    },
    wrapper,
-    mount,
-    remove,
+    ...mountFunctions,
  };
 }

@@ -79,6 +96,14 @@ export function createIframeUi<TMounted>(
    mounted = undefined;
  };

+  const mountFunctions = createMountFunctions(
+    {
+      mount,
+      remove,
+    },
+    options,
+  );
+
  ctx.onInvalidated(remove);

  return {
@@ -87,8 +112,7 @@ export function createIframeUi<TMounted>(
    },
    iframe,
    wrapper,
-    mount,
-    remove,
+    ...mountFunctions,
  };
 }

@@ -137,7 +161,7 @@ export async function createShadowRootUi<TMounted>(
  const remove = () => {
    // Cleanup mounted state
    options.onRemove?.(mounted);
-    // Detatch shadow root from DOM
+    // Detach shadow root from DOM
    shadowHost.remove();
    // Remove children from uiContainer
    while (uiContainer.lastChild)
@@ -146,14 +170,21 @@ export async function createShadowRootUi<TMounted>(
    mounted = undefined;
  };

+  const mountFunctions = createMountFunctions(
+    {
+      mount,
+      remove,
+    },
+    options,
+  );
+
  ctx.onInvalidated(remove);

  return {
    shadow,
    shadowHost,
    uiContainer,
-    mount,
-    remove,
+    ...mountFunctions,
    get mounted() {
      return mounted;
    },
@@ -256,6 +287,107 @@ function mountUi(
  }
 }

+function createMountFunctions<TMounted>(
+  baseFunctions: BaseMountFunctions,
+  options: ContentScriptUiOptions<TMounted>,
+): MountFunctions {
+  let autoMountInstance: AutoMount | undefined = undefined;
+
+  const stopAutoMount = () => {
+    autoMountInstance?.stopAutoMount();
+    autoMountInstance = undefined;
+  };
+
+  const mount = () => {
+    baseFunctions.mount();
+  };
+
+  const unmount = baseFunctions.remove;
+
+  const remove = () => {
+    stopAutoMount();
+    baseFunctions.remove();
+  };
+
+  const autoMount = (autoMountOptions?: AutoMountOptions) => {
+    if (autoMountInstance) {
+      logger.warn('autoMount is already set.');
+    }
+    autoMountInstance = autoMountUi(
+      { mount, unmount, stopAutoMount },
+      {
+        ...options,
+        ...autoMountOptions,
+      },
+    );
+  };
+
+  return {
+    mount,
+    remove,
+    autoMount,
+  };
+}
+
+function autoMountUi(
+  uiCallbacks: {
+    mount: () => void;
+    unmount: () => void;
+    stopAutoMount: () => void;
+  },
+  options: ContentScriptAnchoredOptions & AutoMountOptions,
+): AutoMount {
+  const abortController = new AbortController();
+  const EXPLICIT_STOP_REASON = 'explicit_stop_auto_mount';
+  const _stopAutoMount = () => {
+    abortController.abort(EXPLICIT_STOP_REASON);
+    options.onStop?.();
+  };
+
+  let resolvedAnchor =
+    typeof options.anchor === 'function' ? options.anchor() : options.anchor;
+  if (resolvedAnchor instanceof Element) {
+    throw Error(
+      'autoMount and Element anchor option cannot be combined. Avoid passing `Element` directly or `() => Element` to the anchor.',
+    );
+  }
+
+  async function observeElement(selector: string | null | undefined) {
+    let isAnchorExist = !!getAnchor(options);
+
+    while (!abortController.signal.aborted) {
+      try {
+        const changedAnchor = await waitElement(selector ?? 'body', {
+          customMatcher: () => getAnchor(options) ?? null,
+          detector: isAnchorExist ? removeDetector : mountDetector,
+          signal: abortController.signal,
+        });
+        isAnchorExist = !!changedAnchor;
+        if (isAnchorExist) {
+          uiCallbacks.mount();
+        } else {
+          uiCallbacks.unmount();
+          if (options.once) {
+            uiCallbacks.stopAutoMount();
+          }
+        }
+      } catch (error) {
+        if (
+          abortController.signal.aborted &&
+          abortController.signal.reason === EXPLICIT_STOP_REASON
+        ) {
+          break;
+        } else {
+          throw error;
+        }
+      }
+    }
+  }
+  observeElement(resolvedAnchor);
+
+  return { stopAutoMount: _stopAutoMount };
+}
+
 /**
 * Load the CSS for the current entrypoint.
 */
@@ -36,18 +36,7 @@ export interface ShadowRootContentScriptUi<TMounted>
  shadow: ShadowRoot;
 }

-export interface ContentScriptUi<TMounted> {
-  /**
-   * Function that mounts or remounts the UI on the page.
-   */
-  mount: () => void;
-  /**
-   * Function that removes the UI from the webpage.
-   */
-  remove: () => void;
-  /**>
-   * Custom data returned from the `options.mount` function.
-   */
+export interface ContentScriptUi<TMounted> extends MountFunctions {
  mounted: TMounted | undefined;
 }

@@ -216,3 +205,40 @@ export interface ContentScriptAnchoredOptions {
   */
  append?: ContentScriptAppendMode | ((anchor: Element, ui: Element) => void);
 }
+
+export interface BaseMountFunctions {
+  /**
+   * Function that mounts or remounts the UI on the page.
+   */
+  mount: () => void;
+
+  /**
+   * Function that removes the UI from the webpage.
+   */
+  remove: () => void;
+}
+
+export interface MountFunctions extends BaseMountFunctions {
+  /**
+   * Call `ui.autoMount()` to automatically mount and remove the UI as the anchor is dynamically added/removed by the webpage.
+   */
+  autoMount: (options?: AutoMountOptions) => void;
+}
+
+export type AutoMountOptions = {
+  /**
+   * When true, only mount and unmount a UI once.
+   */
+  once?: boolean;
+  /**
+   * The callback triggered when `StopAutoMount` is called.
+   */
+  onStop?: () => void;
+};
+export type StopAutoMount = () => void;
+export interface AutoMount {
+  /**
+   * Stop watching the anchor element for changes, but keep the UI mounted.
+   */
+  stopAutoMount: StopAutoMount;
+}
@@ -24,6 +24,8 @@ import { importEntrypointFile } from '../../utils/building';
 import { ViteNodeServer } from 'vite-node/server';
 import { ViteNodeRunner } from 'vite-node/client';
 import { installSourcemapsSupport } from 'vite-node/source-map';
+import { createExtensionEnvironment } from '../../utils/environments';
+import { relative } from 'node:path';

 export async function createViteBuilder(
  wxtConfig: ResolvedConfig,
@@ -220,55 +222,104 @@ export async function createViteBuilder(
    };
  };

+  const createViteNodeImporter = async (paths: string[]) => {
+    const baseConfig = await getBaseConfig({
+      excludeAnalysisPlugin: true,
+    });
+    // Disable dep optimization, as recommended by vite-node's README
+    baseConfig.optimizeDeps ??= {};
+    baseConfig.optimizeDeps.noDiscovery = true;
+    baseConfig.optimizeDeps.include = [];
+    const envConfig: vite.InlineConfig = {
+      plugins: paths.map((path) =>
+        wxtPlugins.removeEntrypointMainFunction(wxtConfig, path),
+      ),
+    };
+    const config = vite.mergeConfig(baseConfig, envConfig);
+    const server = await vite.createServer(config);
+    await server.pluginContainer.buildStart({});
+    const node = new ViteNodeServer(
+      // @ts-ignore: Some weird type error...
+      server,
+    );
+    installSourcemapsSupport({
+      getSourceMap: (source) => node.getSourceMap(source),
+    });
+    const runner = new ViteNodeRunner({
+      root: server.config.root,
+      base: server.config.base,
+      // when having the server and runner in a different context,
+      // you will need to handle the communication between them
+      // and pass to this function
+      fetchModule(id) {
+        return node.fetchModule(id);
+      },
+      resolveId(id, importer) {
+        return node.resolveId(id, importer);
+      },
+    });
+    return { runner, server };
+  };
+
+  const requireDefaultExport = (path: string, mod: any) => {
+    const relativePath = relative(wxtConfig.root, path);
+    if (mod?.default == null) {
+      const defineFn = relativePath.includes('.content')
+        ? 'defineContentScript'
+        : relativePath.includes('background')
+          ? 'defineBackground'
+          : 'defineUnlistedScript';
+
+      throw Error(
+        `${relativePath}: Default export not found, did you forget to call "export default ${defineFn}(...)"?`,
+      );
+    }
+  };
+
  return {
    name: 'Vite',
    version: vite.version,
    async importEntrypoint(path) {
+      const env = createExtensionEnvironment();
      switch (wxtConfig.entrypointLoader) {
        default:
        case 'jiti': {
-          return await importEntrypointFile(path);
+          return await env.run(() => importEntrypointFile(path));
        }
        case 'vite-node': {
-          const baseConfig = await getBaseConfig({
-            excludeAnalysisPlugin: true,
-          });
-          // Disable dep optimization, as recommended by vite-node's README
-          baseConfig.optimizeDeps ??= {};
-          baseConfig.optimizeDeps.noDiscovery = true;
-          baseConfig.optimizeDeps.include = [];
-          const envConfig: vite.InlineConfig = {
-            plugins: [wxtPlugins.removeEntrypointMainFunction(wxtConfig, path)],
-          };
-          const config = vite.mergeConfig(baseConfig, envConfig);
-          const server = await vite.createServer(config);
-          await server.pluginContainer.buildStart({});
-          const node = new ViteNodeServer(
-            // @ts-ignore: Some weird type error...
-            server,
-          );
-          installSourcemapsSupport({
-            getSourceMap: (source) => node.getSourceMap(source),
-          });
-          const runner = new ViteNodeRunner({
-            root: server.config.root,
-            base: server.config.base,
-            // when having the server and runner in a different context,
-            // you will need to handle the communication between them
-            // and pass to this function
-            fetchModule(id) {
-              return node.fetchModule(id);
-            },
-            resolveId(id, importer) {
-              return node.resolveId(id, importer);
-            },
-          });
-          const res = await runner.executeFile(path);
+          const { runner, server } = await createViteNodeImporter([path]);
+          const res = await env.run(() => runner.executeFile(path));
          await server.close();
+          requireDefaultExport(path, res);
          return res.default;
        }
      }
    },
+    async importEntrypoints(paths) {
+      const env = createExtensionEnvironment();
+      switch (wxtConfig.entrypointLoader) {
+        default:
+        case 'jiti': {
+          return await env.run(() =>
+            Promise.all(paths.map(importEntrypointFile)),
+          );
+        }
+        case 'vite-node': {
+          const { runner, server } = await createViteNodeImporter(paths);
+          const res = await env.run(() =>
+            Promise.all(
+              paths.map(async (path) => {
+                const mod = await runner.executeFile(path);
+                requireDefaultExport(path, mod);
+                return mod.default;
+              }),
+            ),
+          );
+          await server.close();
+          return res;
+        }
+      }
+    },
    async build(group) {
      let entryConfig;
      if (Array.isArray(group)) entryConfig = getMultiPageConfig(group);
@@ -27,6 +27,7 @@ import {
  getContentScriptJs,
  mapWxtOptionsToRegisteredContentScript,
 } from './utils/content-scripts';
+import { createKeyboardShortcuts } from './keyboard-shortcuts';

 /**
 * Creates a dev server and pre-builds all the files that need to exist before loading the extension.
@@ -96,21 +97,30 @@ async function createServerInternal(): Promise<WxtDevServer> {
      wxt.logger.success(`Started dev server @ ${server.origin}`);
      await wxt.hooks.callHook('server:started', wxt, server);

-      await buildAndOpenBrowser();
-
-      // Register content scripts for the first time after the background starts up since they're not
-      // listed in the manifest
+      // Register content scripts for the first time after the background starts
+      // up since they're not listed in the manifest.
+      // Add listener before opening the browser to guarantee it is present when
+      // the extension sends back the initialization message.
      server.ws.on('wxt:background-initialized', () => {
        if (server.currentOutput == null) return;
        reloadContentScripts(server.currentOutput.steps, server);
      });

+      await buildAndOpenBrowser();
+
      // Listen for file changes and reload different parts of the extension accordingly
      const reloadOnChange = createFileReloader(server);
      server.watcher.on('all', reloadOnChange);
+      keyboardShortcuts.start();
+      keyboardShortcuts.printHelp({
+        canReopenBrowser:
+          !wxt.config.runnerConfig.config.disabled && !!runner.canOpen?.(),
+      });
    },
+
    async stop() {
      wasStopped = true;
+      keyboardShortcuts.stop();
      await runner.closeBrowser();
      await builderServer.close();
      await wxt.hooks.callHook('server:closed', wxt, server);
@@ -136,11 +146,14 @@ async function createServerInternal(): Promise<WxtDevServer> {
    },
    async restartBrowser() {
      await runner.closeBrowser();
+      keyboardShortcuts.stop();
      await wxt.reloadConfig();
      runner = await createExtensionRunner();
      await runner.openBrowser();
+      keyboardShortcuts.start();
    },
  };
+  const keyboardShortcuts = createKeyboardShortcuts(server);

  const buildAndOpenBrowser = async () => {
    // Build after starting the dev server so it can be used to transform HTML files
@@ -230,6 +243,7 @@ function createFileReloader(server: WxtDevServer) {
            break;
          case 'content-script-reload':
            reloadContentScripts(changes.changedSteps, server);
+
            const rebuiltNames = changes.rebuildGroups
              .flat()
              .map((entry) => entry.name);
@@ -0,0 +1,60 @@
+import readline from 'node:readline';
+import { WxtDevServer } from '../types';
+import { wxt } from './wxt';
+import pc from 'picocolors';
+
+export interface KeyboardShortcutWatcher {
+  start(): void;
+  stop(): void;
+  printHelp(flags: { canReopenBrowser: boolean }): void;
+}
+
+/**
+ * Function that creates a keyboard shortcut handler for the extension.
+ */
+export function createKeyboardShortcuts(
+  server: WxtDevServer,
+): KeyboardShortcutWatcher {
+  let isWatching = false;
+  let rl: readline.Interface | undefined;
+
+  const handleInput = (line: string) => {
+    // Only handle our specific command
+    if (line.trim() === 'o') {
+      server.restartBrowser();
+    }
+  };
+
+  return {
+    start() {
+      if (isWatching) return;
+
+      rl = readline.createInterface({
+        input: process.stdin,
+        terminal: false, // Don't intercept ctrl+C, ctrl+Z, etc
+      });
+
+      rl.on('line', handleInput);
+      isWatching = true;
+    },
+
+    stop() {
+      if (!isWatching) return;
+
+      if (rl) {
+        rl.close();
+        rl = undefined;
+      }
+
+      isWatching = false;
+    },
+
+    printHelp(flags) {
+      if (flags.canReopenBrowser) {
+        wxt.logger.info(
+          `${pc.dim('Press')} ${pc.bold('o + enter')} ${pc.dim('to reopen the browser')}`,
+        );
+      }
+    },
+  };
+}
@@ -11,6 +11,9 @@ export function createWebExtRunner(): ExtensionRunner {
  let runner: WebExtRunInstance | undefined;

  return {
+    canOpen() {
+      return true;
+    },
    async openBrowser() {
      const startTime = Date.now();

@@ -36,11 +36,12 @@ describe('findEntrypoints', () => {
    outDir: resolve('.output'),
    command: 'build',
  });
-  let importEntrypointMock: Mock;
+  let importEntrypointsMock: Mock<typeof wxt.builder.importEntrypoints>;

  beforeEach(() => {
    setFakeWxt({ config });
-    importEntrypointMock = vi.mocked(wxt.builder.importEntrypoint);
+    importEntrypointsMock = vi.mocked(wxt.builder.importEntrypoints);
+    importEntrypointsMock.mockResolvedValue([]);
  });

  it.each<[string, string, PopupEntrypoint]>([
@@ -210,13 +211,13 @@ describe('findEntrypoints', () => {
        matches: ['<all_urls>'],
      };
      globMock.mockResolvedValueOnce([path]);
-      importEntrypointMock.mockResolvedValue(options);
+      importEntrypointsMock.mockResolvedValue([options]);

      const entrypoints = await findEntrypoints();

      expect(entrypoints).toHaveLength(1);
      expect(entrypoints[0]).toEqual({ ...expected, options });
-      expect(importEntrypointMock).toBeCalledWith(expected.inputPath);
+      expect(importEntrypointsMock).toBeCalledWith([expected.inputPath]);
    },
  );

@@ -244,17 +245,17 @@ describe('findEntrypoints', () => {
  ])(
    'should find and load background entrypoint config from %s',
    async (path, expected) => {
-      const options: BackgroundEntrypointOptions = {
+      const options = {
        type: 'module',
-      };
+      } satisfies BackgroundEntrypointOptions;
      globMock.mockResolvedValueOnce([path]);
-      importEntrypointMock.mockResolvedValue(options);
+      importEntrypointsMock.mockResolvedValue([options]);

      const entrypoints = await findEntrypoints();

      expect(entrypoints).toHaveLength(1);
      expect(entrypoints[0]).toEqual({ ...expected, options });
-      expect(importEntrypointMock).toBeCalledWith(expected.inputPath);
+      expect(importEntrypointsMock).toBeCalledWith([expected.inputPath]);
    },
  );

@@ -339,11 +340,11 @@ describe('findEntrypoints', () => {
      },
      builder: wxt.builder,
    });
-    const options: BackgroundEntrypointOptions = {
+    const options = {
      type: 'module',
-    };
+    } satisfies BackgroundEntrypointOptions;
    globMock.mockResolvedValueOnce(['background.ts']);
-    importEntrypointMock.mockResolvedValue(options);
+    importEntrypointsMock.mockResolvedValue([options]);

    const entrypoints = await findEntrypoints();

@@ -357,11 +358,11 @@ describe('findEntrypoints', () => {
      },
      builder: wxt.builder,
    });
-    const options: BackgroundEntrypointOptions = {
+    const options = {
      type: 'module',
-    };
+    } satisfies BackgroundEntrypointOptions;
    globMock.mockResolvedValueOnce(['background.ts']);
-    importEntrypointMock.mockResolvedValue(options);
+    importEntrypointsMock.mockResolvedValue([options]);

    const entrypoints = await findEntrypoints();

@@ -410,15 +411,15 @@ describe('findEntrypoints', () => {
        outputDir: config.outDir,
        skipped: false,
      };
-      const options: BaseEntrypointOptions = {};
+      const options = {} satisfies BaseEntrypointOptions;
      globMock.mockResolvedValueOnce([path]);
-      importEntrypointMock.mockResolvedValue(options);
+      importEntrypointsMock.mockResolvedValue([options]);

      const entrypoints = await findEntrypoints();

      expect(entrypoints).toHaveLength(1);
      expect(entrypoints[0]).toEqual({ ...expected, options });
-      expect(importEntrypointMock).toBeCalledWith(expected.inputPath);
+      expect(importEntrypointsMock).toBeCalledWith([expected.inputPath]);
    },
  );

@@ -701,29 +702,39 @@ describe('findEntrypoints', () => {
  });

  describe('include option', () => {
-    it("should filter out the background when include doesn't contain the target browser", async () => {
+    it("should mark the background as skipped when include doesn't contain the target browser", async () => {
      globMock.mockResolvedValueOnce(['background.ts']);
-      importEntrypointMock.mockResolvedValue({
-        include: ['not' + config.browser],
-      });
+      importEntrypointsMock.mockResolvedValue([
+        { include: ['not' + config.browser] },
+      ]);

      const entrypoints = await findEntrypoints();

-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'background',
+          skipped: true,
+        }),
+      ]);
    });

-    it("should filter out content scripts when include doesn't contain the target browser", async () => {
+    it("should mark content scripts as skipped when include doesn't contain the target browser", async () => {
      globMock.mockResolvedValueOnce(['example.content.ts']);
-      importEntrypointMock.mockResolvedValue({
-        include: ['not' + config.browser],
-      });
+      importEntrypointsMock.mockResolvedValue([
+        { include: ['not' + config.browser] },
+      ]);

      const entrypoints = await findEntrypoints();

-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'example',
+          skipped: true,
+        }),
+      ]);
    });

-    it("should filter out the popup when include doesn't contain the target browser", async () => {
+    it("should mark the popup as skipped when include doesn't contain the target browser", async () => {
      globMock.mockResolvedValueOnce(['popup.html']);
      readFileMock.mockResolvedValueOnce(
        `<html>
@@ -737,10 +748,15 @@ describe('findEntrypoints', () => {

      const entrypoints = await findEntrypoints();

-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'popup',
+          skipped: true,
+        }),
+      ]);
    });

-    it("should filter out the options page when include doesn't contain the target browser", async () => {
+    it("should mark the options page as skipped when include doesn't contain the target browser", async () => {
      globMock.mockResolvedValueOnce(['options.html']);
      readFileMock.mockResolvedValueOnce(
        `<html>
@@ -754,10 +770,15 @@ describe('findEntrypoints', () => {

      const entrypoints = await findEntrypoints();

-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'options',
+          skipped: true,
+        }),
+      ]);
    });

-    it("should filter out an unlisted page when include doesn't contain the target browser", async () => {
+    it("should mark unlisted pages as skipped when include doesn't contain the target browser", async () => {
      globMock.mockResolvedValueOnce(['unlisted.html']);
      readFileMock.mockResolvedValueOnce(
        `<html>
@@ -771,34 +792,45 @@ describe('findEntrypoints', () => {

      const entrypoints = await findEntrypoints();

-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'unlisted',
+          skipped: true,
+        }),
+      ]);
    });
  });

  describe('exclude option', () => {
-    it('should filter out the background when exclude contains the target browser', async () => {
+    it('should mark the background as skipped when exclude contains the target browser', async () => {
      globMock.mockResolvedValueOnce(['background.ts']);
-      importEntrypointMock.mockResolvedValue({
-        exclude: [config.browser],
-      });
+      importEntrypointsMock.mockResolvedValue([{ exclude: [config.browser] }]);

      const entrypoints = await findEntrypoints();

-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'background',
+          skipped: true,
+        }),
+      ]);
    });

-    it('should filter out content scripts when exclude contains the target browser', async () => {
+    it('should mark content scripts as skipped when exclude contains the target browser', async () => {
      globMock.mockResolvedValueOnce(['example.content.ts']);
-      importEntrypointMock.mockResolvedValue({
-        exclude: [config.browser],
-      });
+      importEntrypointsMock.mockResolvedValue([{ exclude: [config.browser] }]);

      const entrypoints = await findEntrypoints();

-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'example',
+          skipped: true,
+        }),
+      ]);
    });

-    it('should filter out the popup when exclude contains the target browser', async () => {
+    it('should mark the popup as skipped when exclude contains the target browser', async () => {
      globMock.mockResolvedValueOnce(['popup.html']);
      readFileMock.mockResolvedValueOnce(
        `<html>
@@ -810,10 +842,15 @@ describe('findEntrypoints', () => {

      const entrypoints = await findEntrypoints();

-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'popup',
+          skipped: true,
+        }),
+      ]);
    });

-    it('should filter out the options page when exclude contains the target browser', async () => {
+    it('should mark the options page as skipped when exclude contains the target browser', async () => {
      globMock.mockResolvedValueOnce(['options.html']);
      readFileMock.mockResolvedValueOnce(
        `<html>
@@ -825,10 +862,15 @@ describe('findEntrypoints', () => {

      const entrypoints = await findEntrypoints();

-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'options',
+          skipped: true,
+        }),
+      ]);
    });

-    it('should filter out an unlisted page when exclude contains the target browser', async () => {
+    it('should mark unlisted pages as skipped when exclude contains the target browser', async () => {
      globMock.mockResolvedValueOnce(['unlisted.html']);
      readFileMock.mockResolvedValueOnce(
        `<html>
@@ -840,12 +882,17 @@ describe('findEntrypoints', () => {

      const entrypoints = await findEntrypoints();

-      expect(entrypoints).toEqual([]);
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'unlisted',
+          skipped: true,
+        }),
+      ]);
    });
  });

  describe('filterEntrypoints option', () => {
-    it('should control entrypoints accessible', async () => {
+    it('should override include/exclude of individual entrypoint options', async () => {
      globMock.mockResolvedValue([
        'options/index.html',
        'popup/index.html',
@@ -864,12 +911,28 @@ describe('findEntrypoints', () => {
        builder: wxt.builder,
      });

-      importEntrypointMock.mockResolvedValue({});
+      importEntrypointsMock.mockResolvedValue([{}]);

      const entrypoints = await findEntrypoints();
-      const names = entrypoints.map((item) => item.name);
-      expect(names).toHaveLength(2);
-      expect(names).toEqual(filterEntrypoints);
+
+      expect(entrypoints).toEqual([
+        expect.objectContaining({
+          name: 'injected',
+          skipped: true,
+        }),
+        expect.objectContaining({
+          name: 'options',
+          skipped: true,
+        }),
+        expect.objectContaining({
+          name: 'popup',
+          skipped: false,
+        }),
+        expect.objectContaining({
+          name: 'ui',
+          skipped: false,
+        }),
+      ]);
    });
  });
 });
@@ -152,12 +152,16 @@ describe('groupEntrypoints', () => {
      options: {
        type: 'module',
      },
+      skipped: false,
+    });
+    const popup = fakePopupEntrypoint({
+      skipped: false,
    });
-    const popup = fakePopupEntrypoint();
    const sandbox = fakeGenericEntrypoint({
      inputPath: '/entrypoints/sandbox.html',
      name: 'sandbox',
      type: 'sandbox',
+      skipped: false,
    });

    const actual = groupEntrypoints([background, popup, sandbox]);
@@ -165,6 +169,22 @@ describe('groupEntrypoints', () => {
    expect(actual).toEqual([[background, popup], [sandbox]]);
  });

+  it('should exclude skipped entrypoints from the groups to build', () => {
+    const background = fakeBackgroundEntrypoint({
+      options: {
+        type: 'module',
+      },
+      skipped: false,
+    });
+    const popup = fakePopupEntrypoint({
+      skipped: true,
+    });
+
+    const actual = groupEntrypoints([background, popup]);
+
+    expect(actual).toEqual([[background]]);
+  });
+
  it.todo(
    'should group ESM compatible sandbox scripts with sandbox pages',
    () => {
@@ -1,19 +1,14 @@
 import { relative, resolve } from 'path';
 import {
  BackgroundEntrypoint,
-  BackgroundDefinition,
-  BaseEntrypointOptions,
-  ContentScriptDefinition,
  ContentScriptEntrypoint,
  Entrypoint,
  GenericEntrypoint,
  OptionsEntrypoint,
  PopupEntrypoint,
-  UnlistedScriptDefinition,
-  PopupEntrypointOptions,
-  OptionsEntrypointOptions,
  SidepanelEntrypoint,
-  SidepanelEntrypointOptions,
+  MainWorldContentScriptEntrypointOptions,
+  IsolatedWorldContentScriptEntrypointOptions,
 } from '../../../types';
 import fs from 'fs-extra';
 import { minimatch } from 'minimatch';
@@ -22,13 +17,15 @@ import JSON5 from 'json5';
 import glob from 'fast-glob';
 import {
  getEntrypointName,
+  isHtmlEntrypoint,
+  isJsEntrypoint,
  resolvePerBrowserOptions,
 } from '../../utils/entrypoints';
 import { VIRTUAL_NOOP_BACKGROUND_MODULE_ID } from '../../utils/constants';
 import { CSS_EXTENSIONS_PATTERN } from '../../utils/paths';
 import pc from 'picocolors';
 import { wxt } from '../../wxt';
-import { createExtensionEnvironment } from '../environments';
+import { camelCase } from 'scule';

 /**
 * Return entrypoints and their configuration by looking through the project's files.
@@ -65,14 +62,7 @@ export async function findEntrypoints(): Promise<Entrypoint[]> {
    );
    if (matchingGlob) {
      const type = PATH_GLOB_TO_TYPE_MAP[matchingGlob];
-      results.push({
-        name,
-        inputPath,
-        type,
-        skipped:
-          wxt.config.filterEntrypoints != null &&
-          !wxt.config.filterEntrypoints.has(name),
-      });
+      results.push({ name, inputPath, type });
    }
    return results;
  }, []);
@@ -83,108 +73,148 @@ export async function findEntrypoints(): Promise<Entrypoint[]> {

  // Import entrypoints to get their config
  let hasBackground = false;
-  const env = createExtensionEnvironment();
-  const entrypoints: Entrypoint[] = await env.run(() =>
-    Promise.all(
-      entrypointInfos.map(async (info): Promise<Entrypoint> => {
-        const { type } = info;
-        switch (type) {
-          case 'popup':
-            return await getPopupEntrypoint(info);
-          case 'sidepanel':
-            return await getSidepanelEntrypoint(info);
-          case 'options':
-            return await getOptionsEntrypoint(info);
-          case 'background':
-            hasBackground = true;
-            return await getBackgroundEntrypoint(info);
-          case 'content-script':
-            return await getContentScriptEntrypoint(info);
-          case 'unlisted-page':
-            return await getUnlistedPageEntrypoint(info);
-          case 'unlisted-script':
-            return await getUnlistedScriptEntrypoint(info);
-          case 'content-script-style':
-            return {
-              ...info,
-              type,
-              outputDir: resolve(wxt.config.outDir, CONTENT_SCRIPT_OUT_DIR),
-              options: {
-                include: undefined,
-                exclude: undefined,
-              },
-            };
-          default:
-            return {
-              ...info,
-              type,
-              outputDir: wxt.config.outDir,
-              options: {
-                include: undefined,
-                exclude: undefined,
-              },
-            };
-        }
-      }),
-    ),
+  const entrypointOptions = await importEntrypoints(entrypointInfos);
+  const entrypointsWithoutSkipped: Entrypoint[] = await Promise.all(
+    entrypointInfos.map(async (info): Promise<Entrypoint> => {
+      const { type } = info;
+      const options = entrypointOptions[info.inputPath] ?? {};
+      switch (type) {
+        case 'popup':
+          return await getPopupEntrypoint(info, options);
+        case 'sidepanel':
+          return await getSidepanelEntrypoint(info, options);
+        case 'options':
+          return await getOptionsEntrypoint(info, options);
+        case 'background':
+          hasBackground = true;
+          return await getBackgroundEntrypoint(info, options);
+        case 'content-script':
+          return await getContentScriptEntrypoint(info, options);
+        case 'unlisted-page':
+          return await getUnlistedPageEntrypoint(info, options);
+        case 'unlisted-script':
+          return await getUnlistedScriptEntrypoint(info, options);
+        case 'content-script-style':
+          return {
+            ...info,
+            type,
+            outputDir: resolve(wxt.config.outDir, CONTENT_SCRIPT_OUT_DIR),
+            options: {
+              include: options.include,
+              exclude: options.exclude,
+            },
+          };
+        default:
+          return {
+            ...info,
+            type,
+            outputDir: wxt.config.outDir,
+            options: {
+              include: options.include,
+              exclude: options.exclude,
+            },
+          };
+      }
+    }),
  );

  if (wxt.config.command === 'serve' && !hasBackground) {
-    entrypoints.push(
-      await getBackgroundEntrypoint({
-        inputPath: VIRTUAL_NOOP_BACKGROUND_MODULE_ID,
-        name: 'background',
-        type: 'background',
-        skipped: false,
-      }),
+    entrypointsWithoutSkipped.push(
+      await getBackgroundEntrypoint(
+        {
+          inputPath: VIRTUAL_NOOP_BACKGROUND_MODULE_ID,
+          name: 'background',
+          type: 'background',
+        },
+        {},
+      ),
    );
  }

+  // Mark entrypoints as skipped or not
+  const entrypoints = entrypointsWithoutSkipped.map((entry) => ({
+    ...entry,
+    skipped: isEntrypointSkipped(entry),
+  }));
+
  wxt.logger.debug('All entrypoints:', entrypoints);
-  const skippedEntrypointNames = entrypointInfos
+  const skippedEntrypointNames = entrypoints
    .filter((item) => item.skipped)
    .map((item) => item.name);
  if (skippedEntrypointNames.length) {
    wxt.logger.warn(
-      `Filter excluded the following entrypoints:\n${skippedEntrypointNames
-        .map((item) => `${pc.dim('-')} ${pc.cyan(item)}`)
-        .join('\n')}`,
+      [
+        'The following entrypoints have been skipped:',
+        ...skippedEntrypointNames.map(
+          (item) => `${pc.dim('-')} ${pc.cyan(item)}`,
+        ),
+      ].join('\n'),
    );
  }
-  const targetEntrypoints = entrypoints.filter((entry) => {
-    const { include, exclude } = entry.options;
-    if (include?.length && exclude?.length) {
-      wxt.logger.warn(
-        `The ${entry.name} entrypoint lists both include and exclude, but only one can be used per entrypoint. Entrypoint ignored.`,
-      );
-      return false;
-    }
-    if (exclude?.length && !include?.length) {
-      return !exclude.includes(wxt.config.browser);
-    }
-    if (include?.length && !exclude?.length) {
-      return include.includes(wxt.config.browser);
-    }
-    if (skippedEntrypointNames.includes(entry.name)) {
-      return false;
-    }
+  await wxt.hooks.callHook('entrypoints:resolved', wxt, entrypoints);

-    return true;
-  });
-  wxt.logger.debug(`${wxt.config.browser} entrypoints:`, targetEntrypoints);
-  await wxt.hooks.callHook('entrypoints:resolved', wxt, targetEntrypoints);
-
-  return targetEntrypoints;
+  return entrypoints;
 }

 interface EntrypointInfo {
  name: string;
  inputPath: string;
  type: Entrypoint['type'];
-  /**
-   * @default false
-   */
-  skipped: boolean;
+}
+
+/** Returns a map of input paths to the file's options. */
+async function importEntrypoints(infos: EntrypointInfo[]) {
+  const resMap: Record<string, Record<string, any> | undefined> = {};
+
+  const htmlInfos = infos.filter((info) => isHtmlEntrypoint(info));
+  const jsInfos = infos.filter((info) => isJsEntrypoint(info));
+
+  await Promise.all([
+    // HTML
+    ...htmlInfos.map(async (info) => {
+      const res = await importHtmlEntrypoint(info);
+      resMap[info.inputPath] = res;
+    }),
+    // JS
+    (async () => {
+      const res = await wxt.builder.importEntrypoints(
+        jsInfos.map((info) => info.inputPath),
+      );
+      res.forEach((res, i) => {
+        resMap[jsInfos[i].inputPath] = res;
+      });
+    })(),
+    // CSS - never has options
+  ]);
+
+  return resMap;
+}
+
+/** Extract `manifest.` options from meta tags, converting snake_case keys to camelCase */
+async function importHtmlEntrypoint(
+  info: EntrypointInfo,
+): Promise<Record<string, any>> {
+  const content = await fs.readFile(info.inputPath, 'utf-8');
+  const { document } = parseHTML(content);
+
+  const metaTags = document.querySelectorAll('meta');
+  const res: Record<string, any> = {
+    title: document.querySelector('title')?.textContent || undefined,
+  };
+
+  metaTags.forEach((tag) => {
+    const name = tag.name;
+    if (!name.startsWith('manifest.')) return;
+
+    const key = camelCase(name.slice(9));
+    try {
+      res[key] = JSON5.parse(tag.content);
+    } catch {
+      res[key] = tag.content;
+    }
+  });
+
+  return res;
 }

 function preventDuplicateEntrypointNames(files: EntrypointInfo[]) {
@@ -224,122 +254,105 @@ function preventNoEntrypoints(files: EntrypointInfo[]) {

 async function getPopupEntrypoint(
  info: EntrypointInfo,
+  options: Record<string, any>,
 ): Promise<PopupEntrypoint> {
-  const options = await getHtmlEntrypointOptions<PopupEntrypointOptions>(
-    info,
+  const stictOptions: PopupEntrypoint['options'] = resolvePerBrowserOptions(
    {
-      browserStyle: 'browser_style',
-      exclude: 'exclude',
-      include: 'include',
-      defaultIcon: 'default_icon',
-      defaultTitle: 'default_title',
-      mv2Key: 'type',
-    },
-    {
-      defaultTitle: (document) =>
-        document.querySelector('title')?.textContent || undefined,
-    },
-    {
-      defaultTitle: (content) => content,
-      mv2Key: (content) =>
-        content === 'page_action' ? 'page_action' : 'browser_action',
+      browserStyle: options.browserStyle,
+      exclude: options.exclude,
+      include: options.include,
+      defaultIcon: options.defaultIcon,
+      defaultTitle: options.title,
+      mv2Key: options.type,
    },
+    wxt.config.browser,
  );
+  if (stictOptions.mv2Key && stictOptions.mv2Key !== 'page_action')
+    stictOptions.mv2Key = 'browser_action';

  return {
    type: 'popup',
    name: 'popup',
-    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    options: stictOptions,
    inputPath: info.inputPath,
    outputDir: wxt.config.outDir,
-    skipped: info.skipped,
  };
 }

 async function getOptionsEntrypoint(
  info: EntrypointInfo,
+  options: Record<string, any>,
 ): Promise<OptionsEntrypoint> {
-  const options = await getHtmlEntrypointOptions<OptionsEntrypointOptions>(
-    info,
-    {
-      browserStyle: 'browser_style',
-      chromeStyle: 'chrome_style',
-      exclude: 'exclude',
-      include: 'include',
-      openInTab: 'open_in_tab',
-    },
-  );
  return {
    type: 'options',
    name: 'options',
-    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    options: resolvePerBrowserOptions(
+      {
+        browserStyle: options.browserStyle,
+        chromeStyle: options.chromeStyle,
+        exclude: options.exclude,
+        include: options.include,
+        openInTab: options.openInTab,
+      },
+      wxt.config.browser,
+    ),
    inputPath: info.inputPath,
    outputDir: wxt.config.outDir,
-    skipped: info.skipped,
  };
 }

 async function getUnlistedPageEntrypoint(
  info: EntrypointInfo,
+  options: Record<string, any>,
 ): Promise<GenericEntrypoint> {
-  const options = await getHtmlEntrypointOptions<BaseEntrypointOptions>(info, {
-    exclude: 'exclude',
-    include: 'include',
-  });
-
  return {
    type: 'unlisted-page',
    name: info.name,
    inputPath: info.inputPath,
    outputDir: wxt.config.outDir,
-    options,
-    skipped: info.skipped,
+    options: {
+      include: options.include,
+      exclude: options.exclude,
+    },
  };
 }

-async function getUnlistedScriptEntrypoint({
-  inputPath,
-  name,
-  skipped,
-}: EntrypointInfo): Promise<GenericEntrypoint> {
-  const defaultExport =
-    await wxt.builder.importEntrypoint<UnlistedScriptDefinition>(inputPath);
-  if (defaultExport == null) {
-    throw Error(
-      `${name}: Default export not found, did you forget to call "export default defineUnlistedScript(...)"?`,
-    );
-  }
-  const { main: _, ...options } = defaultExport;
+async function getUnlistedScriptEntrypoint(
+  { inputPath, name }: EntrypointInfo,
+  options: Record<string, any>,
+): Promise<GenericEntrypoint> {
  return {
    type: 'unlisted-script',
    name,
    inputPath,
    outputDir: wxt.config.outDir,
-    options: resolvePerBrowserOptions(options, wxt.config.browser),
-    skipped,
+    options: resolvePerBrowserOptions(
+      {
+        include: options.include,
+        exclude: options.exclude,
+      },
+      wxt.config.browser,
+    ),
  };
 }

-async function getBackgroundEntrypoint({
-  inputPath,
-  name,
-  skipped,
-}: EntrypointInfo): Promise<BackgroundEntrypoint> {
-  let options: Omit<BackgroundDefinition, 'main'> = {};
-  if (inputPath !== VIRTUAL_NOOP_BACKGROUND_MODULE_ID) {
-    const defaultExport =
-      await wxt.builder.importEntrypoint<BackgroundDefinition>(inputPath);
-    if (defaultExport == null) {
-      throw Error(
-        `${name}: Default export not found, did you forget to call "export default defineBackground(...)"?`,
-      );
-    }
-    const { main: _, ...moduleOptions } = defaultExport;
-    options = moduleOptions;
-  }
+async function getBackgroundEntrypoint(
+  { inputPath, name }: EntrypointInfo,
+  options: Record<string, any>,
+): Promise<BackgroundEntrypoint> {
+  const strictOptions: BackgroundEntrypoint['options'] =
+    resolvePerBrowserOptions(
+      {
+        include: options.include,
+        exclude: options.exclude,
+        persistent: options.persistent,
+        type: options.type,
+      },
+      wxt.config.browser,
+    );

  if (wxt.config.manifestVersion !== 3) {
-    delete options.type;
+    delete strictOptions.type;
  }

  return {
@@ -347,114 +360,72 @@ async function getBackgroundEntrypoint({
    name,
    inputPath,
    outputDir: wxt.config.outDir,
-    options: resolvePerBrowserOptions(options, wxt.config.browser),
-    skipped,
+    options: strictOptions,
  };
 }

-async function getContentScriptEntrypoint({
-  inputPath,
-  name,
-  skipped,
-}: EntrypointInfo): Promise<ContentScriptEntrypoint> {
-  const defaultExport =
-    await wxt.builder.importEntrypoint<ContentScriptDefinition>(inputPath);
-  if (defaultExport == null) {
-    throw Error(
-      `${name}: Default export not found, did you forget to call "export default defineContentScript(...)"?`,
-    );
-  }
-
-  const { main: _, ...options } = defaultExport;
-  if (options == null) {
-    throw Error(
-      `${name}: Default export not found, did you forget to call "export default defineContentScript(...)"?`,
-    );
-  }
+async function getContentScriptEntrypoint(
+  { inputPath, name }: EntrypointInfo,
+  options: Record<string, any>,
+): Promise<ContentScriptEntrypoint> {
  return {
    type: 'content-script',
    name,
    inputPath,
    outputDir: resolve(wxt.config.outDir, CONTENT_SCRIPT_OUT_DIR),
-    options: resolvePerBrowserOptions(options, wxt.config.browser),
-    skipped,
+    options: resolvePerBrowserOptions(
+      options as
+        | MainWorldContentScriptEntrypointOptions
+        | IsolatedWorldContentScriptEntrypointOptions,
+      wxt.config.browser,
+    ),
  };
 }

 async function getSidepanelEntrypoint(
  info: EntrypointInfo,
+  options: Record<string, any>,
 ): Promise<SidepanelEntrypoint> {
-  const options = await getHtmlEntrypointOptions<SidepanelEntrypointOptions>(
-    info,
-    {
-      browserStyle: 'browser_style',
-      exclude: 'exclude',
-      include: 'include',
-      defaultIcon: 'default_icon',
-      defaultTitle: 'default_title',
-      openAtInstall: 'open_at_install',
-    },
-    {
-      defaultTitle: (document) =>
-        document.querySelector('title')?.textContent || undefined,
-    },
-    {
-      defaultTitle: (content) => content,
-    },
-  );
-
  return {
    type: 'sidepanel',
    name: info.name,
-    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    options: resolvePerBrowserOptions(
+      {
+        browserStyle: options.browserStyle,
+        exclude: options.exclude,
+        include: options.include,
+        defaultIcon: options.defaultIcon,
+        defaultTitle: options.title,
+        openAtInstall: options.openAtInstall,
+      },
+      wxt.config.browser,
+    ),
    inputPath: info.inputPath,
    outputDir: wxt.config.outDir,
-    skipped: info.skipped,
  };
 }

-/**
- * Parse the HTML tags to extract options from them.
- */
-async function getHtmlEntrypointOptions<T extends BaseEntrypointOptions>(
-  info: EntrypointInfo,
-  keyMap: Record<keyof T, string>,
-  queries?: Partial<{
-    [key in keyof T]: (
-      document: Document,
-      manifestKey: string,
-    ) => string | undefined;
-  }>,
-  parsers?: Partial<{ [key in keyof T]: (content: string) => T[key] }>,
-): Promise<T> {
-  const content = await fs.readFile(info.inputPath, 'utf-8');
-  const { document } = parseHTML(content);
+function isEntrypointSkipped(entry: Omit<Entrypoint, 'skipped'>): boolean {
+  if (wxt.config.filterEntrypoints != null) {
+    return !wxt.config.filterEntrypoints.has(entry.name);
+  }

-  const options = {} as T;
+  const { include, exclude } = entry.options;
+  if (include?.length && exclude?.length) {
+    wxt.logger.warn(
+      `The ${entry.name} entrypoint lists both include and exclude, but only one can be used per entrypoint. Entrypoint skipped.`,
+    );
+    return true;
+  }

-  const defaultQuery = (manifestKey: string) =>
-    document
-      .querySelector(`meta[name='manifest.${manifestKey}']`)
-      ?.getAttribute('content');
+  if (exclude?.length && !include?.length) {
+    return exclude.includes(wxt.config.browser);
+  }
+  if (include?.length && !exclude?.length) {
+    return !include.includes(wxt.config.browser);
+  }

-  Object.entries(keyMap).forEach(([_key, manifestKey]) => {
-    const key = _key as keyof T;
-    const content = queries?.[key]
-      ? queries[key]!(document, manifestKey)
-      : defaultQuery(manifestKey);
-    if (content) {
-      try {
-        options[key] = (parsers?.[key] ?? JSON5.parse)(content);
-      } catch (err) {
-        wxt.logger.fatal(
-          `Failed to parse meta tag content. Usually this means you have invalid JSON5 content (content=${content})`,
-          err,
-        );
-      }
-    }
-  });
-
-  return options;
+  return false;
 }

 const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type']> = {
@@ -1,8 +1,8 @@
 import { Entrypoint, EntrypointGroup } from '../../../types';

 /**
- * Entrypoints can be build in groups. HTML pages can all be built together in a single step, while
- * content scripts must be build individually.
+ * Entrypoints are built in groups. HTML pages can all be built together in a single step,
+ * content scripts must be build individually, etc.
 *
 * This function returns the entrypoints put into these types of groups.
 */
@@ -11,6 +11,8 @@ export function groupEntrypoints(entrypoints: Entrypoint[]): EntrypointGroup[] {
  const groups: EntrypointGroup[] = [];

  for (const entry of entrypoints) {
+    if (entry.skipped) continue;
+
    let group = ENTRY_TYPE_TO_GROUP_MAP[entry.type];
    if (entry.type === 'background' && entry.options.type === 'module') {
      group = 'esm';
@@ -4,7 +4,7 @@ import {
  ResolvedPerBrowserOptions,
  TargetBrowser,
 } from '../../types';
-import path, { relative, resolve } from 'node:path';
+import path, { relative, resolve, extname } from 'node:path';
 import { normalizePath } from './paths';

 export function getEntrypointName(
@@ -76,6 +76,21 @@ export function resolvePerBrowserOptions<
 *
 * Naively just checking the file extension of the input path.
 */
-export function isHtmlEntrypoint(entrypoint: Entrypoint): boolean {
-  return entrypoint.inputPath.endsWith('.html');
+export function isHtmlEntrypoint(
+  entrypoint: Pick<Entrypoint, 'inputPath'>,
+): boolean {
+  const ext = extname(entrypoint.inputPath);
+  return ['.html'].includes(ext);
+}
+
+/**
+ * Returns true when the entrypoint is a JS entrypoint.
+ *
+ * Naively just checking the file extension of the input path.
+ */
+export function isJsEntrypoint(
+  entrypoint: Pick<Entrypoint, 'inputPath'>,
+): boolean {
+  const ext = extname(entrypoint.inputPath);
+  return ['.js', '.jsx', '.ts', '.tsx'].includes(ext);
 }
@@ -36,6 +36,14 @@ export async function registerWxt(
      return config.logger;
    },
    async reloadConfig() {
+      // Prevent changing the server port when resolving config multiple times
+      // get-port-please doesn't always return the same port if it was recently closed.
+      if (wxt.config.dev.server?.port) {
+        inlineConfig.dev ??= {};
+        inlineConfig.dev.server ??= {};
+        inlineConfig.dev.server.port = wxt.config.dev.server.port;
+      }
+
      wxt.config = await resolveConfig(inlineConfig, command);
      await wxt.hooks.callHook('config:resolved', wxt);
    },
@@ -6,7 +6,7 @@ import { getPackageJson } from './utils/package';
 import { minimatch } from 'minimatch';
 import { formatDuration } from './utils/time';
 import { printFileList } from './utils/log/printFileList';
-import { internalBuild } from './utils/building';
+import { findEntrypoints, internalBuild } from './utils/building';
 import { registerWxt, wxt } from './wxt';
 import JSZip from 'jszip';
 import glob from 'fast-glob';
@@ -55,6 +55,14 @@ export async function zip(config?: InlineConfig): Promise<string[]> {
  await wxt.hooks.callHook('zip:extension:done', wxt, outZipPath);

  if (wxt.config.zip.zipSources) {
+    const entrypoints = await findEntrypoints();
+    const skippedEntrypoints = entrypoints.filter((entry) => entry.skipped);
+    const excludeSources = [
+      ...wxt.config.zip.excludeSources,
+      ...skippedEntrypoints.map((entry) =>
+        path.relative(wxt.config.zip.sourcesRoot, entry.inputPath),
+      ),
+    ].map((paths) => paths.replaceAll('\\', '/'));
    await wxt.hooks.callHook('zip:sources:start', wxt);
    const { overrides, files: downloadedPackages } =
      await downloadPrivatePackages();
@@ -65,7 +73,7 @@ export async function zip(config?: InlineConfig): Promise<string[]> {
    );
    await zipDir(wxt.config.zip.sourcesRoot, sourcesZipPath, {
      include: wxt.config.zip.includeSources,
-      exclude: wxt.config.zip.excludeSources,
+      exclude: excludeSources,
      transform(absolutePath, zipPath, content) {
        if (zipPath.endsWith('package.json')) {
          return addOverridesToPackageJson(absolutePath, content, overrides);
@@ -45,6 +45,7 @@ export interface InlineConfig {
   * A list of entrypoint names (`"popup"`, `"options"`, etc.) to build. Will speed up the build if
   * your extension has lots of entrypoints, and you don't need to build all of them to develop a
   * feature.
+   * If specified, this completely overrides the `include`/`exclude` option provided per-entrypoint.
   */
  filterEntrypoints?: string[];
  /**
@@ -728,7 +729,14 @@ export interface BaseEntrypoint {
   * subdirectory of it.
   */
  outputDir: string;
-  skipped: boolean;
+  /**
+   * When true, the entrypoint will not be built by WXT. Normally this is set
+   * based on the `filterEntrypoints` config or the entrypoint's
+   * `include`/`exclude` options defined inside the file.
+   *
+   * See https://wxt.dev/guide/essentials/target-different-browsers.html#filtering-entrypoints
+   */
+  skipped?: boolean;
 }

 export interface GenericEntrypoint extends BaseEntrypoint {
@@ -1027,9 +1035,13 @@ export interface WxtBuilder {
   */
  version: string;
  /**
-   * Import the entrypoint file, returning the default export containing the options.
+   * Import a JS entrypoint file, returning the default export containing the options.
   */
  importEntrypoint<T>(path: string): Promise<T>;
+  /**
+   * Import a list of JS entrypoint files, returning their options.
+   */
+  importEntrypoints(paths: string[]): Promise<Record<string, unknown>[]>;
  /**
   * Build a single entrypoint group. This is effectively one of the multiple "steps" during the
   * build process.
@@ -1403,6 +1415,8 @@ export interface FsCache {
 export interface ExtensionRunner {
  openBrowser(): Promise<void>;
  closeBrowser(): Promise<void>;
+  /** Whether or not this runner actually opens the browser. */
+  canOpen?(): boolean;
 }

 export type EslintGlobalsPropValue =
@@ -330,6 +330,9 @@ importers:

  packages/wxt:
    dependencies:
+      '@1natsu/wait-element':
+        specifier: ^4.1.2
+        version: 4.1.2
      '@aklinker1/rollup-plugin-visualizer':
        specifier: 5.12.0
        version: 5.12.0(rollup@4.24.0)
@@ -566,6 +569,9 @@ importers:

 packages:

+  '@1natsu/wait-element@4.1.2':
+    resolution: {integrity: sha512-qWxSJD+Q5b8bKOvESFifvfZ92DuMsY+03SBNjTO34ipJLP6mZ9yK4bQz/vlh48aEQXoJfaZBqUwKL5BdI5iiWw==}
+
  '@aklinker1/buildc@1.1.4':
    resolution: {integrity: sha512-3SQ2zVEsX+UWg/mHfp9TqU9OPI8abRGTOadChQB0Aqb4dtIy311pBddndVPuuD4uQfIhKbvPxkzZ0rwvlw52Rw==}
    hasBin: true
@@ -3546,6 +3552,9 @@ packages:
  make-error@1.3.6:
    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}

+  many-keys-map@2.0.1:
+    resolution: {integrity: sha512-DHnZAD4phTbZ+qnJdjoNEVU1NecYoSdbOOoVmTDH46AuxDkEVh3MxTVpXq10GtcTC6mndN9dkv1rNfpjRcLnOw==}
+
  mark.js@8.11.1:
    resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}

@@ -5113,6 +5122,11 @@ packages:

 snapshots:

+  '@1natsu/wait-element@4.1.2':
+    dependencies:
+      defu: 6.1.4
+      many-keys-map: 2.0.1
+
  '@aklinker1/buildc@1.1.4':
    dependencies:
      cac: 6.7.14
@@ -8127,6 +8141,8 @@ snapshots:

  make-error@1.3.6: {}

+  many-keys-map@2.0.1: {}
+
  mark.js@8.11.1: {}

  markdown-it-footnote@4.0.0(patch_hash=ue34jdgdx43siqdj557feoepzq): {}
Author	SHA1	Message	Date
GitHub Actions	413cd9354f	chore(release): wxt v0.19.20 vhs / vhs (push) Waiting to run Details	2024-12-09 20:12:43 +00:00
不游	64a42de31f	docs: fix colored-diff in es-modules.md (#1264 )	2024-12-09 07:42:54 -06:00
Aaron	f7f03e2669	fix: Import entrypoint improvements (#1207 )	2024-12-08 12:10:05 -06:00
Aaron	1dc7c34bfd	fix: Only show reopen browser shortcut when it can be done (#1263 )	2024-12-08 08:55:01 -06:00
Aaron	0fd5c3846c	docs: Fix gramar	2024-12-07 08:57:17 -06:00
Aaron	e42e92f9df	docs: Update "Using WXT" instructions	2024-12-07 08:56:13 -06:00
Kepi	e45c91f941	docs: Add "EyeDropper" to homepage (#1260 ) Co-authored-by: Aaron Klinker <aaronklinker1@gmail.com>	2024-12-07 08:47:33 -06:00
1natsu	8f71d80f94	feat: `autoMount` content script UIs (#1210 ) Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-12-07 08:21:52 -06:00
Aaron Klinker	78e896e5fb	docs: Remove duplicate section from upgrade docs	2024-12-07 01:12:23 -06:00
GitHub Actions	a643852387	chore(release): wxt v0.19.19 vhs / vhs (push) Waiting to run Details	2024-12-06 00:28:20 +00:00
Nishu	e221252325	fix: Exclude skipped entrypoints from Firefox sources zip (#1238 ) Co-authored-by: Aaron Klinker <aaronklinker1@gmail.com>	2024-12-05 18:23:00 -06:00
Aaron	88f126e658	fix: Ensure content scripts are registered immediately in dev mode (#1253 )	2024-12-05 18:16:38 -06:00
Aaron	17af05acc8	fix: Prevent changing dev server port when reloading config (#1241 )	2024-12-05 11:48:49 -06:00
Jeremie Corpinot	fd436a0d63	docs: Add "aesthetic Notion, styled" to homepage (#1247 )	2024-12-04 16:00:23 -06:00
Nishu	0d796b63c2	feat: Keyboard shortcut to reopen the browser without restarting the dev command (#1211 ) Co-authored-by: Aaron <aaronklinker1@gmail.com> Co-authored-by: Florian Metz <me@timeraa.dev>	2024-12-03 21:42:44 -06:00
GitHub Actions	cb143d2bbc	chore(release): wxt v0.19.18 vhs / vhs (push) Waiting to run Details	2024-12-03 23:00:59 +00:00
Aaron	f3e7758521	types: Add overloads to `ContentScriptContext#addEventListener` for different targets (#1245 )	2024-12-03 16:55:33 -06:00
Aaron	23ef101954	chore: Refactor `findEntrypoints` to return all entrypoints with `skipped` set properly (#1244 )	2024-12-03 12:36:11 -06:00
spookyuser	c2f5efbde4	docs: Update `injectScript` docs to match example from examples repo (#1240 ) Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-12-03 12:23:33 -06:00
Takuya HARA	4ce178c592	docs: Changed "Chrome Extension" to "web extension" (#1229 ) Co-authored-by: Aaron <aaronklinker1@gmail.com>	2024-12-03 11:07:46 -06:00
dependabot[bot]	7aa30afa7f	chore(deps): bump codecov/codecov-action from 4 to 5 (#1237 ) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-12-01 16:13:47 -06:00