My ambition is to include a folder, located in node_modules/. Using Node.js I can do:

var example = require('example');

My ambition is to include a folder, located in node_modules/. Using Node.js I can do:

var example = require('example');

But in my Google Chrome extension it doesn't work, it throws the error:

Require is not defined.

• javascript
• require

• 6 commonJS is not supported in the browser, only in node, please use ES modules instead. (use import not require) – Rainb Commented Oct 20, 2022 at 7:33
• @Rainb I tried but it seems complicated: stackoverflow.com/questions/48104433/… – user3064538 Commented Apr 14, 2023 at 16:50
• @BorisVerkhovskiy use skypack – Rainb Commented Apr 15, 2023 at 9:43
• @BorisVerkhovskiy you'll have to use asynchronous import function and not the import at the top. – Rainb Commented Apr 15, 2023 at 9:44

5 Answers 5

Chrome extensions support ES6 modules in content scripts. You can use the import statement to include modules:

import example from './path-to-node-modules/example';

Depends if you want to use it in the background page or in the content script, but I assume you are talking about the background page.

In the manifest file :

"background": {
    "scripts": [ "scripts/require.js","scripts/main.js"]
}

In main.js:

require.config({
    baseUrl: "scripts"
});

require( [ /*...*/ ], function(  /*...*/ ) {
    /*...*/

});

then in background.html:

<script data-main="scripts/main.js" src="scripts/require.js>

Quick & Simple Bundling With esbuild

If your project requirements permit, consider using a bundler like esbuild to help avoid compatibility issues by transpiling the syntax into browser-compatible code. The setup is quick and unlike other bundlers such as webpack, setup of a config file is not required.

Step-by-Step

esbuild is a fast and modern bundler with quick set-up. Other bundlers like parcel could work too (see detailed guide).

1. Installing the Bundler

   Run the following command to install esbuild as a dependency (see documentation):

   npm install --save-exact esbuild
   

2. Bundling the Scripts

   Once installed, you can execute the following command in your root directory (i.e., where package.json is located) to bundle your client-side code:

   esbuild src/content.js --bundle --outfile=dist/bundle.js
   

   Using esbuild to bundle content.js will handle all imported modules, including my-script.js, and include them in the output bundle.js.

   Please note that src should be replaced with the correct file path for content.js, which I assume is a single entry point. Depending on your project requirements, esbuild supports set up of multiple entry points too (see documentation).

Explanation

Checking Syntax

Using a bundler like esbuild will transpile the files as browser-compatible ES syntax by default, meaning it can handle scenarios where there are files with a mix of ES and CommonJS syntax or files with only CommonJS syntax (see documentation).

Browser Compatibility

Browsers can return errors if ES syntax is not a supported version or is not used consistently for imports and exports in scripts. To handle version incompatibility, we can target a specific version of the ES syntax by using the --target flag in esbuild (see documentation).

The error message "Require is not defined" typically indicates that you are trying to use the CommonJS require function in a context where it is not available. In Chrome extensions, the require function is not supported in content scripts or background scripts by default.

Use ES6 Modules: Modern Chrome extensions primarily use ES6 modules. Instead of require, use import and export statements to manage your module dependencies.

import someModule from './module.js';

I didn't find the way to directly run node modules in snippet of Chrome. However, you can run node debug instead.

1. npm install -g node-inspector(to install the node debug module)
2. node-debug app.js (to run the node debug)

Then, the chrome will open a debug window, which you can query yourself by using the url of http://localhost:8080/debug?port=5858; And this debug is based on the v8 debug of Chrome itself.