工程化开发谷歌插件到底有爽

工程化开发谷歌插件到底有爽

谷歌插件开发本质上就是写一些 html + js + css

谷歌开发心得吧

manifest.json 文件

 {
    "manifest_version": 3,
    "name": "发布助手",
    "version": "3.0",
    "description": "前端资源监测",
    "permissions": [
        "notifications",
        "activeTab",
        "storage"
    ],
    "content_scripts": [
        {
            "matches": [
                "https://*/*",
                "http://localhost:8080/"
            ],
            "js": [
                "services/index.js"
            ]
        }
    ],
    "background": {
        "service_worker": "services/background.js",
        "persistent": true
    },
    "action": {
        "default_popup": "html/index.html",
        "default_icon": {
            "16": "images/youku.png",
            "48": "images/youku.png",
            "128": "images/youku.png"
        }
    },
    "icons": {
        "16": "images/youku.png",
        "48": "images/youku.png",
        "128": "images/youku.png"
    }
}

剩下核心文件就是一个html 和一个services

html 文件就是你点击插件所弹出来的前端页面
services 文件相当于一个后端处理数据的地方

前端开发

前端模块化开发，项目创建
初始化一个 React 项目使用 Vite Less TypeScript ESLint Prettier Ant Design Lodash

# 在终端中执行以下命令来创建一个新的 Vite 项目：
npm create vite@latest my-project -- --template react-ts

# 进入项目目录：
cd my-project

# 在终端中运行以下命令来安装 LESS：
npm install less less-loader --save-dev

# 安装 Ant Design 和 Lodash：
npm install antd lodash

# 安装 ESLint、Prettier 和相关插件：【暂时忽略这些】
npm install --save-dev eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier

# 初始化 ESLint 和 Prettier
# 暂时忽略这些

后端开发

后端逻辑主要是根据前端操作进行一些数据的获取或者一些谷歌api的调用，所以核心就是想
写一些js，但是如果在一个文件中写js,写的太多根本不好维护，所以想通过模块化的方式来
分模块写js，各个模块可以直接使用import``export的方式进行导出和引用

 # webpack 安装
 npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env

webpack.config.js文件配置

 const path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        index: './services/index.js',  // 第一个入口
        background: './services/background.js',  // 第二个入口
    },
    output: {
        filename: '[name].js', // 使用 entry 对象的键作为输出文件名
        path: path.resolve(__dirname, 'youku404/services'),
        clean: true,  // 每次构建前清理/dist文件夹
    },
    devtool: 'source-map', // 使用 'source-map' 而不是 'eval'
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader', // 你可以根据需要添加 Babel 支持
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js']
    }
};

.babelrc文件配置

 {
    "presets": ["@babel/preset-env"]
}

package.json文件新加命令 build:service

    {
    "dev": "npm run dev --prefix youku-plugin",
    "build": "npm run build:dev  && npm run build:service && npm run commit",
    "build:dev": "npm run build --prefix youku-plugin",
    "build:service": "webpack",
    "commit": "git pull && git add . && git commit -m '版本更新' && git push",
    "i": "npm install --prefix youku-plugin"
  }

解决资源的打包问题

❓：我要修改 打包之后的文件路径 怎么办

// 

标签：npm,插件,有爽,--,js,build,工程化,const	

From： https://www.cnblogs.com/gjzsa/p/18568338