webpack.config.js

const path = require('path');
const glob = require('glob');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require('webpack');
const resolve = require('path').resolve;

const CHROME_KEY =
    'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAmf6qYyrFypvvB0klM/hHhIdGO0bAnUT6ZK4fLqGl8/l5OWze2leeQkC/Nf0HOTQ50d2sdgXFuQDfHsMF+HQ5pUVIUT/25MzEXZWGwqi+JAxEX9Q/yGFFN53nI4m7mGNzCQ0TDUS3IrJsFfQBMEdv/fAwnhEitF/Ko9qn8/KYDzZqIjujwXKKeqlx+UXIvkgblI44RT9evwiqp+/WjZZ/YQzLa9tFhdz0Ct3Qvhn/03YrLAXa+yxXKpLAjQJ9DpYJoa++bJwluffinxKQUX0tm5dzFRSRKFCG92hKHnQHcQFUnBlDKF4LS0KQhgelyiTxN4GmKX7I1xQS/B1TByLL2wIDAQAB';

function getPathEntries(path) {
    return glob.sync(path).reduce((acc, e) => {
        if (!e.includes('node_modules')) {
            // Remove extension
            acc[e.replace(/\.[^/.]+$/, '')] = './' + e;
        }

        return acc;
    }, {});
}

function convertToFirefoxManifest(manifest) {
    const cp = Object.assign({}, manifest);
    cp.action = {
		default_popup: "src/popup.html"
    }
    cp.background = {
        page: 'src/background_ff.html',
    };
    cp.browser_specific_settings = {
        gecko: {
            id: '{194d0dc6-7ada-41c6-88b8-95d7636fe43c}',
            strict_min_version: '127.0',
        },
    };
    // Allow getting the extension version from CSFloat page in Firefox
    cp.content_scripts.push({
        matches: ['*://*.csfloat.com/*'],
        js: ['src/lib/page_scripts/csfloat.js'],
    });
    cp.host_permissions.push('*://*.csfloat.com/*');
    // Force optional host permissions to be required
    cp.host_permissions = cp.host_permissions.concat(cp.optional_host_permissions);
    // Not supported in Firefox
    cp.permissions = cp.permissions.filter(e => e !== 'offscreen');

    return cp;
}

