Skip to content

🍬 Keep an A-SOUL member as a pet in your browser

Notifications You must be signed in to change notification settings

ZiuChen/A-Soul-Browser-Pet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

92 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A-Soul 浏览器宠物

A-Soul Browser Pet

在浏览器里养一只A-Soul成员当宠物

🔰 安装方式

支持 Chrome Edge Firefox 等现代浏览器

具体安装方式见文档:安装方式

🏓 使用说明

打开任意网页,即可看到一只可爱小然出现在你的页面上。

她能陪你一起读文献、刷视频、看直播,还能够与你互动,帮你收集语料,提醒你按时休息。

互动方式:

  • 拖拽:小然会跟随鼠标改变位置并变换表情;
  • 点击:小然会变换不同的表情,并且弹出随机预设语句;
  • 跟随鼠标:小然会不断跟随鼠标位置;
  • 跟随点击:小然会追逐最近点击鼠标的位置;

附加功能:

  • 拖拽收藏:将链接/图片/选中文字拖拽到小然身上,她会为你保存起来;
  • 管理收藏: 点击拓展按钮,可以在弹出页内打开/复制/删除收藏内容;

自定义配置:

除了小然,还有其他四位A-Soul成员可以配置,点击扩展按钮,在弹出框中进行配置。

  • 诱饵:每位成员都对应着不同的诱饵,会在点击鼠标后展示; (可能会影响正常点击)
  • 收藏:开启后,可以使用拖拽收藏功能;
  • 速度:成员追踪鼠标/追踪点击位置时的速度;

🚚 开发相关

技术栈与开发周期:

项目使用 Vue + jQuery + MDUI + Anime.js 完成,Vue 用于构建弹窗界面,jQuery 用于替代原生 DOM 操作,更方便的操作元素属性、添加与解除监听器;MDUI 用于构建弹窗配置页的样式, Anime.js 用于辅助实现人物角色动作的过渡动画。

项目结构:

src
 ├── background.js    // service_worker脚本
 ├── css              // 存储样式文件
 ├── index.js         // 注入页面的content_scripts脚本
 ├── lib              // 依赖的外部库
 ├── manifest.json    // Chrome 扩展的描述文件
 ├── popup.html       // 弹窗页的.html文件
 ├── popup.js         // 弹窗页的.js文件
 └── static           // 存储静态文件如图片、图标等