Omitting standalone JS files from index.html w/CRACO

[billdami]

I'm writing a Chrome extension with CRA and using CRACO to create separate .js files in the build for content scripts, service worker/background scripts, etc. I am able to output the files separately using the craco.config.js below, but they still get injected into the index.html as separate <script> tags. Is there any way to disable this?

module.exports = {
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            return {
                ...webpackConfig,
                entry: {
                    main: [
                        env === 'development' && require.resolve('react-dev-utils/webpackHotDevClient'),
                        paths.appIndexJs,
                    ].filter(Boolean),
                    content: './src/chromeServices/domBootstrap.ts',
                    background: './src/chromeServices/serviceWorker.ts',
                },
                output: {
                    ...webpackConfig.output,
                    filename: 'static/js/[name].js',
                },
                optimization: {
                    ...webpackConfig.optimization,
                    runtimeChunk: false,
                },
            };
        },
    },
};

Thanks!

[billdami]

If anyone comes across this, i figured it out. I had to overrided CRA's default HtmlWebpackPlugin config, adding the excludeChunks option:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            const isEnvDevelopment = env === 'development';
            const isEnvProduction = env === 'production';

            return {
                ...webpackConfig,
                plugins: [
                    new HtmlWebpackPlugin(
                        Object.assign(
                            {},
                            {
                                inject: true,
                                template: paths.appHtml,
                                excludeChunks: ['content', 'background'],
                            },
                            isEnvProduction
                                ? {
                                      minify: {
                                          removeComments: true,
                                          collapseWhitespace: false,
                                          removeRedundantAttributes: true,
                                          useShortDoctype: true,
                                          removeEmptyAttributes: true,
                                          removeStyleLinkTypeAttributes: true,
                                          keepClosingSlash: true,
                                          minifyJS: true,
                                          minifyCSS: true,
                                          minifyURLs: true,
                                      },
                                  }
                                : undefined
                        )
                    ),
                    ...webpackConfig.plugins.slice(1),
                ],
                entry: {
                    main: [
                        isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
                        paths.appIndexJs,
                    ].filter(Boolean),
                    content: './src/chromeServices/domBootstrap.ts',
                    background: './src/chromeServices/serviceWorker.ts',
                },
                output: {
                    ...webpackConfig.output,
                    filename: 'static/js/[name].js',
                },
                optimization: {
                    ...webpackConfig.optimization,
                    runtimeChunk: false,
                },
            };
        },
    },
};

[brnt]

THANK YOU! This was exactly what I needed. 🎉

Just adding some search engine indexing context. Here are some of the symptoms of the issue I was seeing (and, therefore, likely search terms). Also including the filenames, since it appears that I followed the same examples and I suspect others searching for the solution may follow them, too, and use the same filenames.

• Multiple requests for single Javascript fetch() call
• Background worker background.ts logging shows up in console for service worker content.ts
• Background worker background.ts duplicates requests to server
• API getting called multiple times for a single message in Chrome extension
• Server logs show multiple requests for single fetch() call from extension
• Extension repeats server requests more times on subsequent page loads
• Omit chrome extension background and content scripts from web app

What was happening is that, as noted by @billdami, Craco was embedding content.js and background.js into index.html after compiling them from content.ts and background.ts.

This was a particularly tricky issue to debug, made worse by the fact that Brave Browser (un)helpfully collapses the duplicate console logging and network requests into single entries in the developer console. Chrome faithfully lists them all and finally gave me clues for tracing the issue through the execution stack.