Export the module as a object:

'use strict';


const injectFunction = () => window.alert('hello world');


export {injectFunction};

Then you can import its property:

'use strict';
import {injectFunction} from './my-script.js';

I managed to find a workaround.

Disclaimer

First of all, it’s important to say that content scripts don’t support modules as of January 2018. This workaround sidesteps the limitation by embedding module script tag into the page that leads back to your extension.

Workaround

This is my manifest.json:

    "content_scripts": [ {
"js": [
"content.js"
]
}],
"web_accessible_resources": [
"main.js",
"my-script.js"
]

Note that I have two scripts in web_accessible_resources.

This is my content.js:

    'use strict';


const script = document.createElement('script');
script.setAttribute("type", "module");
script.setAttribute("src", chrome.extension.getURL('main.js'));
const head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
head.insertBefore(script, head.lastChild);

This will insert main.js into the webpage as a module script.

All my business logic is now in main.js.

For this method to work, main.js (as well as all scripts that I will import) must be in web_accessible_resources in the manifest.

Example Usage: my-script.js

    'use strict';


const injectFunction = () => window.alert('hello world');


export {injectFunction};

And in main.js this is an example of importing the script:

    'use strict';


import {injectFunction} from './my-script.js';
injectFunction();

This works! No errors are thrown, and I am happy. :)

I just stumbled across this question while trying to solve the same thing myself.

Anyways, I think there's a simpler solution to injecting your own custom modules into your content script. I was looking at how Jquery is injected and it occurs to me you can do the same thing by creating an IIFE (Immediately Invoked Function Expression), and declaring it in your manifest.json

It goes something like this:

In your manifest.json:

"content_scripts": [
{
"matches": ["https://*"],
"css": ["css/popup.css"],
"js": ["helpers/helpers.js"]
}],

Then just create an IIFE in your helpers/helpers.js:

var Helpers = (function() {
var getRandomArbitrary = function(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
return {
getRandomArbitrary: getRandomArbitrary
}
})()

Now, you can freely use your helper functions in your content script:

Helpers.getRandomArbitrary(0, 10) // voila!

I think it's great if you use this method to refactor some of your generic functions. Hope this helps!

Short Answer:

You can mimic some of the functionality and get some of the benefits of import/export in browser extensions by creating the following file and listing it early in your manifest.json:

let exportVars, importVarsFrom;
{
const modules = {};
exportVars = varsObj => ({
from(nameSpace) {
modules[nameSpace] || (modules[nameSpace] = {});
for (let [k,v] of Object.entries(varsObj)) {
modules[nameSpace][k] = v;
}
}
});
importVarsFrom = nameSpace => modules[nameSpace];
}

Then, export from one file/module like this:

exportVars({ var1, var2, var3 }).from('my-utility');

Import into another file/module like this:

const { var1, var3: newNameForVar3 } = importVarsFrom('my-utility');

Discussion:

This strategy:

• allows modular code in a browser extension such that you can split code into multiple files but don't have variable clashes due to shared global scope between different files,
• still allows you to export and import variables out of and into different JavaScript files/modules,
• introduces only two global variables, namely the exporting function and the importing function,
• maintains full browser extension functionality in each file (e.g. chrome.runtime, etc.) that is eliminated by, e.g., the approach in another answer (currently the accepted answer) using module script tag embedding,
• uses a concise syntax similar to the true ABC0 and export functions in JavaScript,
• allows name-spacing which could be the file names of the exporting modules in a manner similar to how the true import and export commands work in JavaScript, but doesn't have to be (i.e. the name-space names could be anything you want), and
• allows variable renaming upon import similar to how import { fn as myFn }... works.

To do this, your manifest.json needs to load your JavaScript as follows:

• the file establishing the exporting/importing functions first (named modules-start.js in the example below),
• the exporting files next, and
• the importing files last.

Of course, you might have a file that both imports and exports. In that case, just ensure it is listed after the files it imports from but before the files it exports to.

Working Example

The following code demonstrates this strategy.

It is important to note that all of the code in each module/file is contained within curly braces. The only exception is the first line in modules-start.js which establishes the exporting and importing functions as global variables.

The code in the snippet below is necessarily contained in a single "place". In a real project, however, the code could be split into separate files. Note, though, that even in this artificial context here (i.e. within the single code snippet below), this strategy allows the different sections of code it contains to be modular and yet still interconnected.

// modules-start.js:
let exportVars, importVarsFrom; // the only line NOT within curly braces
{
const modules = {};
exportVars = varsObj => ({
from(nameSpace) {
modules[nameSpace] || (modules[nameSpace] = {});
for (let [k,v] of Object.entries(varsObj)) {
modules[nameSpace][k] = v;
}
}
});
importVarsFrom = nameSpace => modules[nameSpace];
}




// *** All of the following is just demo code
// *** showing how to use this export/import functionality:


// my-general-utilities.js (an example file that exports):
{
const wontPolluteTheGlobalScope = 'f';
const myString = wontPolluteTheGlobalScope + 'oo';
const myFunction = (a, b) => a + b;
  

// the export statement:
exportVars({ myString, myFunction }).from('my-general-utilities');
}


// content.js (an example file that imports):
{
// the import statement:
const { myString, myFunction: sum } = importVarsFrom('my-general-utilities');


console.log(`The imported string is "${myString}".`);
console.log(`The renamed imported function shows that 2 + 3 = ${sum(2,3)}.`);
}

With this example, your manifest.json should list the files in the following order:

{ ...
"content_scripts": [
{
"js": [
"modules-start.js",
"my-general-utilities.js",
"content.js"
]
}
], ...
}

As it's already mentioned, for background script, it's good idea to use background.page and use <script type="module"> to kick your JavaScript.

The problem is content script, and injecting <script> tag with type attribute can be a solution.

Another approach than injecting script tag is to use dynamic import function. By this approach, you don't need to loose scope of chrome module and still can use chrome.runtime or other modules.

• Dynamic import()

In content_script.js, it looks like

(async () => {
const src = chrome.runtime.getURL("your/content_main.js");
const contentMain = await import(src);
contentMain.main();
})();

You'll also need to declare the imported scripts in manifest's Web Accessible Resources:

// ManifestV3

  "web_accessible_resources": [{
"matches": ["<all_urls>"],
"resources": ["your/content_main.js"]
}],

// ManifestV2

  "web_accessible_resources": [
"your/content_main.js"
]

For more details:

• How to use ES6 “import” with Chrome Extension
• Working Example of ES6 import in Chrome Extension
• chrome.runtime.getURL

Hope it helps.

The best way would be to use bundlers like webpack or Rollup.

I got away with basic configuration

const path = require('path');


module.exports = {
entry: {
background: './background.js',
content: './content.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../build')
}
};

