Uncaught (in promise) TypeError: Request scheme 'chrome-extension' is unsupported

[masumonline]

When i try to refresh the page. i get this error.

[InSantoshMahto]

I am also getting same error .

[raylee]

This looks like a relevant post for this bug:

https://stackoverflow.com/questions/49157622/service-worker-typeerror-when-opening-chrome-extension

[MirajMenon]

@masumonline , @InSantoshMahto, @iamshaunjp Anyone who fixed this error?

[InSantoshMahto]

hey, I have solved this issue in this way.

  // check if request is made by chrome extensions or web page
  // if request is made for web page url must contains http.
  if (!(evt.request.url.indexOf('http') === 0)) return; // skip the request. if request is not made with http protocol

whole code for fetch event:

// fetch event
self.addEventListener('fetch', evt => {
  // check if request is made by chrome extensions or web page
  // if request is made for web page url must contains http.
  if (!(evt.request.url.indexOf('http') === 0)) return; // skip the request. if request is not made with http protocol

  evt.respondWith(
    caches
      .match(evt.request)
      .then(
        cacheRes =>
          cacheRes ||
          fetch(evt.request).then(fetchRes =>
            caches.open(dynamicNames).then(cache => {
              cache.put(evt.request.url, fetchRes.clone());
              // check cached items size
              limitCacheSize(dynamicNames, 75);
              return fetchRes;
            })
          )
      )
      .catch(() => caches.match('/fallback'))
  );
});

// cache size limit function
const limitCacheSize = (name, size) => {
  caches.open(name).then(cache => {
    cache.keys().then(keys => {
      if (keys.length > size) {
        cache.delete(keys[0]).then(limitCacheSize(name, size));
      }
    });
  });
};

my service worker script: ### https://teckat.com/sw.js

[riuann23]

hey, I have solved this issue in this way.

  // check if request is made by chrome extensions or web page
  // if request is made for web page url must contains http.
  if (!(evt.request.url.indexOf('http') === 0)) return; // skip the request. if request is not made with http protocol

whole code for fetch event:

// fetch event
self.addEventListener('fetch', evt => {
  // check if request is made by chrome extensions or web page
  // if request is made for web page url must contains http.
  if (!(evt.request.url.indexOf('http') === 0)) return; // skip the request. if request is not made with http protocol

  evt.respondWith(
    caches
      .match(evt.request)
      .then(
        cacheRes =>
          cacheRes ||
          fetch(evt.request).then(fetchRes =>
            caches.open(dynamicNames).then(cache => {
              cache.put(evt.request.url, fetchRes.clone());
              // check cached items size
              limitCacheSize(dynamicNames, 75);
              return fetchRes;
            })
          )
      )
      .catch(() => caches.match('/fallback'))
  );
});

// cache size limit function
const limitCacheSize = (name, size) => {
  caches.open(name).then(cache => {
    cache.keys().then(keys => {
      if (keys.length > size) {
        cache.delete(keys[0]).then(limitCacheSize(name, size));
      }
    });
  });
};

my service worker script: ### https://teckat.com/sw.js

Thanks for this!!

[ahmad-ali14]

#1 (comment)
perfect answer

[justingolden21]

Wouldn't that also detect any https requests as well and block all of yours? I saw the SO post and decided against because I figured it would do that. If it "works on your machine" it's probably just localhost, right?

[justingolden21]

I tried adding:

caches.match(evt.request).then(cacheRes => {
			return cacheRes || fetch(evt.request).then(fetchRes => {
				return caches.open(dynamicCacheName).then(cache => {
+					if (new RegExp('^(?:[a-z]+:)?//', 'i').test(new URL(evt.request.url).protocol) ) return;
					cache.put(evt.request.url, fetchRes.clone());

According to these links:

https://stackoverflow.com/a/19709846/4907950

madskristensen/WebEssentials.AspNetCore.ServiceWorker#66

But still no use. Are we sure that http is the problem?

[Darkace01]

So what I did was to check if the url if it doesn't starts with http or https
caches.open(version) .then(function (cache) { // here be the fix if(request.url.match("^(http|https)://")){ cache.put(request, copy); }else{ return; }

[emekaelo]

I tried adding:

caches.match(evt.request).then(cacheRes => {
			return cacheRes || fetch(evt.request).then(fetchRes => {
				return caches.open(dynamicCacheName).then(cache => {
+					if (new RegExp('^(?:[a-z]+:)?//', 'i').test(new URL(evt.request.url).protocol) ) return;
					cache.put(evt.request.url, fetchRes.clone());

According to these links:

https://stackoverflow.com/a/19709846/4907950

madskristensen/WebEssentials.AspNetCore.ServiceWorker#66

But still no use. Are we sure that http is the problem?

According to the comments in the solution, the code is checking if the url of the request being made contains 'http'.
A browser extension is trying to make a request which is causing the error. The request from the extension does not have http in its url (example) so this line of code if (!(evt.request.url.indexOf('http') === 0)) return; terminates the code if there is no 'http' in the request url (which is from the extension)

[Zibri]

self.addEventListener("fetch", event=>{
    event.respondWith(caches.open(cacheName).then(cache=>{
        return cache.match(event.request).then(response=>{
            return response || fetch(event.request).then(networkResponse=>{
                if (!(event.request.url.indexOf('chr') === 0)) cache.put(event.request, networkResponse.clone());
                return networkResponse;
            }
            );
        }
        )
    }
    ));
}
);

[ImieboGodson]

Wouldn't that also detect any https requests as well and block all of yours? I saw the SO post and decided against because I figured it would do that. If it "works on your machine" it's probably just localhost, right?

No, it wont. As long as the http is at index 0, that statement returns true.