Service worker registration failed. Status code: 3

[kpripper]

I just installed the code and haven’t changed anything yet, just ran it.

PS D:\Code\Chrome\ext-kaz-ra> npm run dev

> [email protected] dev
> vite

Port 5173 is in use, trying another one...

  VITE v4.5.5  ready in 664 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h to show help
The emitted file "img/logo-34.png" overwrites a previously emitted file of the same name.
The emitted file "img/logo-48.png" overwrites a previously emitted file of the same name.
The emitted file "img/logo-16.png" overwrites a previously emitted file of the same name.
The emitted file "img/logo-128.png" overwrites a previously emitted file of the same name.

When I click on the extension icon, I see:

Vite Dev Mode Cannot connect to the Vite Dev Server on http://localhost:5174/

Double-check that Vite is working and reload the extension.

This page will close when the extension reloads.

On the extension management page in the errors section, I see the following message:

Service worker registration failed. Status code: 3

In the code, "service-worker-loader.js" is highlighted in yellow.

"background": {
  "service_worker": "service-worker-loader.js",
  "type": "module"
}

[azamuddin]

@kpripper happened to me on latest version of Chrome, previously no issue. This even affect the production extension that I already published, I wonder if this is because of new Chrome update

[KrishEnacton]

Update your vite.config.ts and add server object like this way

import { defineConfig } from 'vite';
import { crx } from '@crxjs/vite-plugin';
import react from '@vitejs/plugin-react';
// @ts-ignore
import manifest from './src/manifest';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    build: {
      emptyOutDir: true,
      outDir: 'build',
      minify: true,
      rollupOptions: {
        output: {
          chunkFileNames: 'assets/chunk-[hash].js',
        },
      },
      chunkSizeWarningLimit: 2000,
    },
    server: {
      port: 5173,
      strictPort: true,
      hmr: {
        port: 5173,
      },
    },
    plugins: [crx({ manifest }), react()],
  };
});

[kpripper]

Thank you, this works. But why isn't this included out of the box? Is it impossible?

[arif-b-khan]

I'm getting websocket error. I was getting similar error after adding this setting issue got result but now I'm getting websocket error.

Configuration file

import { defineConfig } from 'vite';
import { crx } from '@crxjs/vite-plugin';
import react from '@vitejs/plugin-react';
// @ts-ignore
import manifest from './src/manifest';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    build: {
      emptyOutDir: true,
      outDir: 'build',
      minify: true,
      rollupOptions: {
        output: {
          chunkFileNames: 'assets/chunk-[hash].js',
        },
      },
      chunkSizeWarningLimit: 2000,
    },
    server: {
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      port: 5173,
      strictPort: true,
      hmr: {
        protocol: 'ws',
        host: 'localhost',
        port: 5173,
      },
    },
    plugins: [crx({ manifest }), react()],
  };
});

[bozzhik]

I'm getting websocket error. I was getting similar error after adding this setting issue got result but now I'm getting websocket error.

@arif-b-khan Have you found a way to solve this problem? I have it right after the initialization of the project.

[bozzhik]

@arif-b-khan as I understand it, Vite has updated something and if someone has such errors, here is the solution.

WebSocket connection to 'ws://localhost:5173/' failed: Error during WebSocket handshake: Unexpected response code: 400 

crxjs/chrome-extension-tools#971 (comment)

my fix commit
bozzhik/snable@e7603e7