Vue CLI Chrome Extension 开发模板

在开发 Chrome 扩展程序时，为了提高开发效率，我们需要一个支持代码同步刷新和 CRX 打包的开发模板。下面，我们将使用 Vue CLI 来创建一个这样的模板。

1. 安装 Vue CLI

首先，确保你已经安装了最新版本的 Node.js 和 npm。然后，通过以下命令安装 Vue CLI：

npm install -g @vue/cli

2. 创建 Vue 项目

接下来，我们使用 Vue CLI 创建一个新的 Vue 项目。执行以下命令，并按照提示进行操作：

vue create chrome-extension

3. 配置 Webpack

为了支持 Chrome 扩展程序的开发，我们需要对 Webpack 进行一些配置。进入项目目录，并找到 vue.config.js 文件（如果不存在，请手动创建该文件）。在该文件中，添加以下配置：

module.exports = {
  devServer: {
    watchOptions: {
      ignored: /node_modules/
    }
  },
  configureWebpack: {
    output: {
      libraryTarget: 'commonjs2'
    }
  }
}

这些配置将确保在开发过程中，Webpack 能够正确监听文件变化并实现代码同步刷新。

4. 创建 Chrome 扩展程序文件

在 src 目录下，创建一个名为 extension 的文件夹。在该文件夹中，你需要创建以下文件：

• manifest.json：扩展程序的配置文件。
• background.js：扩展程序的后台脚本文件。
• content-script.js：注入到页面中的脚本文件。
• popup.html：弹出页面的 HTML 文件。
• popup.js：弹出页面的脚本文件。

这些文件将构成你的 Chrome 扩展程序的基本结构。

5. 编写代码

在 src/extension 文件夹中，编写你的 Chrome 扩展程序的代码。你可以使用 Vue.js 来构建弹出页面和其他界面。在 background.js 和 content-script.js 中编写后台脚本和注入脚本的逻辑。

6. 实现代码同步刷新

为了实现代码同步刷新，你需要安装一个 Chrome 扩展程序，如 BrowserSync。安装后，在 vue.config.js 文件中配置 BrowserSync，以便在保存文件时自动刷新 Chrome 扩展程序。

7. 打包 CRX 文件

完成开发后，你需要将扩展程序打包成 CRX 文件以便在 Chrome 浏览器中安装。在项目根目录下，执行以下命令：

npm run build

这将使用 Vue CLI 的构建命令将项目打包成静态文件。然后，你可以在 src/extension 文件夹中找到生成的 manifest.json 和其他文件，将它们打包成 CRX 文件。你可以使用在线工具或编写脚本来完成这一步骤。

8. 安装和测试 CRX 文件

最后，将生成的 CRX 文件安装到 Chrome 浏览器中，并进行测试。确保扩展程序的功能和界面都符合你的预期。

通过以上步骤，你就可以使用 Vue CLI 创建一个支持同步刷新和 CRX 打包的 Chrome 扩展程序开发模板。这将大大提高你的开发效率，使你能够快速搭建并部署 Chrome 扩展程序。