打开 Chrome 扩展时出现 Service Worker TypeError答案

【问题标题】：Service Worker TypeError when opening Chrome extension打开 Chrome 扩展时出现 Service Worker TypeError
【发布时间】：2022-01-26 20:38:52
【问题描述】：

当我打开 WAVE（Web 可访问性评估工具）扩展时，我的服务人员在 Chrome 中抛出此错误：

Uncaught (in promise) TypeError: Request scheme 'chrome-extension' is 不支持在 sw.js:52（匿名）@sw.js:52 Promise.then（异步）（匿名）@sw.js:50 Promise.then（异步）（匿名）@sw.js:45 Promise.then (async) (匿名) @ sw.js:38

我的服务工作者代码是：

(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);
                            }
                        })
                    );
                })
            ])
        );
    });
}());

我不清楚问题的性质以及如何纠正它。非常感谢您的帮助！

【问题讨论】：

如果没有MCVE，我认为这是无法回答的。这个 service worker 与扩展有什么关系？扩展有什么作用？服务人员做什么的？它的域是什么？

标签： javascript google-chrome google-chrome-extension promise service-worker

【解决方案1】：

WAVE 在您的站点中包含一些代码，然后它会向 WAVE 扩展本身发出一些请求，其 url 以 chrome-extension://xyz 开头。您的服务拦截此请求并希望自己进行提取，因为此请求未缓存。但是在 service worker 中不允许使用带有协议/请求方案 chrome-extension:// 的 url。

所以你可能不想用你的 service worker 处理这些 WAVE 请求。用类似的东西跳过它们

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

【讨论】：

好答案。我看到我的服务人员拦截了对“React 开发人员工具”扩展的请求，并且由于您提到的原因而未能获取它。
如果vue developer tools 发生这种情况，这就解决了。一般而言，对服务人员执行此操作可能是一种很好的做法。 ?
关于“现代 JS”的另一个奇妙之处。你永远不会看到问题 X。你正常发展，做一些完全不相关的事情，然后开始遇到问题 X。为什么？好吧，您可以花一天左右的时间梳理一下 babel 内部结构，或者只是向 JS 大神祈祷这并不意味着出了什么问题……我从一开始就一直在使用 React Dev 工具，但从来没有过这个……到现在为止。
更好的是if(!(event.request.url.startsWith('http')))
@jameshfisher 感谢您的意见，我的答案已调整。

【解决方案2】：

** 这是因为安装了 chrome 扩展程序** 就我而言，它是 wappalyzer

【讨论】：

没错，在我的情况下，它也是 wappalyzer

【解决方案3】：

就我而言我使用 chrome 并扩展 wappalyzer... 我更改为读取站点数据并将其更改为“单击扩展程序时”

【讨论】：

【解决方案4】：

任何或所有这些作品。

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

但我只是在想：'请求是否可以来自否定上述条件的扩展'？如果是，那我如何确保唯一成功的是来自“自我”的。

【讨论】：