前言 #

前一段新冠阳性，居家隔离办公的时候，经常会遇到分享屏幕。但是当分享的时候，需要聚焦某一要素，简单的鼠标移动并不能让观看者很清晰直观的看到分享者的着重点。 于是便简单开发了一款浏览器插件，显示鼠标移动轨迹。

• 💬 按住左边的ALT键，配合鼠标左键按下并在页面上滑动，即可在页面上绘制线条。
• 📃 第一种模式是轨迹短暂跟随鼠标。第二种模式是可随意绘制。
• 📦 取消按下坐标的ALT键，绘制的内容将被清空

GitHub Repo #

what-is-my-mouse-trail.

<sub>Popup

Inject Vue App into the Content Script</sub>

Features #

• ⚡️ 鼠标轨迹跟随
• 🥝 自由绘制
• 🌈 颜色选择

简单描述 #

• 如果需要自定义弹出框页面样式，可以在 popup/Popup.vue 中修改。
• 如果需要修改笔刷样式，可以在free-hand调试好笔刷后，再将配置赋值给contentScripts/views/App.vue 中的config_draw参数。
• 如果需要修改业务逻辑，只需关注popup/Popup.vue和contentScripts/views/App.vue这两个页面。

鼠标移动，轨迹短暂跟随的功能其实是来自于tldraw的橡皮擦功能，轨迹看着很像水果忍者里面的刀。然后又拓展了一点，就是可以自由绘制。其实代码很简单，就是画布是个svg，按住alt加鼠标左键，将mousemove的点绘制成path，添加到svg画布上就好了。代码量很少，就只监听鼠标 pointerdown、pointermove、pointerup就可以了。

Build #

pnpm build

安装：（以chrome浏览器为例）

1. 地址栏输入: chrome://extensions/。
2. 打开开发者模式。
3. 将生成的 /extension 文件夹直接拖拽到浏览器扩展程序页面。