基于CRA构建Chrome扩展 新增可访问资源页JS未执行问题

Create React App 默认采用单入口构建逻辑，仅会自动识别src/index.js、src/options.js这类已配置的入口，将打包后的JS/CSS资源自动注入到对应的HTML页面中。你直接放入public目录的my_new_page.html没有被纳入构建入口配置，页面本身没有引用React运行时和业务代码的打包产物，自然只能显示静态模板内容，JS逻辑完全不会执行。

• 首先在src目录下新建新页面对应的JS入口文件，比如命名为myNewPage.js，内容和现有入口逻辑对齐，完成React根节点挂载：

// src/myNewPage.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// 替换成你自己的页面对应根组件
import MyNewPageComponent from './MyNewPageComponent';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MyNewPageComponent />
  </React.StrictMode>
);

• 配置CRA多入口构建，二选一即可：
  • 无eject方案（推荐）：借助react-app-rewired和customize-cra修改构建配置，不需要弹出CRA原生配置。
    1. 安装依赖：执行npm install react-app-rewired customize-cra html-webpack-plugin --save-dev
    2. 项目根目录新建config-overrides.js，写入以下配置：

    const { override, addWebpackEntryPoints } = require('customize-cra');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const path = require('path');
    
    module.exports = override(
      // 注册新的JS构建入口
      addWebpackEntryPoints({
        myNewPage: path.resolve(__dirname, 'src/myNewPage.js')
      }),
      // 注册新的HTML页面，自动注入对应入口的打包资源
      (config) => {
        config.plugins.push(
          new HtmlWebpackPlugin({
            inject: true,
            chunks: ['myNewPage'],
            template: path.resolve(__dirname, 'public/my_new_page.html'),
            filename: 'my_new_page.html'
          })
        );
        return config;
      }
    );
    

    3. 修改package.json里的脚本命令，把所有react-scripts替换为react-app-rewired，比如"start": "react-app-rewired start"、"build": "react-app-rewired build"。
  • 已eject方案：如果你之前已经执行过npm run eject弹出原生配置，直接修改config/webpack.config.js：在entry配置项中新增myNewPage: path.resolve(__dirname, '../src/myNewPage.js')，再在plugins数组中新增和上面逻辑一致的HtmlWebpackPlugin配置即可。
• 检查public/my_new_page.html模板内容，确保存在React挂载用的DOM节点，比如<div id="root"></div>，ID要和入口JS里的挂载节点ID完全一致。
• 调整manifest.json的web_accessible_resources配置，把页面依赖的静态资源路径加入白名单，避免权限拦截：

"web_accessible_resources": [
  {
    "resources": ["my_new_page.html", "static/js/*.js", "static/css/*.css"],
    "matches": ["<all_urls>"]
  }
]

• 重新执行构建命令npm run build，检查build目录下生成的my_new_page.html，确认文件底部已经自动注入了带hash的JS/CSS引用，之后重新加载Chrome扩展，访问对应地址即可正常渲染React内容。

• 不要手动在public目录下的HTML模板里写死JS/CSS引用路径，CRA打包后的文件名会自动添加content hash用于缓存更新，写死的路径会在每次构建后失效，必须让构建工具自动注入资源引用。
• 如果新页面需要调用Chrome扩展API，记得在manifest.json的相关权限字段中补充对应配置，和popup、options页的权限配置逻辑一致。

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