免责声明: 本项目仅供学习交流使用,不得用于商业用途,如有侵权请联系删除

项目地址

项目介绍

项目目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
⊢ dist                          # 打包后的文件 [插件文件]
⊢ public # 静态资源文件
⨽ images # 图片资源
⨽ manifest.json # 插件配置文件 [重要]
⨽ inject.js # 注入脚本 [inject-script.js]
⊢ src # 源码文件
⨽ apis # 接口请求
⨽ background # 后台脚本 [background-script.js]
⨽ init.ts # 后台脚本入口
⨽ menus.ts # 右键菜单项
⨽ notifications # 通知管理
⨽ service-worker.ts # 后台脚本入口
⨽ content # 内容脚本 [content-script.js]
⨽ loginModal # 登录Modal弹窗
⨽ navbar # 导航栏
⨽ sidebar # 通知管理
⨽ index.ts # 后台脚本入口
⨽ options # 配置页面
⨽ request # 请求封装
⨽ utils # 工具函数
⨽ App.tsx # popup页面
⨽ global.ts # 全局变量

项目安装

1
2
3
4
5
6
7
8
9
# 安装依赖
npm install

# 启动项目
npm run dev

# 打包项目
npm run build
npm run build:prod

项目说明

  • src/content/index.tsx 中引入 public/inject.ts, 确保成功引入 WAWebCollections模块 (whatsapp api)

  • 通过 window.addEventListenerwindow.postMessage 实现与 inject-scriptcontent-script 通信. 见 handleCallInjectedMethod 方法

  • 使用 handleCallInjectedMethod 方法调用 WAWebCollections 中的方法

  • src/background/service-worker.ts 中调用接口请求,获取数据

下载使用

点我下载

浏览器输入 chrome://extensions/ 跳转到插件页面

打开开发者模式

将下载好的压缩包拖入插件页面

点击插件图标, 跳转到 https://web.whatsapp.com/ 页面

控制台输入 window.Store 查看是否注入成功

示例图片