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()],
  };
});

[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 

https://github.com/crxjs/chrome-extension-tools/issues/971#issuecomment-2605520184

my fix commit https://github.com/bozzhik/snable/commit/e7603e71a19edd782e22a7a94a4b2a96f6fa34af

[kpripper]

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()], }; });

But it works when I restart the PC.

[phidn]

I belive we need 2 step:

update vite.config.ts server: { headers: { 'Access-Control-Allow-Origin': '*', }, port: 5173, strictPort: true, hmr: { port: 5173, }, },

update mainfest.ts const isDev = process.env.NODE_ENV == 'development' ...(isDev ? { content_security_policy: { extension_pages: "script-src 'self' http://localhost; object-src 'self'" } } : {}), host_permissions: isDev ? ['http://localhost/*'] : [],