Google浏览器插件开发入门基础教程
一、准备工作
1. 安装Node.js：首先需要安装Node.js，可以在官网下载并安装。
2. 安装npm：在命令行中输入`npm install -g npm`进行全局安装。
3. 安装Webpack：在命令行中输入`npm install -g webpack`进行全局安装。
4. 创建项目文件夹：在命令行中输入`mkdir my-plugin`，然后进入该文件夹。
5. 创建package.json文件：在命令行中输入`cd my-plugin`，然后输入`npm init`进行初始化。
二、安装依赖
1. 安装Webpack：在命令行中输入`npm install webpack`进行安装。
2. 安装babel-loader：在命令行中输入`npm install --save-dev babel-loader@latest`进行安装。
3. 安装css-loader和style-loader：在命令行中输入`npm install --save-dev css-loader style-loader@latest`进行安装。
三、编写代码
1. 创建src文件夹：在命令行中输入`mkdir src`。
2. 创建index.文件：在命令行中输入`touch src/index.`。
3. 编写index.文件：在命令行中输入`cd src`，然后输入`touch index.`。
4. 编写main.js文件：在命令行中输入`touch src/main.js`。
5. 编写config.js文件：在命令行中输入`touch src/config.js`。
四、配置Webpack
1. 修改webpack.config.js文件：在命令行中输入`cd ..`，然后输入`npx webpack --mode development`进行配置。
2. 修改webpack.config.js文件中的module.rules数组，添加以下内容：
javascript
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
use: [
'file-loader?name=images/[name].[ext]',
'image-webpack-loader'
]
}

五、运行测试
1. 在命令行中输入`npm run dev`进行测试。
2. 如果一切正常，浏览器中应该能看到你的插件了。