Configuring Page Settings Based on Build Mode

[rthaut]

Is there a recommended way to configure page settings based on the build mode?

For example, I want to have my Options page open in a new tab in development mode (easier for debugging), but not in production mode.

According to the documentation, I should be using <meta> tags in the options.html file, but there does not appear to be a way to set a dynamic value.

<meta name="manifest.open_in_tab" content="import.meta.env.MODE !== 'production'" />

Produces this is the manifest.json file:

{
  "options_ui": {
    "open_in_tab": "import.meta.env.MODE !== 'production'",
    "page": "options.html"
  }
}

---

I also tried defining it in the wxt.config.ts file, but the options_ui key doesn't seem to be picked up:

import { defineConfig, type UserManifest } from "wxt";

// See https://wxt.dev/api/config.html
export default defineConfig({
  manifest: ({ browser, manifestVersion, mode, command }) => {
    // ... more logic
    return {
      name: "__MSG_ExtensionName__",
      short_name: "__MSG_ExtensionShortName__",
      description: "__MSG_ExtensionDescription__",
      default_locale: "en",
      // ... more values
      options_ui: {
        open_in_tab: mode !== "production",
      }
    } satisfies UserManifest;
  },
});

Produces this is the manifest.json file:

{
  "manifest_version": 3,
  "name": "__MSG_ExtensionName__",
  "description": "__MSG_ExtensionDescription__",
  "short_name": "__MSG_ExtensionShortName__",
  "default_locale": "en",
  "options_ui": {
    "page": "options.html"
  },
}

[aklinker1]

Here's an example modifying the manifest via the build:manifestGenerated hook: https://wxt.dev/guide/essentials/config/hooks.html#adding-hooks