React Chrome扩展构建配置修改：保留独立脚本适配Chrome核心模块

Absolutely! You can split your React-based Chrome extension code into independent bundles for content_script, background, and popup—it just takes adjusting your build configuration. Let’s cover the most common setups:

For Create React App (CRA) #

CRA hides its Webpack config by default, so we’ll use react-app-rewired to tweak it without ejecting:

1. Install required dev dependencies:

   npm install react-app-rewired customize-cra --save-dev
   

2. Update your package.json scripts to use react-app-rewired instead of react-scripts:

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   }
   

3. Create a config-overrides.js file in your project root to define multiple entry points and adjust output filenames:

   const { override, addWebpackEntry, addWebpackOutput } = require('customize-cra');
   
   module.exports = override(
     // Define separate entries for each extension module
     addWebpackEntry({
       popup: './src/popup/index.js',
       background: './src/background/index.js',
       contentScript: './src/contentScript/index.js'
     }),
     // Ensure output files match our entry names instead of the default "main.js"
     addWebpackOutput({
       filename: '[name].js',
       chunkFilename: '[name].chunk.js'
     })
   );
   

4. Structure your source files to match the entries:

   • src/popup/index.js: Renders your React popup component (e.g., ReactDOM.createRoot(document.getElementById('root')).render(<Popup />)).
   • src/background/index.js: Your extension’s background logic (note: for Manifest V3, this is a service worker—avoid DOM APIs here).
   • src/contentScript/index.js: Code that runs in the context of web pages (mount React components to the page’s DOM if needed).

For Vite #

Vite’s config is more straightforward. Modify your vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        // Popup uses an HTML entry (create a corresponding src/popup/index.html)
        popup: './src/popup/index.html',
        background: './src/background/index.js',
        contentScript: './src/contentScript/index.js'
      },
      output: {
        entryFileNames: '[name].js',
        chunkFileNames: '[name].chunk.js',
        assetFileNames: '[name].[ext]'
      }
    }
  }
});

Manual Webpack Configuration #

If you’re using a custom Webpack setup, directly adjust your webpack.config.js:

const path = require('path');

module.exports = {
  entry: {
    popup: './src/popup/index.js',
    background: './src/background/index.js',
    contentScript: './src/contentScript/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  // Add your existing loaders (Babel for React) and plugins here
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
};

Final Step: Update Your Manifest #

Make sure your manifest.json (v2 or v3) references the correct bundled files:

{
  "manifest_version": 3,
  "name": "My React Extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
  ]
}

Key Notes #

• Background Service Worker (Manifest V3): Avoid using React here unless absolutely necessary—service workers can’t access the DOM, so most background logic is plain JS.
• Content Script Isolation: When mounting React components in content scripts, attach them to a DOM element you create (e.g., document.body.appendChild(document.createElement('div'))) to avoid conflicts with the host page.
• Tree Shaking: Ensure each entry only imports the dependencies it needs to keep bundle sizes small.

Once you run npm run build, your dist folder will have separate bundles for each extension module, keeping them independent as Chrome requires!

内容的提问来源于stack exchange，提问作者Soup