← Go back

Using ES Modules in your Browser Extension's Service Worker

When developing a browser extension – in this case a Chrome extension – we may begin developing using the same ES Modules approach we’ve used in the frontend, but then are presented with an error along the lines of Cannot use 'import.meta' outside a module.

In the following diff we can use the JSON schema to find a type property we can use to specify the service worker is an ES Module. Note, $schema is not actually a valid manifest property and will throw a warning upon loading the extension, however in instances like this it is helpful.

  "$schema": "",
  "name": "My super cool extension",
  "description": "",
  "version": "0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "worker.js",
+   "type": "module"
  "action": {
    "default_popup": "index.html"

Now add the following to the worker.js file:

console.log('import.meta.url is', import.meta.url)

And finally after loading the extension we can view the value of import.meta.url without error.