Service Worker TypeError when opening Chrome extension

My service worker is throwing this error in Chrome when I open the WAVE (Web Accessibility Evaluation Tool) extension:

Uncaught (in promise) TypeError: Request scheme 'chrome-extension' is unsupported at sw.js:52 (anonymous) @ sw.js:52 Promise.then (async) (anonymous) @ sw.js:50 Promise.then (async) (anonymous) @ sw.js:45 Promise.then (async) (anonymous) @ sw.js:38

My service worker code is:

(function () { 'use strict'; var consoleLog; var writeToConsole; const CACHE_NAME = '20180307110051'; const CACHE_FILES = [ ' ' ' ' ' ' 'favicon.20180205072319.ico', 'favicons/android-chrome-512x512.20180211120531.png', 'favicons/android-chrome-192x192.20180211120531.png', 'offline.html' ]; // for debugging: writeToConsole = false; consoleLog = function (message) { if (writeToConsole) { console.log(message); } }; // self.addEventListener('install', function (e) { e.waitUntil( Promise.all([caches.open(CACHE_NAME), self.skipWaiting()]).then(function (storage) { var static_cache = storage[0]; return Promise.all([static_cache.addAll(CACHE_FILES)]); }) ); }); // intercept network requests: self.addEventListener('fetch', function (event) { consoleLog('Fetch event for ' + event.request.url); event.respondWith( caches.match(event.request).then(function (response) { if (response) { consoleLog('Found ' + event.request.url + ' in cache'); return response; } consoleLog('Network request for ' + event.request.url); // add fetched files to the cache: return fetch(event.request.clone()).then(function (response) { // Respond with custom 404 page if (response.status === 404) { return caches.match('error?status=404'); } return caches.open(CACHE_NAME).then(function (cache) { if (event.request.url.indexOf('test') < 0) { cache.put(event.request.url, response.clone()); } return response; }).catch(function () { console.log("Uncaught (in promise) TypeError: Request scheme 'chrome-extension' is unsupported"); }); }); }).catch(function (error) { // respond with custom offline page: consoleLog('Error, ' + error); // Really need an offline page here: return caches.match('offline.html'); }) ); }); // delete unused caches // self.addEventListener('activate', function (e) { e.waitUntil( Promise.all([ self.clients.claim(), caches.keys().then(function (cacheNames) { return Promise.all( cacheNames.map(function (cacheName) { if (cacheName !== CACHE_NAME) { console.log('deleting', cacheName); return caches.delete(cacheName); } }) ); }) ]) ); }); }()); 

I'm unclear on the nature of the problem and how to correct it. Many thanks in advance for help!

5 Answers

WAVE includes some code in your site, which then makes some request to the WAVE extension itself with an url beginning with chrome-extension://xyz. Your service intercepts this request and wants to make a fetch himself because this request is not cached. But urls with the protocol/request scheme chrome-extension:// are not allowed in service worker.

So you probably don't want to handle these WAVE requests with your service worker. Skip them with something like

if(!event.request.url.startsWith('http')){ //skip request } 

** It is because of installed chrome extension** In my case it was wappalyzer

Any of, or all of these works.

if ( url.startsWith('chrome-extension') || url.includes('extension') || !(url.indexOf('http') === 0) ) return; 

But I'm just thinking: 'can a request come from an extension that negates the above conditions'? If yes, then how can I ensure the only successful one is that which comes from 'self'.

In my case I use chrome and extension the wappalyzer... And I change to read and change site data to "When you click the extension"

if your are on http response

 if(!event.request.url.startsWith('http')){ event.waitUntil(addToCache(event.request)); } and if you are on https response if(!event.request.url.startsWith('https')){ event.waitUntil(addToCache(event.request)); }