chore(release): v0.11.2

.github/workflows/validate.yml

@@ -54,7 +54,7 @@ jobs:
       matrix:
         template:
           - react
-          # - solid
+          - solid
           - svelte
           - vanilla
           - vue

CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## v0.11.2
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.11.1...v0.11.2)
+
+### 🩹 Fixes
+
+- Discover `.js`, `.jsx`, and `.tsx` unlisted scripts correctly ([#274](https://github.com/wxt-dev/wxt/pull/274))
+- Improve duplicate entrypoint name detection and catch the error before loading their config ([#276](https://github.com/wxt-dev/wxt/pull/276))
+
+### 📖 Documentation
+
+- Improve content script UI docs ([#268](https://github.com/wxt-dev/wxt/pull/268))
+
+### 🏡 Chore
+
+- Update sSolid template to vite 5 ([#265](https://github.com/wxt-dev/wxt/pull/265))
+- Add missing navigation item ([bcb93af](https://github.com/wxt-dev/wxt/commit/bcb93af))
+
+## v0.11.1
+
+[compare changes](https://github.com/wxt-dev/wxt/compare/v0.11.0...v0.11.1)
+
+### 🚀 Enhancements
+
+- Add util for detecting URL changes in content scripts ([#264](https://github.com/wxt-dev/wxt/pull/264))
+
+### 🏡 Chore
+
+- Upgrade templates to `wxt@^0.11.0` ([#263](https://github.com/wxt-dev/wxt/pull/263))
+
 ## v0.11.0
 
 [compare changes](https://github.com/wxt-dev/wxt/compare/v0.10.4...v0.11.0)
@@ -19,7 +49,7 @@
 
 #### ⚠️ Breaking Changes
 
-- ⚠️  Vite 5 support ([#261](https://github.com/wxt-dev/wxt/pull/261))
+- You will need to update any other Vite plugins to a version that supports Vite 5 ([#261](https://github.com/wxt-dev/wxt/pull/261))
 
 ### ❤️ Contributors
 

demo/src/entrypoints/location-change.content.ts

@@ -0,0 +1,11 @@
+export default defineContentScript({
+  // Site that uses HTML5 history
+  matches: ['*://*.crunchyroll.com/*'],
+
+  main(ctx) {
+    ctx.addEventListener(window, 'wxt:locationchange', ({ newUrl, oldUrl }) => {
+      console.log('Location changed:', newUrl.href, oldUrl.href);
+    });
+    console.log('Watching for location change...');
+  },
+});

docs/.vitepress/config.ts

@@ -91,6 +91,7 @@ export default defineConfig({
             { text: 'Manifest.json', link: '/guide/manifest.md' },
             { text: 'Extension APIs', link: '/guide/extension-apis.md' },
             { text: 'Storage', link: '/guide/storage.md' },
+            { text: 'Content Script UI', link: '/guide/content-script-ui.md' },
             { text: 'Remote Code', link: '/guide/remote-code.md' },
             { text: 'Development', link: '/guide/development.md' },
             { text: 'Testing', link: '/guide/testing.md' },

docs/entrypoints/content-scripts.md

@@ -137,199 +137,3 @@ export default defineContentScript({
   },
 });
 ```
-
-## UI
-
-WXT provides a utility function, `createContentScriptUi` to simplify mounting a UI from a content script. Internally, it uses the `ShadowRoot` API to isolate your CSS from the webpages.
-
-`createContentScriptUi` requires a `ContentScriptContext` so that when the context is invalidated, the UI is automatically removed from the webpage.
-
-:::details When to use `createContentScriptUi`
-You should only use `createContentScriptUi` if you want your UI's styles isolated from the webpages. If you want to create a more "integrated" UI that uses the page's styles, you can just use the regular JS API's to append your UI to the page.
-
-```ts
-const ui = document.createElement('div');
-const anchor = document.querySelector('#anchor-selector');
-anchor.append(ui);
-```
-
-You can try out [`createContentScriptIframe`](#createcontentscriptiframe) as an alternative solution
-
-:::
-
-### Usage
-
-To use `createContentScriptUi`, follow these steps:
-
-1. Import your CSS file at the top of your content script
-2. Set `cssInjectionMode: "ui"` inside `defineContentScript`
-3. Call `createContentScriptUi`
-4. Call `mount` to add the UI to the webpage
-
-Here's a basic example:
-
-```ts
-// entrypoints/ui.content/index.ts
-import './style.css';
-
-export default defineContentScript({
-  // ...
-  cssInjectionMode: 'ui',
-
-  async main(ctx) {
-    const ui = await createContentScriptUi(ctx, {
-      name: 'example-ui',
-      type: 'inline',
-      anchor: '#some-element',
-      append: 'after',
-      mount(container) {
-        // Mount UI inside `container`...
-      },
-    });
-
-    // You must call `mount` to add the UI to the page.
-    ui.mount();
-  },
-});
-```
-
-If you're using a frontend framework, you'll also need to include an `onRemoved` callback:
-
-:::code-group
-
-```ts [Vue]
-import { createApp } from 'vue';
-
-createContentScriptUi(ctx, {
-  // ...
-  mount(container) {
-    // Create a new app and mount it inside the container
-    const app = createApp(...);
-    app.mount(container);
-    return app;
-  },
-  onRemove(app) {
-    // When the UI is removed from the DOM, call unmount to stop the app
-    app.unmount();
-  },
-});
-```
-
-```ts [React]
-import ReactDOM from 'react-dom/client';
-
-createContentScriptUi(ctx, {
-  // ...
-  mount(container) {
-    // Create a root using the container and render your app
-    const root = ReactDOM.createRoot(container);
-    root.render(...);
-    return root;
-  },
-  onRemove(root) {
-    // When the UI is removed from the DOM, call unmount to stop the app
-    root.unmount();
-  },
-});
-```
-
-```ts [Svelte]
-import App from './App.svelte';
-
-createContentScriptUi(ctx, {
-  // ...
-  mount(container) {
-    // Mount your app component inside the container
-    return new App({
-      target: container,
-    });
-  },
-  onRemove(app) {
-    // When the UI is removed from the DOM, call $destroy to stop the app
-    app.$destroy();
-  },
-});
-```
-
-```ts [Solid]
-import { render } from 'solid-js/web';
-
-createContentScriptUi(ctx, {
-  // ...
-  mount(container) {
-    // Render your app component into the container
-    return render(() => ..., container)
-  },
-  onRemove(unmount) {
-    // When the UI is removed from the DOM, call unmount to stop the app
-    unmount();
-  },
-});
-```
-
-:::
-
-### `anchor`
-
-The anchor dictates where the UI will be mounted.
-
-### `append`
-
-Customize where the UI get's appended to the DOM, relative to the `anchor` element.
-
-### `type`
-
-There are 3 types of UI's you can mount.
-
-- `inline`: Shows up inline based on the `anchor` and `append` options
-- `overlay`: Shows up inline, but styled to be 0px by 0px, with overflow visible. This causes the UI to overlay on top of the webpage's content
-- `modal`: A fullscreen overlay that covers the entire screen, regardless of where it's anchored.
-
-> TODO: Add visualization of the different UI types.
-
-### Overlay `alignment`
-
-Because the overlay UI type results in a 0px by 0px container being added to the webpage, the `alignment` option allows you to configure which corner of your UI is aligned with the 0x0 element.
-
-> TODO: Add visualization of the different alignments.
-
-## IFrame
-
-WXT provides a utility function, `createContentScriptIframe` to simplify mounting a UI from a content script. It creates an iframe to an unlisted HTML page. Unlike `createContentScriptUi`, this API support HMR.
-
-`createContentScriptIframe` requires a `ContentScriptContext` so that when the context is invalidated, the UI is automatically removed from the webpage.
-
-### Usage
-
-To use `createContentScriptIframe`, follow these steps:
-
-1. Create an unlisted HTML page that will be loaded into your iframe
-1. Add unlisted page to the manifest's `web_accessible_resouces`
-1. Call `createContentScriptUi`
-1. Call `mount` to add the UI to the webpage
-
-Here's a basic example:
-
-```ts
-export default defineContentScript({
-  // ...
-
-  async main(ctx) {
-    const ui = await createContentScriptIframe(ctx, {
-      page: '/your-unlisted-page.html',
-      type: 'inline',
-      anchor: '#some-element',
-      append: 'after',
-    });
-
-    // You must call `mount` to add the UI to the page.
-    ui.mount();
-  },
-});
-```
-
-The options, other than `page`, are the same as [`createContentScriptUi`](#anchor).
-
-### `page`
-
-The HTML page you want to load inside the iframe. This string will be passed into `browser.runtime.getURL` to resolve the full path of to your HTML page.

docs/guide/content-script-ui.md

@@ -0,0 +1,326 @@
+# Content Script UI
+
+There are three ways to mount a UI inside a content script:
+
+[[toc]]
+
+Each has their own set of advantages and disadvantages.
+
+| Method     | Isolated Styles | HMR | Use page's context |
+| ---------- | :-------------: | :-: | :----------------: |
+| Integrated |       ❌        | ❌  |         ✅         |
+| ShadowRoot |       ✅        | ❌  |         ✅         |
+| IFrame     |       ✅        | ✅  |         ❌         |
+
+## Integrated
+
+Integrated content script UIs use the page's CSS to inject a UI that looks like it's apart of the page.
+
+WXT doesn't provide any utils for mounting integrated UIs yet. Here are some examples for setting up integrated UIs.
+
+:::code-group
+
+```ts [Vanilla]
+// entrypoints/example-ui.content.ts
+export default defineContentScript({
+  main(ctx) {
+    // Create the UI container
+    const container = document.createElement('div');
+
+    // Add UI container to the page
+    const anchor = document.querySelector('#anchor');
+    anchore.append(container);
+
+    // Remove UI container when invalidated
+    ctx.onInvalidated(() => {
+      container.remove();
+    });
+  },
+});
+```
+
+```ts [Vue]
+// entrypoints/example-ui.content/index.ts
+import { createApp } from 'vue';
+
+export default defineContentScript({
+  main(ctx) {
+    // Create the UI container
+    const container = document.createElement('div');
+
+    // Create the app and mount it to the UI container
+    const app = createApp(...);
+    app.mount(container);
+
+    // Add UI container to the page
+    const anchor = document.querySelector('#anchor');
+    anchore.append(container);
+
+    // Unmount the app and remove UI container when invalidated
+    ctx.onInvalidated(() => {
+      app.unmount();
+      container.remove();
+    });
+  },
+});
+```
+
+```tsx [React]
+// entrypoints/example-ui.content/index.tsx
+import ReactDOM from 'react-dom/client';
+
+export default defineContentScript({
+  main(ctx) {
+    // Create the UI container
+    const container = document.createElement('div');
+
+    // Create a root on the UI container and render a component
+    const root = ReactDOM.createRoot(container);
+    root.render(...);
+
+    // Add UI container to the page
+    const anchor = document.querySelector('#anchor');
+    anchore.append(container);
+
+    // Unmount the root and remove UI container when invalidated
+    ctx.onInvalidated(() => {
+      root.unmount();
+      container.remove();
+    });
+  },
+});
+```
+
+```ts [Svelete]
+// entrypoints/example-ui.content/index.ts
+import App from './App.svelte';
+
+export default defineContentScript({
+  main(ctx) {
+    // Create the UI container
+    const container = document.createElement('div');
+
+    // Create the Svelte app inside the UI container
+    const app = new App({
+      target: ui,
+    });
+
+    // Add UI container to the page
+    const anchor = document.querySelector('#anchor');
+    anchore.append(container);
+
+    // Destroy the app and remove UI container when invalidated
+    ctx.onInvalidated(() => {
+      app.$destroy();
+      container.remove();
+    });
+  },
+});
+```
+
+```tsx [Solid]
+// entrypoints/example-ui.content/index.ts
+import { render } from 'solid-js/web';
+
+export default defineContentScript({
+  main(ctx) {
+    // Create the UI container
+    const container = document.createElement('div');
+
+    // Render your app to the UI container
+    const unmount = render(() => ..., container)
+
+    // Add UI container to the page
+    const anchor = document.querySelector('#anchor');
+    anchore.append(container);
+
+    // Unmount the app and remove UI container when invalidated
+    ctx.onInvalidated(() => {
+      unmount();
+      container.remove();
+    });
+  },
+});
+```
+
+:::
+
+## ShadowRoot
+
+Often in web extensions, you don't want your content script's CSS effecting the page, or vise-versa. The [`ShadowRoot` API](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) is ideal for this. It isolates an element's style from the page's style.
+
+WXT provides a helper function, [`createContentScriptUi`](/api/wxt/client/functions/createContentScriptUi), that abstracts all the `ShadowRoot` setup away, making it easy to create UIs with isolated styles.
+
+To use `createContentScriptUi`, follow these steps:
+
+1. Import your CSS file at the top of your content script
+2. Set `cssInjectionMode: "ui"` inside `defineContentScript`
+3. Define your UI with `createContentScriptUi()`
+4. Mount the UI so it is visible to users
+
+```ts
+// 1. Import the style
+import './style.css';
+
+export default defineContentScript({
+  // 2. Set cssInjectionMode
+  cssInjectionMode: 'ui',
+
+  async main(ctx) {
+    // 3. Define your UI
+    const ui = await createContentScriptUi(ctx, {
+      name: 'example-ui',
+      anchor: '#anchor',
+      type: 'inline',
+      mount(container) {
+        // Define how your UI will be mounted inside the container
+        const app = document.createElement('p');
+        app.textContent = 'Hello world!';
+        container.append(app);
+      },
+    });
+
+    // 4. Mount the UI
+    ui.mount();
+  },
+});
+```
+
+> `createContentScriptUi` will automatically remove the UI from the page when the content script is invalidated.
+
+See the [API Reference](/api/wxt/client/functions/createContentScriptUi) for the complete list of options.
+
+:::info TailwindCSS
+`createContentScriptUi` supports TailwindCSS out of the box! When importing the styles, just import the main CSS file containing the `@tailwind` directives, and everything will just work :+1:.
+:::
+
+When using a frontend framework for your UI, you'll need to unmount the app when the UI is removed. When defining the UI, return an app reference from the `mount` option and pass in a custom `onRemoved` option:
+
+:::code-group
+
+```ts [Vue]
+import { createApp } from 'vue';
+
+const ui = createContentScriptUi(ctx, {
+  // ...
+  mount(container) {
+    const app = createApp(App);
+    app.mount(container);
+    return app;
+  },
+  onRemove(app) {
+    app.unmount();
+  },
+});
+```
+
+```tsx [React]
+import ReactDOM from 'react-dom/client';
+
+const ui = createContentScriptUi(ctx, {
+  // ...
+  mount(container) {
+    const root = ReactDOM.createRoot(container);
+    root.render(...);
+    return root;
+  },
+  onRemove(root) {
+    root.unmount();
+  },
+});
+```
+
+```ts [Svelte]
+import App from './App.svelte';
+
+const ui = createContentScriptUi(ctx, {
+  // ...
+  mount(container) {
+    return new App({ target: container });
+  },
+  onRemove(app) {
+    app.$destry();
+  },
+});
+```
+
+```tsx [Solid]
+import { render } from 'solid-js/web';
+
+const ui = createContentScriptUi(ctx, {
+  // ...
+  mount(container) {
+    return render(() => ..., container);
+  },
+  onRemove(unmount) {
+    unmount();
+  },
+});
+```
+
+:::
+
+:::warning
+The `mount(container)` and `onRemove(app)` options passed into `createContentScriptUi` **_are different from_** the `ui.mount()` and `ui.remove()` functions available on the returned UI object.
+
+You don't need to pass anything into `ui.mount()` and `ui.remove()` because **_you already defined how and where the UI will be mounted_** in the options passed into `createContentScriptUi`.
+:::
+
+## IFrame
+
+If you don't need to run your UI in the same frame as the content script, you can use an IFrame to host your UI instead. Since an IFrame just hosts an HTML page, **_HMR is supported_**.
+
+WXT provides a helper function, [`createContentScriptIframe`](/api/wxt/client/functions/createContentScriptUi), which simplifies setting up the IFrame.
+
+1. Create an HTML page that will be loaded into your IFrame
+   ```html
+   <!-- entrypoints/example-iframe.html -->
+   <!doctype html>
+   <html lang="en">
+     <head>
+       <meta charset="UTF-8" />
+       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+       <title>Your Content Script IFrame</title>
+     </head>
+     <body>
+       <!-- ... -->
+     </body>
+   </html>
+   ```
+1. Add the page to the manifest's `web_accessible_resouces`
+   ```ts
+   // wxt.config.ts
+   export default defineConfig({
+     manifest: {
+       web_accessible_resources: [
+         {
+           resources: ['example-iframe.html'],
+           matches: [...],
+         },
+       ],
+     },
+   });
+   ```
+1. Create and mount the IFrame
+
+   ```ts
+   export default defineContentScript({
+     // ...
+     async main(ctx) {
+       // Define the UI
+       const ui = await createContentScriptIframe(ctx, {
+         page: '/example-iframe.html',
+         anchor: '#anchor',
+         type: 'inline',
+       });
+
+       // Add styles to the iframe like width
+       ui.iframe.width = 123;
+
+       // Show UI to user
+       ui.mount();
+     },
+   });
+   ```
+
+See the [API Reference](/api/wxt/client/functions/createContentScriptUi) for the complete list of options.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wxt",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "Next gen framework for developing web extensions",
   "engines": {
     "node": ">=18",

src/client/content-scripts/content-script-context.ts

@@ -1,6 +1,8 @@
 import { ContentScriptDefinition } from '~/types';
 import { browser } from '~/browser';
 import { logger } from '~/client/utils/logger';
+import { WxtLocationChangeEvent, getUniqueEventName } from './custom-events';
+import { createLocationWatcher } from './location-watcher';
 
 /**
  * Implements [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController).
@@ -14,6 +16,7 @@ export class ContentScriptContext implements AbortController {
 
   #isTopFrame = window.self === window.top;
   #abortController: AbortController;
+  #locationWatcher = createLocationWatcher(this);
 
   constructor(
     private readonly contentScriptName: string,
@@ -137,23 +140,42 @@ export class ContentScriptContext implements AbortController {
   /**
    * Call `target.addEventListener` and remove the event listener when the context is invalidated.
    *
+   * Includes additional events useful for content scripts:
+   *
+   * - `"wxt:locationchange"` - Triggered when HTML5 history mode is used to change URL. Content
+   *   scripts are not reloaded when navigating this way, so this can be used to reset the content
+   *   script state on URL change, or run custom code.
+   *
    * @example
-   * ctx.addEventListener(window, "mousemove", () => {
-   *   // ...
-   * });
    * ctx.addEventListener(document, "visibilitychange", () => {
    *   // ...
    * });
+   * ctx.addEventListener(document, "wxt:locationchange", () => {
+   *   // ...
+   * });
    */
-  addEventListener(
-    target: any,
-    type: string,
-    handler: (event: Event) => void,
+  addEventListener<
+    TTarget extends EventTarget,
+    TType extends keyof WxtContentScriptEventMap,
+  >(
+    target: TTarget,
+    type: TType,
+    handler: (event: WxtContentScriptEventMap[TType]) => void,
     options?: AddEventListenerOptions,
   ) {
-    target.addEventListener?.(type, handler, options);
-    this.onInvalidated(
-      () => target.removeEventListener?.(type, handler, options),
+    if (type === 'wxt:locationchange') {
+      // Start the location watcher when adding the event for the first time
+      if (this.isValid) this.#locationWatcher.run();
+    }
+
+    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,
+        signal: this.signal,
+      },
     );
   }
 
@@ -193,3 +215,7 @@ export class ContentScriptContext implements AbortController {
     this.onInvalidated(() => removeEventListener('message', cb));
   }
 }
+
+interface WxtContentScriptEventMap extends WindowEventMap {
+  'wxt:locationchange': WxtLocationChangeEvent;
+}

src/client/content-scripts/content-script-ui.ts

@@ -13,7 +13,7 @@ import {
  * Utility for mounting content script UI's with isolated styles. Automatically removed from the DOM
  * when the content script's context is invalidated.
  *
- * See https://wxt.dev/entrypoints/content-scripts.html#ui for full documentation.
+ * See https://wxt.dev/guide/content-script-ui.html for full documentation.
  *
  * @example
  * // entrypoints/example-ui.content/index.ts
@@ -167,7 +167,7 @@ export type ContentScriptUiOptions<TApp> = ContentScriptPositioningOptions &
      * set `cssInjectionMode: "ui"`, the imported CSS will be included automatically. You do not need
      * to pass those styles in here. This is for any additional styles not in the imported CSS.
      *
-     * See https://wxt.dev/entrypoints/content-scripts.html#ui for more info.
+     * See https://wxt.dev/guide/content-script-ui.html for more info.
      */
     css?: string;
   };

src/client/content-scripts/custom-events.ts

@@ -0,0 +1,24 @@
+import { browser } from '~/browser';
+
+export class WxtLocationChangeEvent extends Event {
+  static EVENT_NAME = getUniqueEventName('wxt:locationchange');
+
+  constructor(
+    readonly newUrl: URL,
+    readonly oldUrl: URL,
+  ) {
+    super(WxtLocationChangeEvent.EVENT_NAME, {});
+  }
+}
+
+/**
+ * Returns an event name unique to the extension and content script that's running.
+ */
+export function getUniqueEventName(eventName: string): string {
+  // During the build process, __ENTRYPOINT__ is not defined when importing entrypoints to get their
+  // metadata.
+  const entrypointName =
+    typeof __ENTRYPOINT__ === 'undefined' ? 'build' : __ENTRYPOINT__;
+
+  return `${browser.runtime.id}:${entrypointName}:${eventName}`;
+}

src/client/content-scripts/location-watcher.ts

@@ -0,0 +1,30 @@
+import { ContentScriptContext } from '.';
+import { WxtLocationChangeEvent } from './custom-events';
+
+/**
+ * Create a util that watches for URL changes, dispatching the custom event when detected. Stops
+ * watching when content script is invalidated.
+ */
+export function createLocationWatcher(ctx: ContentScriptContext) {
+  let interval: number | undefined;
+  let oldUrl: URL;
+
+  return {
+    /**
+     * Ensure the location watcher is actively looking for URL changes. If it's already watching,
+     * this is a noop.
+     */
+    run() {
+      if (interval != null) return;
+
+      oldUrl = new URL(location.href);
+      interval = ctx.setInterval(() => {
+        let newUrl = new URL(location.href);
+        if (newUrl.href !== oldUrl.href) {
+          window.dispatchEvent(new WxtLocationChangeEvent(newUrl, oldUrl));
+          oldUrl = newUrl;
+        }
+      }, 1e3);
+    },
+  };
+}

src/client/index.ts

@@ -3,3 +3,12 @@
  */
 export * from './define-background';
 export * from './content-scripts';
+export {
+  ContentScriptOverlayAlignment,
+  ContentScriptAppendMode,
+  ContentScriptPositioningOptions,
+  ContentScriptAnchoredOptions,
+  ContentScriptInlinePositioningOptions,
+  ContentScriptOverlayPositioningOptions,
+  ContentScriptModalPositioningOptions,
+} from './utils/content-script-ui';

src/client/utils/content-script-ui.ts

@@ -4,6 +4,9 @@ export type ContentScriptOverlayAlignment =
   | 'bottom-left'
   | 'bottom-right';
 
+/**
+ * ![Visualization of different append modes](https://wxt.dev/content-script-ui-append.png)
+ */
 export type ContentScriptAppendMode =
   | 'last'
   | 'first'
@@ -49,31 +52,46 @@ export function mountContentScriptUiRoot(
   }
 }
 
+export interface ContentScriptInlinePositioningOptions {
+  type: 'inline';
+}
+
+export interface ContentScriptOverlayPositioningOptions {
+  type: 'overlay';
+  /**
+   * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
+   * content.
+   */
+  zIndex?: number;
+  /**
+   * When using `type: "overlay"`, the mounted element is 0px by 0px in size. Alignment specifies
+   * which corner is aligned with that 0x0 pixel space.
+   *
+   * ![Visualization of alignment options](https://wxt.dev/content-script-ui-alignment.png)
+   *
+   * @default "top-left"
+   */
+  alignment?: ContentScriptOverlayAlignment;
+}
+
+export interface ContentScriptModalPositioningOptions {
+  type: 'modal';
+  /**
+   * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
+   * content.
+   */
+  zIndex?: number;
+}
+
+/**
+ * Choose between `"inline"`, `"overlay"`, or `"modal" `types.
+ *
+ * ![Visualization of different types](https://wxt.dev/content-script-ui-types.png)
+ */
 export type ContentScriptPositioningOptions =
-  | { type: 'inline' }
-  | {
-      type: 'overlay';
-      /**
-       * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
-       * content.
-       */
-      zIndex?: number;
-      /**
-       * When using `type: "overlay"`, the mounted element is 0px by 0px in size. Alignment specifies
-       * which corner is aligned with that 0x0 pixel space.
-       *
-       * @default "top-left"
-       */
-      alignment?: ContentScriptOverlayAlignment;
-    }
-  | {
-      type: 'modal';
-      /**
-       * The `z-index` used on the `shadowHost`. Set to a positive number to show your UI over website
-       * content.
-       */
-      zIndex?: number;
-    };
+  | ContentScriptInlinePositioningOptions
+  | ContentScriptOverlayPositioningOptions
+  | ContentScriptModalPositioningOptions;
 
 export function applyContentScriptUiPosition(
   root: HTMLElement,

src/core/utils/building/__tests__/find-entrypoints.test.ts

@@ -261,28 +261,24 @@ describe('findEntrypoints', () => {
     });
   });
 
-  it.each<[string, Omit<GenericEntrypoint, 'options'>]>([
-    [
-      'injected.ts',
-      {
-        type: 'unlisted-script',
-        name: 'injected',
-        inputPath: resolve(config.entrypointsDir, 'injected.ts'),
-        outputDir: config.outDir,
-      },
-    ],
-    [
-      'injected/index.ts',
-      {
-        type: 'unlisted-script',
-        name: 'injected',
-        inputPath: resolve(config.entrypointsDir, 'injected/index.ts'),
-        outputDir: config.outDir,
-      },
-    ],
+  it.each<string>([
+    'injected.ts',
+    'injected.tsx',
+    'injected.js',
+    'injected.jsx',
+    'injected/index.ts',
+    'injected/index.tsx',
+    'injected/index.js',
+    'injected/index.jsx',
   ])(
     'should find and load unlisted-script entrypoint config from %s',
-    async (path, expected) => {
+    async (path) => {
+      const expected = {
+        type: 'unlisted-script',
+        name: 'injected',
+        inputPath: resolve(config.entrypointsDir, path),
+        outputDir: config.outDir,
+      };
       const options: GenericEntrypoint['options'] = {};
       globMock.mockResolvedValueOnce([path]);
       importEntrypointFileMock.mockResolvedValue(options);
@@ -566,15 +562,27 @@ describe('findEntrypoints', () => {
   });
 
   it('should not allow multiple entrypoints with the same name', async () => {
-    globMock.mockResolvedValueOnce(['popup.html', 'popup/index.html']);
-    const expectedPaths = [
-      'src/entrypoints/popup.html',
-      'src/entrypoints/popup/index.html',
-    ].map(unnormalizePath);
+    globMock.mockResolvedValueOnce([
+      'options/index.html',
+      'options/index.jsx',
+      'popup.html',
+      'popup/index.html',
+      'popup/index.ts',
+      'ui.html',
+    ]);
 
     await expect(() => findEntrypoints(config)).rejects.toThrowError(
-      'Multiple entrypoints with the name "popup" detected, but only one is allowed: ' +
-        expectedPaths.join(', '),
+      [
+        'Multiple entrypoints with the same name detected, only one entrypoint for each name is allowed.',
+        '',
+        '- options',
+        `  - ${unnormalizePath('src/entrypoints/options/index.html')}`,
+        `  - ${unnormalizePath('src/entrypoints/options/index.jsx')}`,
+        '- popup',
+        `  - ${unnormalizePath('src/entrypoints/popup.html')}`,
+        `  - ${unnormalizePath('src/entrypoints/popup/index.html')}`,
+        `  - ${unnormalizePath('src/entrypoints/popup/index.ts')}`,
+      ].join('\n'),
     );
   });
 

src/core/utils/building/find-entrypoints.ts

@@ -31,56 +31,54 @@ import { CSS_EXTENSIONS_PATTERN } from '~/core/utils/paths';
 export async function findEntrypoints(
   config: InternalConfig,
 ): Promise<Entrypoint[]> {
-  const relativePaths = await glob('**/*', {
+  const relativePaths = await glob(Object.keys(PATH_GLOB_TO_TYPE_MAP), {
     cwd: config.entrypointsDir,
   });
   // Ensure consistent output
   relativePaths.sort();
 
   const pathGlobs = Object.keys(PATH_GLOB_TO_TYPE_MAP);
-
-  let hasBackground = false;
-  // TODO: This parallelization is bad
-  const possibleEntrypoints: Array<Entrypoint | undefined> = await Promise.all(
-    relativePaths.map(async (relativePath) => {
-      const path = resolve(config.entrypointsDir, relativePath);
-      const matchingGlob = pathGlobs.find((glob) =>
-        minimatch(relativePath, glob),
-      );
-
-      if (matchingGlob == null) {
-        config.logger.warn(
-          `${relativePath} does not match any known entrypoint. Known entrypoints:\n${JSON.stringify(
-            PATH_GLOB_TO_TYPE_MAP,
-            null,
-            2,
-          )}`,
-        );
-        return;
-      }
-
+  const entrypointInfos: EntrypointInfo[] = relativePaths.reduce<
+    EntrypointInfo[]
+  >((results, relativePath) => {
+    const inputPath = resolve(config.entrypointsDir, relativePath);
+    const name = getEntrypointName(config.entrypointsDir, inputPath);
+    const matchingGlob = pathGlobs.find((glob) =>
+      minimatch(relativePath, glob),
+    );
+    if (matchingGlob) {
       const type = PATH_GLOB_TO_TYPE_MAP[matchingGlob];
-      if (type === 'ignored') return;
+      results.push({ name, inputPath, type });
+    }
+    return results;
+  }, []);
 
+  // Report duplicate entrypoint names
+  preventDuplicateEntrypointNames(config, entrypointInfos);
+
+  // Import entrypoints to get their config
+  let hasBackground = false;
+  const entrypoints: Entrypoint[] = await Promise.all(
+    entrypointInfos.map(async (info): Promise<Entrypoint> => {
+      const { type } = info;
       switch (type) {
         case 'popup':
-          return await getPopupEntrypoint(config, path);
+          return await getPopupEntrypoint(config, info);
         case 'options':
-          return await getOptionsEntrypoint(config, path);
+          return await getOptionsEntrypoint(config, info);
         case 'background':
           hasBackground = true;
-          return await getBackgroundEntrypoint(config, path);
+          return await getBackgroundEntrypoint(config, info);
         case 'content-script':
-          return await getContentScriptEntrypoint(config, path);
+          return await getContentScriptEntrypoint(config, info);
         case 'unlisted-page':
-          return await getUnlistedPageEntrypoint(config, path);
+          return await getUnlistedPageEntrypoint(config, info);
         case 'unlisted-script':
-          return await getUnlistedScriptEntrypoint(config, path);
+          return await getUnlistedScriptEntrypoint(config, info);
         case 'content-script-style':
           return {
+            ...info,
             type,
-            name: getEntrypointName(config.entrypointsDir, path),
-            inputPath: path,
             outputDir: resolve(config.outDir, CONTENT_SCRIPT_OUT_DIR),
             options: {
               include: undefined,
@@ -89,9 +87,8 @@ export async function findEntrypoints(
           };
         default:
           return {
+            ...info,
             type,
-            name: getEntrypointName(config.entrypointsDir, path),
-            inputPath: path,
             outputDir: config.outDir,
             options: {
               include: undefined,
@@ -102,30 +99,13 @@ export async function findEntrypoints(
     }),
   );
 
-  const entrypoints = possibleEntrypoints.filter(
-    (entry) => !!entry,
-  ) as Entrypoint[];
-
-  // Report duplicate entrypoint names
-  const existingNames: Record<string, Entrypoint | undefined> = {};
-  entrypoints.forEach((entrypoint) => {
-    const withSameName = existingNames[entrypoint.name];
-    if (withSameName) {
-      throw Error(
-        `Multiple entrypoints with the name "${
-          entrypoint.name
-        }" detected, but only one is allowed: ${[
-          relative(config.root, withSameName.inputPath),
-          relative(config.root, entrypoint.inputPath),
-        ].join(', ')}`,
-      );
-    }
-    existingNames[entrypoint.name] = entrypoint;
-  });
-
   if (config.command === 'serve' && !hasBackground) {
     entrypoints.push(
-      await getBackgroundEntrypoint(config, VIRTUAL_NOOP_BACKGROUND_MODULE_ID),
+      await getBackgroundEntrypoint(config, {
+        inputPath: VIRTUAL_NOOP_BACKGROUND_MODULE_ID,
+        name: 'background',
+        type: 'background',
+      }),
     );
   }
 
@@ -151,6 +131,44 @@ export async function findEntrypoints(
   return targetEntrypoints;
 }
 
+interface EntrypointInfo {
+  name: string;
+  inputPath: string;
+  type: Entrypoint['type'];
+}
+
+function preventDuplicateEntrypointNames(
+  config: InternalConfig,
+  files: EntrypointInfo[],
+) {
+  const namesToPaths = files.reduce<Record<string, string[]>>(
+    (map, { name, inputPath }) => {
+      map[name] ??= [];
+      map[name].push(inputPath);
+      return map;
+    },
+    {},
+  );
+  const errorLines = Object.entries(namesToPaths).reduce<string[]>(
+    (lines, [name, absolutePaths]) => {
+      if (absolutePaths.length > 1) {
+        lines.push(`- ${name}`);
+        absolutePaths.forEach((absolutePath) => {
+          lines.push(`  - ${relative(config.root, absolutePath)}`);
+        });
+      }
+      return lines;
+    },
+    [],
+  );
+  if (errorLines.length > 0) {
+    const errorContent = errorLines.join('\n');
+    throw Error(
+      `Multiple entrypoints with the same name detected, only one entrypoint for each name is allowed.\n\n${errorContent}`,
+    );
+  }
+}
+
 function getHtmlBaseOptions(document: Document): BaseEntrypointOptions {
   const options: BaseEntrypointOptions = {};
 
@@ -177,9 +195,9 @@ function getHtmlBaseOptions(document: Document): BaseEntrypointOptions {
  */
 async function getPopupEntrypoint(
   config: InternalConfig,
-  path: string,
+  { inputPath, name }: EntrypointInfo,
 ): Promise<PopupEntrypoint> {
-  const content = await fs.readFile(path, 'utf-8');
+  const content = await fs.readFile(inputPath, 'utf-8');
   const { document } = parseHTML(content);
 
   const options: PopupEntrypoint['options'] = getHtmlBaseOptions(document);
@@ -220,7 +238,7 @@ async function getPopupEntrypoint(
     type: 'popup',
     name: 'popup',
     options,
-    inputPath: path,
+    inputPath,
     outputDir: config.outDir,
   };
 }
@@ -231,9 +249,9 @@ async function getPopupEntrypoint(
  */
 async function getOptionsEntrypoint(
   config: InternalConfig,
-  path: string,
+  { inputPath, name }: EntrypointInfo,
 ): Promise<OptionsEntrypoint> {
-  const content = await fs.readFile(path, 'utf-8');
+  const content = await fs.readFile(inputPath, 'utf-8');
   const { document } = parseHTML(content);
 
   const options: OptionsEntrypoint['options'] = getHtmlBaseOptions(document);
@@ -263,7 +281,7 @@ async function getOptionsEntrypoint(
     type: 'options',
     name: 'options',
     options,
-    inputPath: path,
+    inputPath,
     outputDir: config.outDir,
   };
 }
@@ -274,15 +292,15 @@ async function getOptionsEntrypoint(
  */
 async function getUnlistedPageEntrypoint(
   config: InternalConfig,
-  path: string,
+  { inputPath, name }: EntrypointInfo,
 ): Promise<GenericEntrypoint> {
-  const content = await fs.readFile(path, 'utf-8');
+  const content = await fs.readFile(inputPath, 'utf-8');
   const { document } = parseHTML(content);
 
   return {
     type: 'unlisted-page',
-    name: getEntrypointName(config.entrypointsDir, path),
-    inputPath: path,
+    name: getEntrypointName(config.entrypointsDir, inputPath),
+    inputPath,
     outputDir: config.outDir,
     options: getHtmlBaseOptions(document),
   };
@@ -294,11 +312,10 @@ async function getUnlistedPageEntrypoint(
  */
 async function getUnlistedScriptEntrypoint(
   config: InternalConfig,
-  path: string,
+  { inputPath, name }: EntrypointInfo,
 ): Promise<GenericEntrypoint> {
-  const name = getEntrypointName(config.entrypointsDir, path);
   const defaultExport = await importEntrypointFile<UnlistedScriptDefinition>(
-    path,
+    inputPath,
     config,
   );
   if (defaultExport == null) {
@@ -311,7 +328,7 @@ async function getUnlistedScriptEntrypoint(
   return {
     type: 'unlisted-script',
     name,
-    inputPath: path,
+    inputPath,
     outputDir: config.outDir,
     options,
   };
@@ -322,13 +339,12 @@ async function getUnlistedScriptEntrypoint(
  */
 async function getBackgroundEntrypoint(
   config: InternalConfig,
-  path: string,
+  { inputPath, name }: EntrypointInfo,
 ): Promise<BackgroundEntrypoint> {
-  const name = 'background';
   let options: Omit<BackgroundDefinition, 'main'> = {};
-  if (path !== VIRTUAL_NOOP_BACKGROUND_MODULE_ID) {
+  if (inputPath !== VIRTUAL_NOOP_BACKGROUND_MODULE_ID) {
     const defaultExport = await importEntrypointFile<BackgroundDefinition>(
-      path,
+      inputPath,
       config,
     );
     if (defaultExport == null) {
@@ -342,7 +358,7 @@ async function getBackgroundEntrypoint(
   return {
     type: 'background',
     name,
-    inputPath: path,
+    inputPath,
     outputDir: config.outDir,
     options: {
       ...options,
@@ -357,11 +373,10 @@ async function getBackgroundEntrypoint(
  */
 async function getContentScriptEntrypoint(
   config: InternalConfig,
-  path: string,
+  { inputPath, name }: EntrypointInfo,
 ): Promise<ContentScriptEntrypoint> {
-  const name = getEntrypointName(config.entrypointsDir, path);
   const { main: _, ...options } =
-    await importEntrypointFile<ContentScriptDefinition>(path, config);
+    await importEntrypointFile<ContentScriptDefinition>(inputPath, config);
   if (options == null) {
     throw Error(
       `${name}: Default export not found, did you forget to call "export default defineContentScript(...)"?`,
@@ -370,13 +385,13 @@ async function getContentScriptEntrypoint(
   return {
     type: 'content-script',
     name,
-    inputPath: path,
+    inputPath,
     outputDir: resolve(config.outDir, CONTENT_SCRIPT_OUT_DIR),
     options,
   };
 }
 
-const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type'] | 'ignored'> = {
+const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type']> = {
   'sandbox.html': 'sandbox',
   'sandbox/index.html': 'sandbox',
   '*.sandbox.html': 'sandbox',
@@ -420,13 +435,10 @@ const PATH_GLOB_TO_TYPE_MAP: Record<string, Entrypoint['type'] | 'ignored'> = {
 
   '*.html': 'unlisted-page',
   '*/index.html': 'unlisted-page',
-  '*.[jt]s': 'unlisted-script',
-  '*/index.ts': 'unlisted-script',
+  '*.[jt]s?(x)': 'unlisted-script',
+  '*/index.[jt]s?(x)': 'unlisted-script',
   [`*.${CSS_EXTENSIONS_PATTERN}`]: 'unlisted-style',
   [`*/index.${CSS_EXTENSIONS_PATTERN}`]: 'unlisted-style',
-
-  // Don't warn about any files in subdirectories, like CSS or JS entrypoints for HTML files or tests
-  '*/**': 'ignored',
 };
 
 const CONTENT_SCRIPT_OUT_DIR = 'content-scripts';

templates/react/package.json

@@ -23,6 +23,6 @@
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.3.2",
-    "wxt": "^0.10.0"
+    "wxt": "^0.11.0"
   }
 }

templates/solid/entrypoints/popup/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./index.tsx"></script>
+    <script type="module" src="./main.tsx"></script>
   </body>
 </html>

templates/solid/package.json

@@ -19,8 +19,7 @@
   },
   "devDependencies": {
     "typescript": "^5.3.2",
-    "vite": "^4.0.0",
-    "vite-plugin-solid": "^2.7.0",
-    "wxt": "^0.10.0"
+    "vite-plugin-solid": "^2.8.0",
+    "wxt": "^0.11.0"
   }
 }

templates/svelte/package.json

@@ -20,6 +20,6 @@
     "svelte-check": "^3.4.6",
     "tslib": "^2.6.0",
     "typescript": "^5.3.2",
-    "wxt": "^0.10.0"
+    "wxt": "^0.11.0"
   }
 }

templates/vanilla/package.json

@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "typescript": "^5.3.2",
-    "wxt": "^0.10.0"
+    "wxt": "^0.11.0"
   }
 }

templates/vue/package.json

@@ -21,6 +21,6 @@
     "@vitejs/plugin-vue": "^4.5.1",
     "typescript": "^5.3.2",
     "vue-tsc": "^1.8.25",
-    "wxt": "^0.10.0"
+    "wxt": "^0.11.0"
   }
 }