21

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!

Improve this question
1
  • Without MCVE I don't think it's answerable. How is this service worker related to the extension? What does the extension do? What does the service worker do? What is its domain? Commented Mar 7, 2018 at 17:15

5 Answers 5

Reset to default
32

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 }
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Good 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.
Had this happen with the vue developer tools, this solved it. Probably good practise to do this on service workers in general. 👍
Another 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.
Nicer would be if(!(event.request.url.startsWith('http')))
@jameshfisher thanks for your input, my answer is adjusted.
|
21

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

Improve this answer

1 Comment

True, in my case too, it was wappalyzer
4

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'.

Improve this answer

1 Comment

Possibly this (untested): const url = new URL(e.request.url), mine = url.origin === location.origin; if ("GET" !== e.request.method || !mine) return;
1

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"

Improve this answer

Comments

0

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)); }
Improve this answer

1 Comment

Welcome to Stack Overflow! Thank you for your answer. Please provide more details about your solution. Code snippets, high quality descriptions, or any relevant information would be great. Clear and concise answers are more helpful and easier to understand for everyone. Edit your answer with specifics to raise the quality of your answer. For more information: How To: Write good answers. Happy coding!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.