CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionchrome-extension-manifest-v3
Beginner
Beginner

Reputation: 349

service worker is not in navigator for chrome-extension

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.

Upvotes: 1

Views: 1989

Answers (1)

woxxom
woxxom

Reputation: 73506

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

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

Upvotes: 1

Related Questions