Picture Reader-(全屏看图、看漫画)浏览器拓展插件

1,780 阅读3分钟

这款插件适用于桌面端的Chromium内核浏览器如Chrome谷歌浏览器 和 Edge 浏览器、移动端的kiwi浏览器。 灵感来自于360浏览器的看图模式、全屏看图的一种功能,在Chorme、Edge生态中缺少它这种功能齐全的插件,有这样的需求所以开始了开发。

主要功能:

  • 幻灯片播放:支持幻灯片式播放,让你无需频繁点击,即可流畅欣赏所有图片。

  • 图片尺寸过滤:通过尺寸过滤功能,你可以根据图片的大小筛选出想要浏览的图片。

  • 批量下载:支持一键批量下载,让你无需逐张保存,大大提高了图片管理的效率

  • 跨平台支持:仅适用于网页端,同时也支持移动端浏览。可在Chromium内核的移动端浏览器中使用(如桌面端的Chorme、Edge、移动端的kiwi浏览器)。

  • 便捷操作:放大、缩小、拖拽、旋转、全屏模式、快速筛选、支持键盘操作......

开发技术栈

  • 选用WXT(Web Extension Toolkit)框架: 跨浏览器支持(支持跨平台开发,可以在不同浏览器上运行同一套代码)、Manifest V2和V3支持(一套代码支持Manifest V2和V3的插件,可以同时构建不同版本的插件如Chorme和FireFox浏览器拓展)、快速开发模式(支持HMR(热模块替换),更新内容不需要重新加载整个插件,大大提高开发效率)、支持主流前端框架(Vite插件的前端框架,如Vue、React、Svelte等)、较为完善的文档与社区支持
  • React WXT框架支持React编程
  • copilot辅助

项目思路

  • 写好项目说明: 明确项目的目标和功能,写好项目说明。这包括项目的名称、目标、核心功能、使用技术、依赖项等
  • 搭好代码结构框架: 使用确定的技术栈搭建代码结构框架,确定好核心功能函数
  • 函数设计: 设计每个函数的参数类型、返回参数和功能,写好伪代码
  • 功能实现: 编写代码或使用代码生成,copilot可以读取项目上下文
  • 测试调整: 开发者编写或copilot编写的代码不一定可用,需要开发者进行验证测试与调整才能达到预期的效果
  • 测试发布: 编写测试用例,梳理项目流程,对项目进行测试。测试完成后发布

使用场景:

  • 浏览长图文网站:Picture Reader 可以帮助你快速提取和浏览网页中的所有图片,无需在长文章中反复滚动寻找,大大提升了浏览效率。

  • 观看漫画:对于漫画爱好者来说,你可以通过幻灯片播放功能,流畅阅读整部漫画,并能根据需要快速保存喜欢的画面。

example2.jpg

example3.jpg

example4.png

项目地址

欢迎使用、提issues:

Microsoft Edge 拓展商店 here

Chrome 网上应用店 here

Firefox here