Super-preloader 开发指南：用 Rollup 构建加 Puppeteer 测试自动翻页脚本的完整流程

Super-preloader 开发指南用 Rollup 构建加 Puppeteer 测试自动翻页脚本的完整流程【免费下载链接】Super-preloaderUserscript to enable autopagerizing as well as preloading项目地址: https://gitcode.com/gh_mirrors/su/Super-preloaderSuper-preloader 是一款开源油猴脚本Userscript核心功能是为普通网页提供**自动翻页Autopagerize与预加载Preload**能力——装上它没有原生下一页按钮的网站也能一键翻页、秒开下一屏。本文带你完整走一遍它的开发流程从环境搭建、Rollup 构建管线到用 Puppeteer 驱动 Chrome 自动化测试翻页效果新手也能快速上手参与开发。先看一张运行效果截图感受一下自动翻页在真实网站上的样子一、项目结构一览核心代码都在哪在动手之前先认识几个关键文件相对仓库根目录路径作用src/index.js脚本主入口Rollup 的构建起点src/meta.js生成UserScript元数据头版本号、图标、exclude 列表等src/rules/jsSiteRule.js各站点的翻页规则与选择器src/locale/浮动窗、设置面板的多语言 EJS 模板rollup.config.mjsRollup 构建配置本文重点test/test.jsPuppeteer 自动化测试脚本本文重点babel.config.jsonBabel 转译配置二、开发环境搭建一条命令装好依赖安装 Node.js 与 pnpm项目通过preinstall钩子强制使用 pnpm。克隆并安装依赖git clone https://gitcode.com/gh_mirrors/su/Super-preloader cd Super-preloader pnpm install 项目文档 docs/cn/develop.md 中列出了参与开发的完整步骤包括提交 PR 前用git rebase合并 commit 等约定。三、Rollup 构建流程从源码到 .user.js 的 6 个关键插件油猴脚本必须是一个自包含的单文件不能 import 任何外部模块因此项目用 Rollup 把src/下所有源码、npm 依赖、样式、模板打包成dist/Super_preloaderPlus_one_New.user.js。核心配置见 rollup.config.mjs插件各司其职rollup-plugin-re构建期正则改写日志调用给每条日志统一加上[Super-preloader]前缀方便在控制台过滤rollup-plugin-banner2把src/meta.js中的METADATA写入文件头即你安装时看到的UserScript元数据rollup-plugin-ejs编译src/locale/下的 EJS 多语言模板浮动窗文案、升级通知等rollup/plugin-json把 JSON 数据紧凑地内联进脚本rollup-plugin-scss-string将 scss/css 编译成字符串注入避免样式污染页面node-resolve commonjs babel把 lodash 等 npm 依赖打包进来并用 Babel 转译现代语法规则写在babel.config.json其中wildcard插件还负责解析.ejs/.css/.scss导入。最终输出为IIFE 格式output.format: iife文件名按[name].user.js规则生成。执行构建只需pnpm build四、开发调试技巧watch 模式实时重建改完代码不用手动重复 build。执行pnpm dev它会以rollup -c --dev -w启动Rollup 进入监听模式同时rollup-plugin-dev在0.0.0.0:8081拉起一个本地开发服务器。每次保存源码文件脚本自动重新打包并在浏览器中刷新修改翻页逻辑时体验极佳。五、Puppeteer 自动测试不靠人眼验证翻页效果油猴脚本的效果必须在真实浏览器里跑起来才算数。项目用 Puppeteer 把整个验证流程自动化了配置位于 test/test.js执行pnpm test # 本机运行Windows 可用 pnpm wintest 先装 Chrome测试流程共 5 步全程无人值守下载并解压 ViolentMonkey 扩展——用真实的油猴环境安装脚本以非 headless 模式启动 Chrome并通过--load-extension加载该扩展Chrome 扩展目前仅非 headless 模式可用自动安装脚本——新标签页打开dist/下构建好的.user.js在扩展安装页自动点击确认失败会重试最多 5 次打开 https://www.xkcd.com经典翻页测试站点等待浮动窗元素#sp-fw-rect出现模拟滚动到页面底部等待分隔条元素#sp-separator-2渲染出来——说明自动下一页按钮已成功插入页面。任一步骤失败脚本会以非零退出码结束方便接入 CI 做回归卡点。测试覆盖的正是 Super-preloader 的两大核心功能浮动窗 自动翻页。六、如何为新网站添加翻页规则Super-preloader 支持数千个站点的翻页规则规则由两部分组成src/rules/jsSiteRule.js中的站点识别与 XPath 选择器以及随脚本下发的 JSON 规则数据库发布流程会用 ci/rewrite_db.js 对其进行重写和压缩。添加规则前建议先阅读官方文档 docs/siterule.md学习 JSON 规则格式与 XPath 选择器写法然后尽量只改 JSON 数据库、不动主脚本。效果可以参考下面这些真实站点的运行截图七、版本发布与一键文档部署package.json用 npm 的 version 生命周期钩子把检查—构建—测试串成了流水线preversion自动跑pnpm checkESLint TypeScript 类型检查 Prettier 格式校验version执行pnpm build并把dist/产物加入 gitpostversion自动运行 Puppeteer 测试确保新版本脚本可正常安装。文档发布则一条命令搞定pnpm docs:publish会先用 VitePress 构建docs/目录再调用 ci/gen_ghpage.js 把构建好的脚本文件、规则数据库与 wedata 数据一起同步到 gh-pages 站点供用户在线预览文档与直接安装脚本。八、总结Super-preloader 的开发链路可以概括为一句话改src/→pnpm dev实时调试 →pnpm build打包单文件 →pnpm test让 Puppeteer 在真实浏览器里验证自动翻页效果。构建侧靠 Rollup 插件链完成元数据注入与依赖打包测试侧靠无头浏览器完成端到端回归整条流程对新手非常友好。如果你想贡献新站点规则或改进翻页逻辑现在就可以按上面的步骤动手了 【免费下载链接】Super-preloaderUserscript to enable autopagerizing as well as preloading项目地址: https://gitcode.com/gh_mirrors/su/Super-preloader创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考