CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
kingandy1234
kingandy1234

Reputation: 53

chrome extension - Service worker registration failed - manifest V3

I am trying to build a simple extension, but I get "Service worker registration failed" error on the background.js line. I read some other posts using a wrapper file to load the background.js but I am using chrome version 105 and shouldn't need to use the wrapper fix.

manifest.jason:

{
  "name": "Test",
  "description" : "Test",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

background.js:

chrome.action.onClicked.addListener(tab => {  
  chrome.tabs.update({url: 'http://example.com'});
});

Upvotes: 2

Views: 6031

Answers (2)

Irfandy J.
Irfandy J.

Reputation: 1444

I have different cause of error but same message.

Short Story

You probably made a typo within the service worker file. In my case it's service-worker.js which imported sw-omnibox.js however, the file name that I have was sw-ombibox.js.

Long Story

Apparently I was doing the Handle events with service worker tutorial by Chrome itself.

I'm surprised why apparently they point it like this. service-worker-registration-error

Of course my first instinct was to check for any typo in service-worker.js which apparently had no error. I checked my previous lesson and it had no problem. However, turns out it was because of the files I imported in service-worker.js

// service-worker.js
import './sw-omnibox.js';
import './sw-tips.js';

While I wrote sw-omnibox.js here, my file name was sw-ombibox.js! Took a while to play this kind of hide and seek. Joke aside, as I was doing this apparently the next section of the tutorial mentioned this.

Upvotes: 1

woxxom
woxxom

Reputation: 73506

How to investigate service worker registration error

If you click Errors in chrome://extensions page you'll see:

Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked')

Click it and you'll see the source:

chrome.action.onClicked.addListener(tab => {

It means that chrome.action is undefined.

Problem

Lots of API inside chrome are present only if your extension's manifest.json lists its associated permission name in "permissions" or in a special key - this is indicated at the beginning of the official documentation page for an API.

Solution

Add "action": {} to manifest.json.

You can also specify a title and an icon inside, see the documentation, but be careful with default_popup - it disables onClicked listener when specified i.e. if you want to use default_popup to show html in this standard popup you'll need to move the inside of your onClicked listener from background.js to the beginning of the popup.js script for your popup.html, which will run every time the popup is shown. In your case it's chrome.tabs.update({url: 'http://example.com'});

Upvotes: 8

Related Questions