React Chrome 扩展项目教程

1. 项目目录结构及介绍

react-chrome-extension/
├── public/
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── components/
│   │   ├── App.js
│   │   └── ...
│   ├── index.js
│   └── ...
├── package.json
├── webpack.config.js
└── README.md

目录结构说明

• public/: 存放公共资源文件，如 index.html 和 manifest.json。

  • index.html: 项目的入口 HTML 文件。
  • manifest.json: Chrome 扩展的配置文件，定义扩展的基本信息和权限。

• src/: 存放源代码文件。

  • components/: 存放 React 组件文件。
    • App.js: 主应用组件。
  • index.js: 项目的入口 JavaScript 文件。

• package.json: 项目的依赖管理文件，定义了项目的依赖包和脚本命令。

• webpack.config.js: Webpack 配置文件，用于打包和构建项目。

• README.md: 项目的说明文档。

2. 项目启动文件介绍

index.js

index.js 是项目的入口文件，负责初始化 React 应用并将其挂载到 DOM 中。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

App.js 是主应用组件，包含了扩展的主要逻辑和 UI 结构。

import React from 'react';

function App() {
  return (
    <div>
      <h1>React Chrome Extension</h1>
      {/* 其他组件和逻辑 */}
    </div>
  );
}

export default App;

3. 项目配置文件介绍

manifest.json

manifest.json 是 Chrome 扩展的配置文件，定义了扩展的基本信息、权限和入口文件。

{
  "manifest_version": 2,
  "name": "React Chrome Extension",
  "version": "1.0",
  "description": "A Chrome extension built with React.",
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

webpack.config.js

webpack.config.js 是 Webpack 的配置文件，用于打包和构建项目。

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: './public/manifest.json', to: './manifest.json' }
      ]
    })
  ]
};

package.json

package.json 是项目的依赖管理文件，定义了项目的依赖包和脚本命令。

{
  "name": "react-chrome-extension",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.2",
    "html-webpack-plugin": "^5.0.0",
    "copy-webpack-plugin": "^9.0.0",
    "babel-loader": "^8.2.2"
  }
}

通过以上配置，你可以轻松地启动和构建 React Chrome 扩展项目。