aklinker1 / vite-plugin-web-extension

Vite plugin for developing Chrome/Web Extensions
https://vite-plugin-web-extension.aklinker1.io/
MIT License
654 stars 57 forks source link

Browser doesn't restart subsequent to dev server restart #203

Open dever23b opened 4 months ago

dever23b commented 4 months ago

Summary

After running vite dev, once it's watching my working directory, saving certain files triggers a restart of the dev server. When this happens, the browser is closed and does not reopen after the dev server restarts. I'm a little new to developing with Vite: I don't have a good grasp of what actions trigger the dev server restart. However, the last time this happened to me was subsequent to saving a change in vite.config.ts: it seems reasonable that the server would restart after this.

When this happens, it effectively breaks the entire watch/automatic reload process, because I have to kill the vite dev process and restart it to spawn a new browser window. I'm not sure if I am using the software incorrectly or if this is a bug, but I would really like to be able to run the dev process and have it automatically update as I save changes. Currently, I'm having to Ctrl+C and restart the dev process seemingly every few times I save.

I saw #138, which seems very similar, and may be another symptom of the same cause. The author of that issue reported manually forcing the dev server to restart, though, and I am not doing that: I am running into this issue after editing and saving files. That issue is also nearly a year old, so I'm hoping my issue has a different fix.

Here is my current vite.config.ts

import inject from "@rollup/plugin-inject";
import { defineConfig } from "vite";
import webExtension, {
  readJsonFile,
} from "vite-plugin-web-extension";

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

export default defineConfig({
  build: {
    minify: false,
    target: "esnext",
    sourcemap: true,
  },
  server: {
    watch: {
      ignored: ["**/node_modules/**", "**/.git/**", "./test/**"],
    },
  },
  plugins: [
    inject({
      include: ["*.ts"],
      $: "jquery",
      jQuery: "jquery",
    }),
    webExtension({
      browser: "chrome",
      manifest: generateManifest,
      watchFilePaths: ["package.json", "manifest.json"],
      webExtConfig: {
        // verbose: true,
        sourceDir: "./dist",
        keepProfileChanges: true,
        chromiumBinary: "/usr/bin/microsoft-edge",
        chromiumPort: 9222,
        chromiumProfile: "../test/profile",
        args: [
          "--user-data-dir=../test/profile",
          "--hide-crash-restore-bubble",
        ],
        startUrl: [
          "https://github.com",
        ],
      },
    }),
  ],
});

Environment

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Memory: 13.11 GB / 15.49 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    npm: 10.8.1 - /usr/local/bin/npm
    pnpm: 9.4.0 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^5.0.0 => 5.3.3
    vite-plugin-web-extension: ^4.1.6 => 4.1.6