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

这款插件适用于桌面端的Chromium内核浏览器如Chrome谷歌浏览器 和 Edge 浏览器、移动端的kiwi浏览器。
插件灵感来自于360浏览器的看图模式,在chorme的拓展应用中正缺少Picture Reader 这样一款插件。

主要功能:

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

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

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

  • 跨平台支持:Picture Reader 不仅适用于网页端,同时也支持移动端浏览。可在手机、平板等设备上使用。

  • 便捷操作:Picture Reader 的界面设计简洁直观,操作便捷,无需复杂的设置即可轻松上手。

使用场景:

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

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

example1.jpg
example2.jpg
example3.jpg
example4.png

开发技术栈

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

项目思路

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

项目地址

欢迎star、提提issues:
github项目地址

Microsoft Edge 拓展商店 here
Chrome 网上应用店(上架中。。。)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容