从初学者到熟手：使用 Vue 或 React 快速打造 Chrome 插件
2023-09-02 12:31:28
前言
在当今数字世界中，Chrome 插件已成为人们扩展浏览器功能、提高工作效率和个性化在线体验的必备工具。如果您是一位前端开发人员，或者对开发 Chrome 插件感兴趣，那么本指南将为您提供一个清晰易懂的步骤，帮助您使用 Vue 或 React 快速构建自己的 Chrome 插件。我们将使用 bigroom-cli 工具，它可以简化扩展程序的启动、打包和编译过程。您还将了解如何设置代码保存后的自动更新和页面自动刷新功能。
准备工作
在开始开发 Chrome 插件之前，您需要确保已经安装了以下软件：
- Node.js
- npm
- Vue CLI 或 Create React App
- bigroom-cli
您可以通过以下命令安装 bigroom-cli：
npm install -g bigroom-cli
创建 Chrome 插件项目
使用 bigroom-cli 创建一个新的 Chrome 插件项目：
bigroom-cli create chrome-extension
这将在当前目录中创建一个名为 chrome-extension 的新文件夹。
安装依赖项
进入 chrome-extension 文件夹并安装必要的依赖项：
cd chrome-extension
npm install
创建 Vue 或 React 应用程序
接下来，您需要在 chrome-extension 文件夹中创建一个 Vue 或 React 应用程序。
Vue
vue create src
React
create-react-app src
配置 bigroom-cli
在 chrome-extension 文件夹中，编辑 bigroom.config.js 文件。
module.exports = {
entry: './src/main.js',
output: './dist/chrome-extension.js',
publicPath: './dist/',
devServer: {
port: 9000,
open: true,
},
chromeExtension: {
manifest: './manifest.json',
},
};
编写扩展程序代码
在 src 文件夹中，您将找到 main.js 文件（对于 Vue）或 index.js 文件（对于 React）。这是您编写扩展程序代码的地方。
Vue
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
React
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'));
构建 Chrome 插件
要构建 Chrome 插件，请运行以下命令：
bigroom-cli build
这将在 dist 文件夹中生成一个名为 chrome-extension.js 的文件。
加载 Chrome 插件
要加载 Chrome 插件，请打开 Chrome 浏览器并转到扩展程序页面。单击“加载已解压的扩展程序”按钮，然后选择 chrome-extension 文件夹。
调试 Chrome 插件
要调试 Chrome 插件，请在 chrome-extension 文件夹中运行以下命令：
bigroom-cli dev
这将在 9000 端口启动一个开发服务器。您可以在 Chrome 浏览器的扩展程序页面中加载扩展程序，然后打开开发工具来调试代码。
结语
恭喜您！现在您已经学会了如何使用 Vue 或 React 快速开发 Chrome 插件。通过使用 bigroom-cli 工具，您可以轻松地启动、打包和编译扩展程序。您还了解了如何设置代码保存后的自动更新和页面自动刷新功能。希望本指南对您有所帮助。如果您有任何问题，请随时留言。
