Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to require npm modules in a chrome extension ?

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?

like image 276
void42 Avatar asked Apr 28 '17 16:04

void42


People also ask

Can I use npm module in browser?

If you simply want to test out some NPM modules right inside your browser without setting up an entire app, you can use Browserify in three simple steps to use NPM modules.

Can I use node js in chrome extension?

Despite some of the similarities a Google Chrome Extension and Nodejs have nothing to with each other. You cannot use them together in some special way outside of the normal client/server communication.

Can you use npm without Webpack?

You don't need webpack nor babel to make an mpm module. Just put in any folder the files you want to distribute, specifying the main entry point and export elements on that file.

Can chrome extensions collect data?

Starting next year, Chrome extensions will show what data they collect from users. Google will add a "Privacy practices" section on each Chrome extension's Web Store page listing what data they collect from users and what the developer plans to do with it.


1 Answers

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.

like image 83
Eejdoowad Avatar answered Sep 17 '22 17:09

Eejdoowad