1
2 Comments

Do you use NPM modules in your extension? How?

Do you just use a background.js file and a contentscripts file to build your extension? if not then how do you do it?

  1. 2

    yup I import a few packages including React.js .

    What you want is a "bundler", it's a tool that frontend devs use to get their code ready to ship in a browser. The bundler compiles and bundles all your scripts into a single generated "dist" JS file. Then you put that dist JS into your extension bundle, and that file is your extension's content script or background script.

    ESBuild is a good choice for this (there's other choices like Webpack, Parcel, etc). Here's my ESBuild script:

    require('esbuild').build({
        entryPoints: [
            'src/extension/contentMain.ts',
            'src/extension/backgroundMain.ts',
            'src/extension/popupMain.tsx',
        ],
        sourcemap: 'external',
        bundle: true,
        platform: 'browser',
        outdir: 'chrome-extension/dist',
    
    })
    .catch(err => {
        console.log(err.stack || err);
    });
    
Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 28 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 15 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments