developer

开发指引

• 开发指引
  • 前言
  • 开发之前
  • 快速开始
  • 相关命令说明
  • 开发构造
  • 分支说明
  • 目录结构
  • 目录结构说明
  • 适配站点说明
  • 开始适配新的站点

---

前言

感谢您参与本项目开发，本项目由主要由 TypeScript 语言编写，前端使用 Vue 框架，您可以很方便的在本地进行编译测试；

开发之前

• 在参与开发之前，请确认已安装并会使用以下工具：
  • nodejs v20 +
  • yarn v1.15 +
  • git v2.0 +
• 同时，您需要有一个 github 账号；
• 推荐使用 VSCode 进行开发

快速开始

• 在 github 上 Fork 本项目；
• 获取最新代码到本地：

  git clone [email protected]:您的ID/PT-Plugin-Plus.git
  

• 如果您没有 Fork 本项目，也可以直接使用本项目地址进行克隆，唯一的区别就是你不能直接提交你的更改到这个仓库：

  git clone https://github.com/ronggang/PT-Plugin-Plus.git
  

• 切换到 dev 分支：

  git checkout dev
  

• 初始化项目

  yarn install
  

• 编译项目

  yarn build
  

• 调试项目
  • 编译完成后，会在项目的根目录生成一个 dist 目录；
  • 打开 Chrome ，在地址栏输入：chrome://extensions/ 回车，进入扩展程序；
  • 勾选 开发者模式；
  • 点击 加载已解压的扩展程序...；
  • 选择已经生成的 dist 目录（如 D:\PT-Plugin-Plus\dist ）；
  • 如果一切正常，将会在 Chrome 上多出一个 PT Plugin Plus 插件；
  • 开始使用；

相关命令说明

• yarn install
  • 项目初始化，在本地调试之前，需要进行包的安装；

• yarn build
  • 生成可发布的项目到 dist 目录，该目录可用于 Chrome 扩展；

开发构造

默认情况下， yarn build 构造的 dist 目录并不会启用watch mode来跟踪对代码的实时更改。 （鉴于Vite的构造速度和 npm-run-all 的并发构建，我们不建议使用该模式） 你需要另外操作如下：

1. 安装 cross-env 和 npm-run-all 命令，可以全局安装或在项目下安装为dev依赖，具体如下

yarn global add cross-env npm-run-all 或 yarn add -d cross-env npm-run-all

2. 使用cross-env指定NODE_ENV环境，并使用 npm-run-all -p dev:* 或者 run-p dev:* 同时运行所有dev构建脚本

cross-env NODE_ENV=development npm-run-all -p dev:*

分支说明

项目当前存在两个分支：

• master: 主分支，用于发布正式代码
• dev: 开发分支，开发请在该分支下进行

目录结构

.
├─ .github
│  └─ ...
├─ debug
│  └─ ...
├─ public
│  └─ ...
├─ resource
│  ├─ clients
│  ├─ i18n
│  ├─ libs
│  ├─ publicSites
│  ├─ schemas
│  └─ sites
├─ src
│  ├─ background
│  ├─ content
│  ├─ interface
│  ├─ options
│  └─ service
├─ vite
└─ ...

目录结构说明

• .github
  • 保存一些 github 网站上的配置文件，如：issue 模板、pull request 模板等；
• debug
  • 保存本地调试时后台服务，仅调试用户界面会用到；
• public
  • 保存一些公用的资源文件，编译时会将该目录下所有文件生成到 dist 目录；
• resource
  • clients
    • 下载客户端实现代码，新增客户端适配文件将保存在这里；
  • i18n
    • 多语言资源文件；
  • libs
    • 一些公用的库；
  • publicSites
    • 公网站点配置文件；
  • schemas
    • 网站架构配置文件；
  • sites
    • 网站配置文件；
• src
  • 插件主要代码
  • background
    • 插件一些常驻内存的 后台 服务代码，即 背景页 所看到的内容；
  • content
    • 该内容会插入到每个需要显示插件图标及相关功能的网站，通常被称为 内容脚本 ；
  • interface
    • 一些公用的定义，如类型等；
  • options
    • 插件选项页面代码，如配置、搜索等；
  • service
    • 公用的一些服务类；
• vite
  • 编译时的一些配置文件；

适配站点说明

适配一个新的站点，主要分为两部分内容：种子搜索 和 用户数据 ，可以同时适配，也可以只适配其中的一个；

• 种子搜索

  • 该功能使用 JavaScript 脚本来进行处理；处理过程如下：
  • 请求搜索页面 -> 返回结果 -> 加载处理脚本 -> 解析需要的内容 -> 返回可用数据

• 用户数据

  • 该功能主要使用 jQuery 的选择器来处理；处理过程如下：
  • 请求用户数据页面 -> 返回结果 -> 匹配选择器 -> 解析需要的内容 -> 返回可用数据

开始适配新的站点

• 参考 适配新的站点

未完待继