service worker is not in navigator for chrome-extension

Question

I am developing chrome extension with manifest v3. I tried the below code to register service worker as in many resources, I found that

[Service Worker Registration] Registered extension scheme to allow service workers
Service Workers require a secure origin, such as HTTPS. 
chrome-extension:// pages are not HTTP/HTTPS, but are secure so this change 
becomes a necessary step to allow extensions to register a Service Worker.

"chrome-extension" is added as a scheme allowing service workers.

but after using the below code also, service worker is not working, and background.js file is not working due to this.

Scope URL:

chrome-extension://ifcfmjiflkcjbbddpbeccmkjhhimbphj/trigger/trigger.html

serviceWorker.js

self.addEventListener('load', function () {
    navigator.serviceWorker.register('./background.js').then(function (registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function (err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
});

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('v1').then((cache) => {
            return cache.addAll([
                
            ]);
        })
    );
});

self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request).then((resp) => {
            return resp || fetch(event.request).then((response) => {
                return caches.open('v1').then((cache) => {
                    // cache.put(event.request, response.clone());
                    return response;
                });
            });
        })
    );
});

self.addEventListener('activate', (event) => {
    var cacheKeeplist = ['v2'];

    event.waitUntil(
        caches.keys().then((keyList) => {
            return Promise.all(keyList.map((key) => {
                if (cacheKeeplist.indexOf(key) === -1) {
                    return caches.delete(key);
                }
            }));
        })
    );
});

manifest.json

{
  "manifest_version": 3,

  "name": "TestExtension",
  "description": "This extension is for testing purpose only",
  "version": "0.0.1",
  "background":{
    "service_worker":"./serviceWorker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  },  
  "permissions":["storage", "tabs", "activeTab", "scripting", "declarativeNetRequest", "declarativeNetRequestFeedback","browsingData","contextMenus"],  
  "host_permissions":["<all_urls>"],
  "web_accessible_resources": [
    {
      "resources": [ "css/notification.css" ],
      "matches": [ "<all_urls>" ]
    }
  ],
  "content_scripts":[
    {
      "js":["content-scripts/content.js"],
      "matches":["<all_urls>"],
      "all_frames":true,
      "exclude_matches":["*://extensions/*"],
      "run_at":"document_end"
    }
  ],
  "icons":{
    "16":"assets/baby-logo-black-icon.png",
    "48":"assets/baby-logo-black-icon.png",
    "128":"assets/baby-logo-black-icon.png"
  },
  "action":{
    "default_title":"TestExtension",
    "default_popup":"trigger/trigger.html"
  }
}

anyone please help me and guide me on this whether I have missed anything in serviceWorker.js or manifest.json? or made any mistake on this? Kindly help me to make serviceWorker.js and background.js to work.

Note: With the above code, I am not getting any errors on serviceWorker.js, and its not working also.

score 1 · Accepted Answer · answered Aug 06 '21 at 10:18

1

There's no need to register anything.
The browser does it automatically when you install the extension.

Remove the registration code and serviceWorker.js.
Use "service_worker": "background.js" in manifest.json

answered Aug 06 '21 at 10:18

wOxxOm

65,848
11
132
136

I had followed this, but it gives me error saying Service Worker Registration failed – Beginner Aug 06 '21 at 11:31
2

It means you have an unrelated problem in your background.js, see [Service worker registration failed. Chrome extension](https://stackoverflow.com/a/66115801) – wOxxOm Aug 06 '21 at 12:04
I am sure no issues in background.js, because when serviceWorker.js executes, its not even entering into addEventListener part, anything above that only executes, I have tested by giving some console.log().only that gets printed – Beginner Aug 06 '21 at 14:51
1

It's not about being sure, it's about facts. And the fact is there is something wrong. For example, if you use addEventListener for DOM, it'll fail as there is no DOM in ManifestV3 background script. There's no need for addEventListener for anything in background script, normally. If you follow the solution in the linked topic you will at least see the error. Alternatively, load the extension in Chrome Canary so it'll show the error without any additional workarounds. Anyway, this is already beyond this question's topic so you can ask a new question with a new [MCVE](/help/mcve). – wOxxOm Aug 06 '21 at 14:59

service worker is not in navigator for chrome-extension

1 Answers1