基于摸鱼派开放 API 开发的聊天室扩展
- 每日登录自动领取昨日活跃
- 右击消息可以@用户、+1消息、引用消息、收藏表情
- 点击输入框旁的头像可以查看通知、设置
- 可以开启弹幕消息，在网页中以弹幕的形式展示消息
- 可以设置黑名单(屏蔽某人的消息)、特别关心(上下线通知提醒)
- 点击用户头像展示用户信息卡片，卡片中点击用户名跳转用户页面，点击积分跳转用户积分记录页面
基于Vue3 + Element Plus(自动导入)，封装了SVG组件Icon-svg。
.
├── public/
│ ├── _locales/
│ │ └── zh_CN/ - 目录名对应 manifest.json 的 default_locale
│ ├── css/ - 需要向网页注入的css
│ ├── icons/ - 扩展所需的Icon
│ ├── image/ - 图片资源
│ └── browser-extension.html - 默认html模板
├── src/
│ ├── api/ - 所有请求
│ ├── components/ - 各个组件
│ ├── constant/ - 常量
│ ├── content-scripts/
│ │ └── content-script.js - 需要向网页注入的js
│ ├── popup/ - 点击扩展图标展示的入口页面
│ │ ├── App.vue
│ │ └── main.js
│ ├── router/ - 路由
│ ├── store/ - 全局 store 管理
│ ├── svg/ - svg 文件
│ ├── utils/ - 工具方法
│ ├── views/ - 所有view
│ ├── background.js - 在后台运行的js
│ └── manifest.json - 扩展配置文件
npm run serve
在谷歌浏览器中选择拓展程序 -> 管理拓展程序 -> 加载已解压的拓展程序 然后选择当前目录下的dist目录打开。
npm run build
进入artifacts目录解压zip包
unzip pwl-chat-extension-v1.0.19-production.zip
在谷歌浏览器中选择拓展程序 -> 管理拓展程序 -> 加载已解压的拓展程序 然后选择当前目录下的artifacts目录打开。