How to import/use an external JavaScript file in the background script of a Firefox WebExtension?

Question

Inside the background script of my WebExtension I want to use functions/constants from another JavaScript file. But as simple as it sounds, I cannot get it to work.

I'm using the following four files as a minimal example for my problem:

manifest.json:

{
    "manifest_version": 2,
    "name": "MinimalCompleteReproducibleExample",
    "version": "0.0.0.0",

    "background": {
        "page": "background.html"
    }
}

It basically just loads background.html as the background script/page.

background.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script type="module" src="/mylib.js"></script>
        <script src="background.js"></script>
    </body>
</html>

It loads the "external" JavaScript file mylib.js that contains the functions/constants I want to reuse and the actual background script background.js.

mylib.js:
```
export const foo = 42;
```
It just exports the constant foo.
background.js:
```
console.log(foo);
```
It tries to use the content of the "external" JavaScript file mylib.js.

When I load this extension, I get the following error message in the debugger:

Uncaught ReferenceError: foo is not defined

That seems to indicate that the content of mylib.js is not available.

Before that, I did load the background.js directly in manifest.json and added the following line to background.js:

import { foo } from "/mylib.js";

But that does not seem to be allowed in WebExtensions and also does not work:

Uncaught SyntaxError: import declarations may only appear at top level of a module

So can someone tell me, how to make another JavaScript file available inside a background script?

Add type="module" to your background script declaration as well. — woxxom
– woxxom, Commented Aug 27, 2020 at 16:04
Please note that using a remote script in a Firefox extension will result in rejection of the extension by AMO. — erosman
– erosman, Commented Aug 28, 2020 at 4:57
@erosman Thanks for the advice. Fortunateley, I don't plan to pull it in dynamically. I will ship the library within the extension. — stackprotector
– stackprotector, Commented Aug 28, 2020 at 8:18

stackprotector · Accepted Answer · 2020-08-28 08:15:03Z

2

wOxxOm's comment helped me solving it. Two changes are necessary:

Addition of type="module" to <script src="background.js"></script> in background.html
Addition of import { foo } from "/mylib.js"; to background.js

The line <script type="module" src="/mylib.js"></script> in background.html can then be omitted.

Complete working example:

manifest.json:

{
    "manifest_version": 2,
    "name": "MinimalCompleteReproducibleExample",
    "version": "0.0.0.0",

    "background": {
        "page": "background.html"
    }
}

background.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script type="module" src="/background.js"></script>
    </body>
</html>

mylib.js:
```
export const foo = 42;
```

background.js:

import { foo } from "/mylib.js";
console.log(foo);

answered Aug 28, 2020 at 8:15

stackprotector

14.2k6 gold badges69 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

newTSCoder · Accepted Answer · 2025-06-25 06:40:53Z

0

As I was looking around how to fix the problem for quiet a while and did not find my solution anywhere:

There is also the option to set "type": "module" for a background script as described here: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background

so in manifest.json it would be as follows:

"background": {
        "scripts": ["background.js"],
        "type": "module"
    }

edited Jun 25 at 6:40

answered Jun 25 at 6:39

newTSCoder

11 bronze badge

Collectives™ on Stack Overflow

How to import/use an external JavaScript file in the background script of a Firefox WebExtension?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related