Use Quasar App code in background script of BEX

Question

I am developing a browser extension using Quasar framework's BEX mode. In the app part (popup window), I have a TypeScript file which contains some common functions used throughout the application.

I want to use the same function in background.js in order to avoid code duplication. So to do that I simple imported them on top of the file but when I run the extension I get some errors in the console of background script.

Logger.ts

export function appendDebugMessage(message: string) {
    console.log(message)
}

backgound.js

let logger = require ("src/utilities/Logger.ts");
logger.appendDebugMessage("from background script")

For the above code, I get the error:

Uncaught ReferenceError: require is not defined

If I use import instead of require

import {appendDebugMessage} from "src/utilities/Logger";
appendDebugMessage("from background script")

I get the error:

SyntaxError: Cannot use import statement outside a module

This is a very basic example but I have a lot of code involving native messaging stuff that I would like to reuse.

So, my question is, how can I re-use the code for my background script? Or is it not possible at all and I need to re-write the TS code in JS again for backgrouns script?

Answer 1

You can put multiple scripts in the background_scripts section of the manifest.json. All the scripts will be loaded into the same global environment.