摸鱼派聊天室浏览器扩展

Chrome Web Store

Microsoft Web Store

基于摸鱼派开放 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目录打开。