How to set up WXT for Zen Browser

Hi there.

This is going to be a quick post on how to set up WXT for Zen Browser. After the initial WXT CLI setup, these were my additional settings to get it working.

Note: I’m using WXT version 0.19.26

// wxt.config.ts
import { defineConfig } from "wxt";

export default defineConfig({
  extensionApi: "chrome",
  modules: ["@wxt-dev/module-solid"], // Note I'm using solid-js
  manifest: {
    commands: {
      _execute_browser_action: {
        suggested_key: {
          default: "Ctrl+Shift+L", // Replace with your command to open popup
          mac: "Command+L", // Replace with your command to open popup on macos
        },
        description: "Description of command", // Replace this
    },
  },
});

// web-ext.config.js
import { defineRunnerConfig } from "wxt";

// This overrides the Firefox binary and instead uses the Zen Browser binary
export default defineRunnerConfig({
  binaries: {
    firefox: "/Applications/Zen Browser.app/Contents/MacOS/zen", // TODO Replace with Zen Browser Binary Location
  },
  disabled: true, // So that a new instance of Zen Browser is not made for every hot-reload
});

So it should now work if you run npm run dev:firefox.

This will make a dev build to .output/firefox-mv2 and so you would go to Zen Browser’s about:debugging, select any file within .output/firefox-mv2 and enable the plugin as per usual.

Hopefully this helps someone out.

Seeyas.