HowTo format the generated manifest.json

[MBurchard]

Is it possible to set manifest.json formatting by configuration, or do I have use a Vite Hook to format the generated manifest.json nicely?
The template looks like this:

{
  "{{chrome}}.manifest_version": 3,
  "{{firefox}}.manifest_version": 2,
  "icons": {
    "16": "icon/icon_16.png",
    "32": "icon/icon_48.png",
    "48": "icon/icon_48.png",
    "96": "icon/icon_128.png",
    "128": "icon/icon_128.png"
  },
  "background": {
    "{{chrome}}.service_worker": "src/backend/background.ts",
    "{{firefox}}.scripts": ["src/backend/background.ts"]
  },
  "content_scripts": [
    {
      "matches": [
        "..."
      ],
      "js": [
        "src/frontend/content.ts"
      ],
      "run_at": "document_start"
    }
  ],
  "default_locale": "de"
}

Then I use the vite.config.ts:

import process from 'node:process';
import {svelte} from '@sveltejs/vite-plugin-svelte';
import {defineConfig} from 'vite';
import webExtension, {readJsonFile} from 'vite-plugin-web-extension';

const target = process.env.TARGET || 'chrome';

function capitalize(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function cleanVersion(version: string): string {
  return version.split('-')[0];
}

function generateManifest() {
  const manifest = readJsonFile('src/manifest.json');
  const pkg = readJsonFile('package.json');
  return {
    name: capitalize(pkg.name),
    description: pkg.description,
    version: cleanVersion(pkg.version),
    ...manifest,
  };
}

export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        customElement: true,
      },
    }),
    webExtension({
      browser: target,
      manifest: generateManifest,
      watchFilePaths: ['package.json', 'manifest.json'],
    }),
  ],
});

But the result is this:

{"name":"...","description":"...","version":"1.0.0","manifest_version":3,"icons":{"16":"icon/icon_16.png","32":"icon/icon_48.png","48":"icon/icon_48.png","96":"icon/icon_128.png","128":"icon/icon_128.png"},"background":{"service_worker":"src/backend/background.js"},"content_scripts":[{"matches":["..."],"js":["src/frontend/content.js"],"run_at":"document_start"}],"default_locale":"de","host_permissions":["http://localhost/*"],"content_security_policy":{"extension_pages":"script-src 'self' 'wasm-unsafe-eval' http://localhost:*; object-src 'self';"}}

[aklinker1]

If you want to open a PR to use JSON.stringify(manifest, null 2) instead of JSON.stringify(manifest) during development, feel free.

vite-plugin-web-extension/packages/vite-plugin-web-extension/src/plugins/manifest-loader-plugin.ts

Line 143 in b4351f7

source: JSON.stringify(finalManifest),

Otherwise, I don't think there's a way to do this with Vite. You might have to patch the package.