49

I tried so but I have a 'require is not defined' error. I can't find information about that, can someone enlighten the noob in me please?

void42
  • 921
  • 2
  • 10
  • 14

4 Answers4

70

It's possible, but you have to be careful. Trying to require() a package means that node will try to locate its files in your file system. A chrome extension only has access to the files you declare in the manifest, not your filesystem.

To get around this, use a module bundler like Webpack, which will generate a single javascript file containing all code for all packages included through require(). You will have to generate a separate module for each component of your chrome extension (e.g. one for the background page, one for content scripts, one for the popup) and declare each generated module in your manifest.

To avoid trying to setup your build system to make using require() possible, I suggest starting with a boilerplate project. You can check out my extension to see how I do it.

Eejdoowad
  • 1,297
  • 9
  • 10
  • 1
    Just a small aside: you will not need to generate a separate module for your popup and content scripts __if you only use the module inside one of these components__. The only requires I have are in my background script since this is what persists and I ask for the information I need from the background script using the messaging system, which I would encourage people to do also (unless the information you need in your popup/content script cannot be serialised). – GrayedFox Jun 30 '20 at 09:37
  • Your extension saka-key is the template I'm looking for.Thank you.@Eejdoowad – Iceberg Sep 10 '20 at 09:45
29

An updated answer for 2022

Short answer: yes, you can require/import packages. Rather than going through the tedious work of setting up & configuring a bundler like Webpack on your own (especially if you have no experience with them), there are now build tools you can use to create the boilerplate "scaffolding" for a Chrome extension:

Benefits of using them:

  • New projects are initiated with a default project file structure. Super helpful.
  • They support modern Javascript (ES6, ES2021), so modules work fine.
  • They already have bundlers integrated and pre-configured (Webpack in both above cases I think). You therefore don't need to install and configure any on your own.
  • You can use npm as normal to install any packages/dependencies you need.

Then of course, let the official documentation for Chrome Extensions guide you through the rest.

Camron
  • 503
  • 5
  • 19
  • Extension CLI still working good today, I've tried import some major lib such as: uniq, faker, pluralize, and it work perfectly. – Ricky Nguyen Aug 20 '22 at 04:51
  • How do you actually include the library with Chrome Extension Cli? (Like in the manifest file) – Joseph Astrahan Aug 20 '22 at 20:53
  • https://github.com/PlasmoHQ/plasmo is also in the works at the moment as an end-to-end framework for modern Chrome extensions, although I'm not entirely clear about how much of it is paid vs free. – Alexandr Kurilin Dec 07 '22 at 20:40
8

It's not possible to require node modules directly within a chrome extension. However, it is possible to bundle node applications and packages into the browser for use with your extensions. See here for more: Is it possible to develop Google Chrome extensions using node.js?

Community
  • 1
  • 1
Iyanu Adelekan
  • 396
  • 2
  • 7
0

Yes, It is possible with esm npm packages.
require is commonjs module loader.
Browser doesn't support commonjs modules system
so that this error showed.

Method 1:

  1. Run npm init -y and add "type" :"module" in your package.json.

  2. create path.js file

  3. add this line in path.js

    const fullPath = await import.meta.resolve("npm-pkg-name"); const path = fullPath?.match(/(/node_modules.*)/)[0]; console.log(path);

  4. add this line inside package.json

    "path": "node --experimental-import-meta-resolve path.js",

  5. Copy console output text. Replace package name with this copied path.

Method 2: Install other npm package to find and replace
npm packages' virtual path to real path so that chrome browser will find it.
Install Path-fixxer
Add this line in path.js

import setAllPkgPath from "path-fixxer";
setAllPkgPath();

then run command : npm run path.
Now open browser to test it.

Anil kumar
  • 1,216
  • 4
  • 12