【亲测免费】 Chrome Extension Webpack Boilerplate 使用教程

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

chrome-extension-webpack-boilerplate/
├── src/
│   ├── background/
│   ├── content/
│   ├── options/
│   ├── popup/
│   └── manifest.json
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── webpack.config.js
└── yarn.lock

• src/: 源代码目录，包含所有扩展的主要功能代码。
  • background/: 后台脚本文件。
  • content/: 内容脚本文件。
  • options/: 选项页面文件。
  • popup/: 弹出页面文件。
  • manifest.json: Chrome 扩展的清单文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• webpack.config.js: Webpack 配置文件。
• yarn.lock: Yarn 锁定文件。

2、项目的启动文件介绍

项目的启动文件主要是 src/manifest.json，它是 Chrome 扩展的清单文件，定义了扩展的基本信息和资源路径。

{
  "manifest_version": 2,
  "name": "Chrome Extension Webpack Boilerplate",
  "version": "1.0",
  "description": "A basic foundation boilerplate for rich Chrome Extensions using Webpack.",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon-16.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  "options_ui": {
    "page": "options.html",
    "chrome_style": true
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

3、项目的配置文件介绍

项目的配置文件主要是 webpack.config.js，它定义了 Webpack 的构建配置。

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

module.exports = {
  entry: {
    background: './src/background',
    content: './src/content',
    options: './src/options',
    popup: './src/popup'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: 'src/manifest.json', to: 'manifest.json' },
      { from: 'src/images', to: 'images' }
    ]),
    new HtmlWebpackPlugin({
      filename: 'options.html',
      template: 'src/options/options.html',
      chunks: ['options']
    }),
    new HtmlWebpackPlugin({
      filename: 'popup.html',
      template: 'src/popup/popup.html',
      chunks: ['popup']
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

• entry: 定义了各个入口文件。
• output: 定义了输出路径和文件名。
• plugins: 定义了使用的插件，包括 CopyWebpackPlugin 和 HtmlWebpackPlugin。
• module: 定义了模块的加载规则，包括 babel-loader 和 `css