Run the file with the command

webpack --config ./ext/webpack-ext.config.js

Bundlers combine the related files and we can use modularisation in chrome extensions! :D

You will need to keep all other files like manifest and static files in build folder.

Play around with it and you will eventually find a way to make it work!

imports are not available in content scripts.

Here's a workaround using global scope.

Since content scripts live in their own 'isolated world' - they share the same global namespace. It is only accessible to content scripts declared in manifest.json.

Here's the implementation:

manifest.json

"content_scripts": [
{
"matches": ["<all_urls>"],
"js": [
"content-scripts/globals.js",
"content-scripts/script1.js",
"content-scripts/script2.js"
]
}
],

globals.js

globalThis.foo = 123;

script1.js

some_fn_that_needs_foo(globalThis.foo);

Same way you can factor out re-usable functions and other actors you would otherwise import in content script files.

N.B.: global namespace of content scripts is not available to any pages besides content scripts - so there is little to no global scope pollution.

In case you need to import some libs - you will have to use a bundler like Parcel to package up your content script files along with the needed libs into one huge-content-script.js and then metion it in manifest.json.

P.S.: docs on globalThis

Using Rollup bundler

full tutorial: https://www.extend-chrome.dev/rollup-plugin#usage

TL;DR

npm i -D rollup\
rollup-plugin-chrome-extension@latest\
@rollup/plugin-node-resolve\
@rollup/plugin-commonjs

rollup.config.js:

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'


import { chromeExtension, simpleReloader } from 'rollup-plugin-chrome-extension'


export default {
input: 'src/manifest.json',
output: {
dir: 'dist',
format: 'esm',
},
plugins: [
// always put chromeExtension() before other plugins
chromeExtension(),
simpleReloader(),
// the plugins below are optional
resolve(),
commonjs(),
],
}

package.json:

{
"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
}
}

Add simply in manifest.json in V2

Note! After changing in manifest.json, make sure to reload the extension and browser tab

{ ...
"content_scripts": [
{
"js": [
"modules-start.js",
"my-general-utilities.js",
"content.js"
]
}
], ...
}

For Vite Users

There is an awesome plugin called crxjs , you just need to update it in vite.config.ts and give path to your manifest.json(it works with only mv3)

Follow the below steps to get your script running

1.Add crxjs to your project

npm install @crxjs/vite-plugin -D

2.Create or update manifest.json

{
"manifest_version": 3,
"name": "CRXJS React Vite Example",
"version": "1.0.0",
"action": { "default_popup": "index.html" }
}

3.Update your vite.config.ts file with path to manifest

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'


export default defineConfig({
plugins: [
react(),
crx({ manifest }),
],
})

After this run your project , now config.js will be bundled and you can import packages in it