ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

3步搞定ReadCat书源插件开发:从零写出你的第一个自定义书源

3步搞定ReadCat书源插件开发:从零写出你的第一个自定义书源 3步搞定ReadCat书源插件开发从零写出你的第一个自定义书源【免费下载链接】read-cat一款免费、开源、简洁、纯净、无广告的小说阅读器项目地址: https://gitcode.com/gh_mirrors/re/read-cat当你打开心仪的小说阅读器却搜不到那本刚完结的好书时会不会有点抓狂别急这个问题在 ReadCat 里有一个堪称外挂的解法——自己写一个书源插件。ReadCat 是一款免费、开源、简洁、纯净、无广告的小说阅读器它的插件系统允许你为任意网站定制内容获取逻辑。看完这篇文章你就能亲手写出属于自己的 ReadCat 书源插件把找不到书变成过去式。读完本文你将学会看懂书源插件的运行原理知道它凭什么能跨过跨域限制帮你抓取网页内容从零搭起一个能被 ReadCat 识别和加载的插件骨架一次通过校验实现书源插件三大核心方法——搜索、详情、正文让一本书完整地走完找到→点开→读起来的全流程用 ReadCat 自带的插件开发工具调试你的插件快速定位搜不到解析不出来的坑把成品打包分享给朋友完成一个可复用的书源插件。第一关搞懂书源插件到底是个什么神仙先别急着写代码我们用 2 分钟搞懂它的本质。书源插件本质上就是一段运行在沙箱里的 JavaScript 代码。它告诉 ReadCat 三件事去哪里搜书、去哪看详情、去哪读正文。这段代码不需要网页服务器也不怕跨域问题——因为真正的网络请求是 ReadCat 帮你发出的你只管告诉它请求哪个地址、怎么解析返回的 HTML。在源码里这一切都有迹可循。打开src/core/plugins/index.ts你会看到一个名为Plugins的类它就是插件的总管家负责导入、校验、启用、禁用和运行插件。而插件代码运行时ReadCat 给它准备了一个包含request请求、cheerioDOM 解析、store缓存读写等能力的工具箱。小提示官方对书源插件的接口定义在src/core/plugins/defined/booksource.d.ts写插件前先瞄一眼这个文件比啥教程都好使。第二关搭好插件骨架让 ReadCat 一眼认出你现在进入动手环节。这一步的目标只有一个让 ReadCat 认识你的插件。先获取 ReadCat 源码如果你已经装好了运行环境可以跳过git clone https://gitcode.com/gh_mirrors/re/read-cat cd read-cat npm install在任意位置新建一个my-source.js文件敲下这段骨架class MySource { constructor() { this.name 我的小说书源; } } // 静态属性ReadCat 校验插件的身份证 MySource.ID my_novel_source_00001; // 16~32位仅含数字字母下划线 MySource.TYPE 0; // 0书源 1书城 2朗读引擎 MySource.GROUP 示例; // 分组名 MySource.NAME 我的小说书源; MySource.VERSION 1.0.0; MySource.VERSION_CODE 1; MySource.PLUGIN_FILE_URL ; // 留空表示不提供在线更新 MySource.BASE_URL https://example.com; plugin.exports MySource;注意最后一行ReadCat 通过plugin.exports拿到你的插件类这一步漏了插件就失联了。这里有几个必须守住的规矩源码里都有硬校验src/core/plugins/index.ts的_isPlugin方法就是考官ID长度必须落在 16~32 之间且只允许字母、数字、下划线TYPE用数字区分插件类型书源固定是0GROUP和NAME都不能为空。小提示如果你想让插件支持在线更新把PLUGIN_FILE_URL填成指向.js文件的 http 地址即可。第三关实现三大核心方法让一本书完整跑起来骨架过了校验接下来就是重头戏。一个书源插件必须实现 3 个方法少一个 ReadCat 都会拒绝导入校验代码在src/core/plugins/booksource.ts。方法一search帮用户找到书async search(searchkey) { // 1. 发起搜索请求 const res await this.request.get( ${this.constructor.BASE_URL}/search?q${encodeURIComponent(searchkey)} ); const $ this.cheerio.load(res.body); // 解析返回的 HTML // 2. 把每一条结果映射成 ReadCat 认识的结构 const result []; $(.book-item).each((i, el) { result.push({ bookname: $(el).find(.name).text().trim(), author: $(el).find(.author).text().trim(), coverImageUrl: $(el).find(img).attr(src), detailPageUrl: $(el).find(a).attr(href), latestChapterTitle: $(el).find(.latest).text().trim(), }); }); return result; }返回的每一项只要填bookname和detailPageUrl就能用其余字段封面、最新章标题都是加分项。字段定义见src/core/book/book.d.ts里的SearchEntity。方法二getDetail点开书籍看全貌async getDetail(detailPageUrl) { const res await this.request.get(detailPageUrl); const $ this.cheerio.load(res.body); const chapterList []; $(#chapter-list a).each((i, el) { chapterList.push({ title: $(el).text().trim(), url: $(el).attr(href), index: i, }); }); return { bookname: $(#book-name).text().trim(), author: $(#author).text().trim(), coverImageUrl: $(#cover).attr(src), intro: $(#intro).text().trim(), chapterList, }; }注意章节的url最好处理成绝对地址用new URL(url, detailPageUrl)拼一下否则后面取正文时会 404。方法三getTextContent把正文送到眼前async getTextContent(chapter) { const res await this.request.get(chapter.url); const $ this.cheerio.load(res.body); const content $(#content).html(); return [content]; // 返回字符串数组一元素即一段 }返回的是字符串数组数组里每一项会被当成一个段落渲染。如果你的正文有多个p可以用$(#content p).map(...).get()切成多段阅读体验更棒。到这里你的书源插件已经能完整跑通搜索→详情→正文全流程了是不是挺有成就感小提示请求返回的res.body默认是文本如果遇到 GBK 编码的网站在请求配置里加charset: GBK即可ReadCat 会帮你转码。第四关让插件跑起来并分享给全世界在应用里导入并测试开发调试最爽的一点是ReadCat 自带插件开发工具。在设置 → 插件里打开开发者工具你可以直接运行search、getDetail、getTextContent三个方法逐个验证实时查看插件的console.log输出配合console.error快速定位解析失败的行每次修改代码后一键重新加载不用反复重启应用。调试工具的宿主代码在src/core/plugin-devtools/index.ts它的设计思路是起一个本地服务加载调试面板用 WebSocket 和插件沙箱通信——你只管调剩下的交给它。调试通过后正常导入即可在插件管理页点击导入选中my-source.jsReadCat 会用 uglify-js 压缩代码并做完整性校验逻辑见src/components/settings/components/plugin/hooks/plugin.ts。打包分享把自己写的.js文件压缩成 zip 发给朋友对方在插件管理页一键导入一个新书源就装好了。这就是 ReadCat 插件生态的玩法一人开发全网受益。小提示插件想持久化数据比如记住上次阅读位置用this.store.setStoreValue(key, value)/getStoreValue(key)每个插件都有独立的小型存储空间互不干扰。写在最后你的第一个书源插件已就位现在你已经掌握了书源插件开发的完整链路从理解booksource.d.ts的接口契约到搭出能通过校验的插件骨架再到用三大核心方法打通搜索→详情→正文最后用开发工具调试并分享出去。下一步去挑一个你常用的网站练手吧。哪怕第一次解析不完美多试几次正则和 cheerio 选择器你会越来越得心应手。写好的插件别忘了多测试几个场景遇到问题就打开插件的console看日志问题基本都能一眼定位。动手写你的第一个 ReadCat 书源插件吧——当你能在一分钟内解锁一个网站时那种掌控感真的会上瘾。【免费下载链接】read-cat一款免费、开源、简洁、纯净、无广告的小说阅读器项目地址: https://gitcode.com/gh_mirrors/re/read-cat创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表