1

I noticed again a very interesting phenomenon regarding Chrome Extension development. I work with npm and webpack. I installed a npm module called 'tldts' to make URL processing easier. The module works great in all areas of my extension (popup, options, content-script, own page, ...) ... but as soon as I use it in my background script (aka service worker) nothing works more. Nothing! And the best part ... I do not get any errors. I checked all consoles. Maybe someone has any ideas what could cause this problem. So actually I cannot show you any errors because there are no errors >.<?

Shiro
  • 11
  • 4
  • There's no such restriction, which means there's something in that package that's not compatible with a service worker i.e. it uses something specific to `window` or DOM. If you've checked the correct [background.js console](/a/10258029), your next step is to debug the code in devtools or switch to a different package. – wOxxOm Mar 18 '22 at 13:59
  • ok, thank you for the clarification in regard using npm packages. I tried 3 different npm packages and I have the same issue for all of them. So I decided to do the long way and filter the URLs on the common way (RegEx). When I have more time, I will try to figure out the problem. When I find something, I will post it here. – Shiro Mar 18 '22 at 15:14

1 Answers1

2

In order to use import statements in your background script you need to set the mode to "module" in your manifest.json:

{
  "background": {
    "service_worker": "path/to/background.js",
    "mode": "module"
  }
}

That will allow you to do:

// background.js
import foo from 'bar'

// code...

Otherwise you'll need to use the importScripts() function:

// background.js
importScripts('./path/to/bar.js')
Evan Butler
  • 51
  • 1
  • 4