Chrome扩展打开时Service Worker抛出TypeError问题求助

Hey there, let's break down this issue and fix it step by step!

This error pops up because Service Workers aren't built to handle requests using the chrome-extension scheme. Service Workers are designed to manage HTTP/HTTPS web requests, but when you launch the WAVE extension, it's triggering your site's Service Worker to try processing the extension's internal requests (like loading its own resources). Since the extension uses the chrome-extension:// protocol, your Service Worker throws an error because it doesn't support this non-web scheme.

Here's how to resolve this:

• Filter out non-web protocol requests in your Service Worker
  Add a check at the start of your fetch event listener to skip any requests that aren't using HTTP or HTTPS. This way, your Service Worker won't touch extension-related requests at all:

  self.addEventListener('fetch', (event) => {
    // Skip chrome-extension and other non-web requests
    const url = new URL(event.request.url);
    if (url.protocol !== 'http:' && url.protocol !== 'https:') {
      return; // Let the browser handle these requests natively
    }
    // Your existing fetch logic goes here...
  });
  

• Add guard clauses around the problematic code
  The error points to line 52 in sw.js—that's where your code is trying to process an unsupported request. Wrap that logic in a check to ensure you only handle valid web requests:

  // Example around your line 52 logic
  const targetRequest = event.request;
  const requestUrl = new URL(targetRequest.url);
  
  // Only proceed if it's a web request
  if (requestUrl.protocol === 'http:' || requestUrl.protocol === 'https:') {
    // Your original code that was throwing the error (e.g., cloning, caching)
  } else {
    // Pass the request through without modification
    event.respondWith(fetch(targetRequest));
  }
  

• Reload your Service Worker to apply changes
  After updating sw.js, head to Chrome DevTools → Application → Service Workers, click "Update" to refresh the worker, then reload your page. Test opening the WAVE extension again—this should stop the error from appearing.

内容的提问来源于stack exchange，提问作者Tom