Service worker has not loaded fully

[rahulbansal16]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

Hi everyone,

I was following the CRXJS tutorial https://crxjs.dev/vite-plugin/getting-started/react/create-project for creating an extension using react.

I was successfully able to create the extension. It was working perfectly and I let the extension stay in my browser without changing anything.

After 3-4 days I got an error on clicking the extension icon "Service worker has not loaded fully."

The service worker related to the extension is not shown in the chrome://inspect/#service-workers

Reproduction

1. Follow the tutorial https://crxjs.dev/vite-plugin/getting-started/react/create-project
2. Let the extension in your browser for sometime without clicking it etc.

Logs

No response

System Info

npx: installed 1 in 1.516s

  System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 68.94 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.4 - ~/.nvm/versions/node/v14.17.4/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v14.17.4/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.4/bin/npm
  Browsers:
    Brave Browser: 101.1.38.119
    Chrome: 103.0.5060.114
    Chrome Canary: 105.0.5168.0
    Safari: 15.4
  npmPackages:
    @crxjs/vite-plugin: 1.0.12 => 1.0.12 
    vite: ^2.9.9 => 2.9.13

Severity

blocking all usage of RPCE

[Kazdan1994]

Hi. Try to reload your extension

in chrome://extensions

It work for me

Have a nice day :)

[rahulbansal16]

I did reloading it did not work for me. I am worried How to deal with this if it happens at the production extension at some user browser?

[jacksteamdev]

If you are seeing "Waiting for service worker", it means that the extension is the development build. During development, Vite serves the background and extension page files from localhost, so Vite must be running in the terminal.

@rahulbansal16 When you run the build command, the production version of the extension will include the background files, so everything will work.

[jacksteamdev]

We should change the "Waiting..." message to guide the developer to either start Vite or run the build command.

This is a great first issue, anyone who is interested in contributing can start here: https://github.com/crxjs/chrome-extension-tools/blob/a8d567092f0cb4e27ce781d009e8e856cdae33b1/packages/vite-plugin/src/client/html/precontroller.html

[rahulbansal16]

@jacksteamdev I just started the npm run dev and it started working. Thanks for your help.

[erezsh]

Hello! I wanted to ask, why not wait for the service worker to be ready, and then reload the page?

This logic seems to be attempted here: https://github.com/crxjs/chrome-extension-tools/blob/a8d567092f0cb4e27ce781d009e8e856cdae33b1/packages/vite-plugin/src/client/es/page-precontroller-script.ts (close enough)

But for some reason it doesn't work?

[shoota]

Hi, I had get same error, and fixed like below....

1. make cert with mkcert
2. add cert configuraton to vite.config like this.

   server: {
   https: {
     key: fs.readFileSync('./localhost-key.pem'),
     cert: fs.readFileSync('./localhost.pem'),
   },
   },

3. launch vite dev server
4. change http to https in service-worker-loader.js

I guess, Chrome not permit to access via http in default. Can I have any way that fix this?

[Nawa-raj]

In my case, I build the dist from vite and then add a file in the web extension. After a review from google. the same issue arises.

At local it runs fine.

If I add a dist file in chrome in development mode it runs fine

what should steps I take to resolve this issue

[rahulbansal16]

I am guessing you have not done npm run build before publishing.

On Thu, Mar 23, 2023, 09:08 Nawaraj Jaishi @.***> wrote:

In my case, I build the dist from vite and then add a file in the web extension. After a review from google. the same issue arises. [image: image] https://user-images.githubusercontent.com/24637410/227095805-35aa860a-9256-4904-9483-e2be1529c825.png

At local it runs fine. [image: image] https://user-images.githubusercontent.com/24637410/227095924-0680125f-be69-402b-9a4d-07cc811b70e8.png

If I add a dist file in chrome in development mode it runs fine

what should steps I take to resolve this issue

— Reply to this email directly, view it on GitHub https://github.com/crxjs/chrome-extension-tools/issues/449#issuecomment-1480555739, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACAS47MD3TT5UEILCSJJZ33W5PAT3ANCNFSM53C6UWTQ . You are receiving this because you were mentioned.Message ID: @.***>

[ivalsaraj]

This issue is still not resolved? Could you please advice on how to solve this? @jacksteamdev

The popup shows waiting for service worker. Service worker inactive.

1. Vite development is running in the terminal
2. Tried reloading the extension
3. Vite production build is working

Any solution appreciated.

[paularah]

@jacksteamdev, my case is similar @ivalsaraj 's . I would appreciate any solution

[adamscybot]

I've had this temperamentally and restarting chrome fixed it.

[ericuldall]

Same issue and I noticed there seems to be an issue loading the env in server-worker-loader

import 'http:/localhost:3000/@vite/env';
import 'http://localhost:3000/crx-client-worker';

It's built with http:/ missing the second forward slash. Anyone else seeing that? Built for vue.

in index.cjs on line 3518 loader =import 'http:/localhost:${port}/@vite/env';`

[ericuldall]

Fixing that doesn't seem to resolve the issue. I get a cors error in chrome extension logs:

Access to script at 'http://localhost:3000/crx-client-worker' from origin 'chrome-extension://gcnpefeokmmfpfbihpigfjmiancnjnhi' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[ericuldall]

found my issue. Had something running on port 3000 in docker. Vite is not port aware against non vite process' it seems.

[paularah]

In my case, this only happens when there's code in the background script. Emptying the background script stops the error which is quite weird.

[cenkce]

In my case, it did not load service worker because file name was pascal-case.

[mubaidr]

AFAIK this happens when you have error in background script. Clear error then it will load as usual.

[dpacmittal]

For anyone running into this issue, try doing npm run dev -- --host.

[rojakcoder]

For anyone running into this issue, try doing npm run dev -- --host.

This is the solution when your extension is running on a different port. A typical case when this happens is if you have another app already running on the default port 3000.

[supfiger]

Probably FOUND a solution!

The issue reproduces with the following version: "@crxjs/vite-plugin": "^1.0.14". But when I installed beta version of the package — the issue have disappeared.

So, just run the following:

bun i -D @crxjs/vite-plugin@beta

(or using npm/yarn etc).

[AlexKrew]

bun i -D @crxjs/vite-plugin@beta

This FIXED it for me. Thanks