26

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.

Remi Guan
  • 21,506
  • 17
  • 64
  • 87
javascript.beginner.
  • 257
  • 1
  • 3
  • 9
  • 6
    commonJS is not supported in the browser, only in node, please use ES modules instead. (use import not require) – Rainb Oct 20 '22 at 07:33
  • @Rainb I tried but it seems complicated: https://stackoverflow.com/questions/48104433/how-to-import-es6-modules-in-content-script-for-chrome-extension/48121629#48121629 – Boris Verkhovskiy Apr 14 '23 at 16:50
  • @BorisVerkhovskiy use skypack – Rainb Apr 15 '23 at 09:43
  • @BorisVerkhovskiy you'll have to use asynchronous import function and not the import at the top. – Rainb Apr 15 '23 at 09:44

4 Answers4

0

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>
dekajoo
  • 2,024
  • 1
  • 25
  • 36
0

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).

Ebod Shojaei
  • 21
  • 4
0

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';
AADARSH MANE
  • 46
  • 1
-2

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.

athanzhang
  • 122
  • 5