Service Worker TypeError when opening Chrome extension
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
}
Tom
Updated on June 03, 2022Comments
-
Tom almost 2 years
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 = [ 'https://fonts.gstatic.com/s/notosans/v6/9Z3uUWMRR7crzm1TjRicDv79_ZuUxCigM2DespTnFaw.woff2', 'https://fonts.gstatic.com/s/notosans/v6/ByLA_FLEa-16SpQuTcQn4Igp9Q8gbYrhqGlRav_IXfk.woff2', 'https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nJBw1xU1rKptJj_0jans920.woff2', 'https://fonts.gstatic.com/s/notosans/v6/PIbvSEyHEdL91QLOQRnZ1xampu5_7CjHW5spxoeN3Vs.woff2', 'https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2', '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); } }; // https://stackoverflow.com/questions/37117933/service-workers-not-updating 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 // https://stackoverflow.com/questions/37117933/service-workers-not-updating 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!
-
Paul Grime over 5 yearsGood answer. I was seeing my service worker intercepting requests for the "React Developer Tools" extension, and failing to fetch it because of the reason you mention.
-
Ecker00 about 5 yearsHad this happen with the
vue developer tools
, this solved it. Probably good practise to do this on service workers in general. 👍 -
AntonOfTheWoods about 3 yearsAnother one of the wonderful things about "modern JS". You never see issue X. You develop as normal, do something completely unrelated, and start getting issue X. Why? Well you could spend a day or so combing through babel internals or just pray to the JS gods that it doesn't mean something has gone wrong... I have been using the React Dev tools since the beginning and never had this... until now.
-
jameshfisher over 2 yearsNicer would be
if(!(event.request.url.startsWith('http')))
-
Stef Chäser over 2 years@jameshfisher thanks for your input, my answer is adjusted.