module.exports = (env) => {
    const mode = env.mode || 'development';

    return {
        mode: 'none',
        entry: Object.assign(
            getPathEntries('./src/lib/page_scripts/*.ts'),
            getPathEntries('./src/lib/types/*.d.ts'),
            getPathEntries('./src/background.ts'),
            getPathEntries('./src/popup/popup.ts'),
            getPathEntries('./src/offscreen/offscreen.ts'),
            getPathEntries('./src/**/*.js')
        ),
        output: {
            path: path.join(__dirname, 'dist'),
            filename: '[name].js',
        },
        resolve: {
            extensions: ['.ts', '.js', '.html'],
        },
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    loader: 'ts-loader',
                    exclude: /node_modules|\.d\.ts$/,
                },
                {
                    test: /\.d\.ts$/,
                    loader: 'ignore-loader',
                },
                {
                    test: new RegExp(`.(css)$`),
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                    },
                    exclude: /node_modules/,
                },
                {
                    test: /environment\.ts$/,
                    loader: 'file-replace-loader',
                    options: {
                        // Activate replacement if mode is development OR staging
                        condition: mode === 'development' || mode === 'staging',
                        // Dynamically route to the correct file
                        replacement:
                            mode === 'staging'
                                ? resolve('./src/environment.staging.ts')
                                : resolve('./src/environment.dev.ts'),
                    },
                },
                {
                    test: /tlsn_wasm_bg\.wasm$/,
                    type: 'asset/resource',
                    generator: {
                        filename: 'tlsn_wasm_bg.wasm',
                    },
                },
            ],
        },
        plugins: [
            new MiniCssExtractPlugin(),
            new webpack.SourceMapDevToolPlugin({}),
            new CopyPlugin({
                patterns: [
                    {from: 'icons', to: 'icons', context: '.'},
                    {from: 'data', to: 'data', context: '.', globOptions: {ignore: ['bluegem.json']}},
                    {from: 'src/global.css', to: 'src/', context: '.'},
                    {from: 'src/background_ff.html', to: 'src/', context: '.'},
                    {from: 'src/steamcommunity_ruleset.json', to: 'src/', context: '.'},
                    {from: 'src', to: 'raw/', context: '.'},
                    {from: 'README.md', to: '', context: '.'},
                    {from: 'src/popup/popup.html', to: 'src/', context: '.'},
                    {from: 'src/offscreen/offscreen.html', to: 'src/', context: '.'},
                    {from: 'node_modules/@csfloat/tlsn-wasm/*.js', to: '[name][ext]'},
                    {from: 'node_modules/@csfloat/tlsn-wasm/snippets', to: 'snippets/', context: '.'},
                    {
                        from: 'manifest.json',
                        to: 'manifest.json',
                        transform(raw) {
                            let processed = JSON.parse(raw.toString());

                            if (mode === 'development' && env.browser === 'chrome') {
                                processed.key = CHROME_KEY;
                            }

                            if (mode === 'development') {
                                // Add permissions only used for connecting to localhost dev env
                                processed.host_permissions.push('http://localhost:8080/*');
                                processed.host_permissions.push('http://localhost:4200/*');

                                // If you're running phoenix locally
                                processed.content_scripts.push({
                                    matches: ['*://*.localhost/*'],
                                    js: ['src/lib/page_scripts/csfloat.js'],
                                });

                                const versionResource = processed.web_accessible_resources.find((e) =>
                                    e.resources[0].includes('version.txt')
                                );
                                versionResource.matches.push('http://localhost:4200/*');
                                processed.externally_connectable.matches.push('http://localhost/*');
                                processed.externally_connectable.matches.push('http://localhost:4200/*');
                            }

                            if (mode === 'staging') {
                                // https://developer.chrome.com/docs/extensions/develop/migrate/publish-mv3#publish-beta
                                // Grab the run number from the GitHub Action environment, default to 0 for local builds
                                const runNumber = process.env.GITHUB_RUN_NUMBER || '0';

                                // Append the run number to the strict version (e.g., 5.14.0.42)
                                processed.version = `${processed.version}.${runNumber}`;

                                // Update names
                                processed.name += ' - STAGING';
                                processed.short_name += ' (Staging)';
                                processed.version_name = `${processed.version} (Staging)`;

                                if (!processed.externally_connectable.matches.includes('*://*.csfloat.build/*')) {
                                    processed.externally_connectable.matches.push('*://*.csfloat.build/*');
                                }

                                const versionResource = processed.web_accessible_resources.find((e) =>
                                    e.resources[0].includes('version.txt')
                                );
                                if (versionResource && !versionResource.matches.includes('https://csfloat.build/*')) {
                                    versionResource.matches.push('https://csfloat.build/*');
                                }
                            }

                            if (env.browser === 'firefox') {
                                processed = convertToFirefoxManifest(processed);
                            }

                            return JSON.stringify(processed, null, 2);
                        },
                    },
                    {
                        from: 'manifest.json',
                        to: 'src/version.txt',
                        transform(raw) {
                            let processed = JSON.parse(raw.toString());

                            // Apply the exact same version bump for staging
                            if (mode === 'staging') {
                                const runNumber = process.env.GITHUB_RUN_NUMBER || '0';
                                return `${processed.version}.${runNumber}`;
                            }

                            return processed.version;
                        },
                    },
                ],
            }),
            // Add Gzip compression for bluegem.json
            new CompressionPlugin({
                filename: '[path][base].gz', // Change extension to .gz
                algorithm: 'gzip',
                test: /bluegem\.json$/,
                deleteOriginalAssets: true,
            }),
            new webpack.ProvidePlugin({
                Buffer: ['buffer', 'Buffer'],
            }),
        ],
        stats: {
            errorDetails: true,
        },
        optimization: {
            usedExports: true,
        },
        // Required by wasm-bindgen-rayon, in order to use SharedArrayBuffer on the Web
        // Ref:
        //  - https://github.com/GoogleChromeLabs/wasm-bindgen-rayon#setting-up
        //  - https://web.dev/articles/coop-coep
        devServer: {
            headers: {
                'Cross-Origin-Embedder-Policy': 'require-corp',
                'Cross-Origin-Opener-Policy': 'same-origin',
            },
        },
    };
};