Chrome 扩展 Webpack 项目教程

Chrome 扩展 Webpack 项目教程

chrome-extension-webpackGet started with Chrome extensions development using webpack, TypeScript, Sass, and more.项目地址:https://gitcode.com/gh_mirrors/ch/chrome-extension-webpack

1. 项目的目录结构及介绍

chrome-extension-webpack/
├── dist/
│   ├── background.js
│   ├── content.js
│   ├── popup.html
│   ├── popup.js
│   └── styles.css
├── src/
│   ├── background/
│   │   └── index.js
│   ├── content/
│   │   └── index.js
│   ├── popup/
│   │   ├── index.html
│   │   └── index.js
│   └── styles/
│       └── main.css
├── webpack.config.js
├── package.json
└── README.md

目录结构介绍

• dist/: 打包后的文件目录，包含最终生成的扩展文件。

  • background.js: 后台脚本文件。
  • content.js: 内容脚本文件。
  • popup.html: 弹出窗口的 HTML 文件。
  • popup.js: 弹出窗口的脚本文件。
  • styles.css: 样式文件。

• src/: 源代码目录，包含开发中的文件。

  • background/: 后台脚本源文件。
  • content/: 内容脚本源文件。
  • popup/: 弹出窗口的源文件。
  • styles/: 样式源文件。

• webpack.config.js: Webpack 配置文件。

• package.json: 项目依赖和脚本配置文件。

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

2. 项目的启动文件介绍

启动文件

• src/background/index.js: 后台脚本入口文件，负责扩展的后台逻辑。
• src/content/index.js: 内容脚本入口文件，负责与网页内容交互。
• src/popup/index.html: 弹出窗口的 HTML 文件，定义弹出窗口的结构。
• src/popup/index.js: 弹出窗口的脚本文件，负责弹出窗口的逻辑。

启动流程

1. 安装依赖: 运行 npm install 安装项目所需依赖。
2. 开发模式: 运行 npm run start 启动开发模式，Webpack 会监听文件变化并自动重新打包。
3. 打包发布: 运行 npm run build 进行生产环境打包，生成 dist/ 目录下的文件。

3. 项目的配置文件介绍

webpack.config.js

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

module.exports = {
  entry: {
    background: './src/background/index.js',
    content: './src/content/index.js',
    popup: './src/popup/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/popup/index.html',
      filename: 'popup.html',
      chunks: ['popup']
    }),
    new CopyPlugin({
      patterns: [
        { from: './src/styles/main.css', to: 'styles.css' }
      ]
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

配置文件介绍

• entry: 定义各个入口文件，包括后台脚本、内容脚本和弹出窗口脚本。
• output: 定义输出目录和文件名。
• plugins: 使用 HtmlWebpackPlugin 生成 popup.html 文件，使用 CopyPlugin 复制样式文件到 dist/ 目录。
• module: 定义模块规则，处理 CSS 文件。

通过以上配置，Webpack 会根据入口文件打包生成最终的扩展文件，并自动处理 HTML 和 CSS 文件。

chrome-extension-webpackGet started with Chrome extensions development using webpack, TypeScript, Sass, and more.项目地址:https://gitcode.com/gh_mirrors/ch/chrome-extension-webpack