用 vue-cli 开发 Chrome Extension 模板

在本文中，我们将介绍如何使用 vue-cli 创建一个 Chrome 扩展程序模板，并支持同步刷新和打包成 .crx。我们假设您已经熟悉 Vue.js，Chrome Extension 和打包的基础知识。

准备工作

首先，确保您安装了最新版本的 Node.js 和 Vue CLI。

- -- -------
- ---- ------- ----

- -- --- ---
- --- ------- -- --------

接下来，创建一个新的 Vue 项目并添加必要的扩展程序文件。

- ---- --- --
- --- ------ ------------

- ------
- -- ------------

- --------
- ----- ------ -- ----- --------------------

在 public/manifest.json 文件中，定义你的扩展程序信息，例如名称、描述、版本号、权限等。以下是一个简单的示例：

-
  ------- --- -----------
  ---------- ------
  -------------- ----- ------ ------
  ------------------- --
  -------------- -
    ------
  -
-

现在，让我们安装必要的依赖项。

- --- ------- ---------- --- ------------------------ -------------------

• crx：用于将扩展程序打包成 .crx 格式。
• hotreload-webpack-plugin：用于启用热重载和自动刷新。
• copy-webpack-plugin：用于将静态文件复制到打包后的目录中。

配置 webpack

Vue CLI 使用 webpack 进行构建，我们需要相应地配置 webpack。在根目录下创建一个名为 vue.config.js 的文件，并添加以下内容：

----- --- - ---------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ---------------------- - ------------------------------------

-------------- - -
  ----------------- -------- -- -
    -- --------------------- --- -------------- -
      --------------------
        --- ------------------------
          -- ----------
        --
      --
    - ---- -
      --------------------
        --- -------------------
          --------- -- ----- --------- --- --- ---
          -------- - ------------ --- --
        ---
        --- -----
          -------- ----------------------- --------------------
          ------------ ----------------------- --------
          ----------- ----------------------- --------------------
          ----- --- -----------
        --
      --
    -
  --
--

上述代码中，我们:

1. 导入必要的依赖项 crx、path、CopyWebpackPlugin 和 HotReloadWebpackPlugin。
2. 在 configureWebpack 方法中，判断当前环境是否是开发模式，如果是，则添加 HotReloadWebpackPlugin 插件；否则，添加 CopyWebpackPlugin 和 Crx 插件。其中，Crx 插件用于将扩展程序打包成 .crx 格式。
3. Crx 插件的选项中，keyFile 用于指定私钥文件位置，contentPath 用于指定需要打包的文件目录，outputPath 用于指定输出文件位置，name 用于指定扩展程序名称。

配置热重载

在开发过程中，我们希望能够自动刷新扩展程序。为此，我们使用 hotreload-webpack-plugin 插件，并在 vue.config.js 文件中添加以下代码：

-------------- - -
  -- ---
  ---------- -
    ------- ----- ------- -- -
      ----- ---- - --------------------
      ------------------------
        -- ----------
      --------------------------
      ------------- ---- ----- -- -
        ----------------------------------------- -----
        -------

- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------