modeling-developer-console

简介

本项目是建模开发者工具，助力建模应用构建-实时查看请求以及后台执行脚本，产品页面分析

该项目具有以下能力:

• 支持chrome浏览器开发者模式安装
• 支持F12打开点击浏览sql数据
• 使用vue3.x开发
• 使用manifest_version 2
  • 使用tabs权限
  • 使用webRequest权限
  • 使用webRequestBlocking权限
  • 使用storage权限
  • 其他(后续将持续扩展)
• 内置content_scripts页面
• 内置popup页面
• 内置devtools页面
• 集成element plus库
• 集成ace代码编辑器
• 集成bus总线，pako解压缩
• 使用yarn run watch可使代码热更新

基础

环境准备

Node 版本要求

项目需要 Node.js v14.17.5 或更高版本 (推荐 最新稳定版)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

yarn 1.22.11

安装

通过以下命令安装依赖包:

yarn install

如果遇到问题报错，可以查看使用 vue-cli 创建 vue3.x 版本项目报错 这篇文章

插件开发

yarn run watch

打开chrome浏览器，使用开发者模式加载根目录下面的dist文件夹，你不必每次重新打包，yarn run watch 命令会自动推送代码更新到浏览器扩展程序

插件打包

yarn run build

进阶

目录结构

项目src目录结构及说明如下:

├─assets               # 静态资源目录
│  └─images
├─background           # 最底层js
├─content              # content_scripts
│  └─components
├─devtools             # devtools页面
│  └─components
├─devtools_page        # 主要逻辑都在这里面
│  ├─components
│  └─workjs
├─plugins              # chrome插件配置和注入
├─popup                # popup页面
│  └─components
└─utils                # 公共方法

具体详细逻辑请查阅代码中的注释

FAQ

• 项目使用vue3.x，开发中需要注意vue2.x和3.x的区别，引入第三方插件也需注意如果引入vue2.x差劲可能不兼容
• 项目使用manifest_version 2，请注意，chrome即将在2022.01.27日开始停止对manifest_version 2支持