《关于鼠标变成了五条悟那件事》(浏览器插件)

440 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

关于系列第三期,这次是 《关于鼠标变成了五条悟那件事》 (chrome插件即引即用

大概效果:(娱乐向,主要是对浏览器插件好奇,分享一下自己的想法)

image.png

image.png

image.png

image.png

image.png

这次是一个月黑风高的晚上,我正在感受着交完报告的美好,突然精神一振,这周的视频还没开始想,在经历了一盘王者两包饼干三集番剧后,灵机一动,突然对浏览器插件感到好奇,于是开始跃跃欲试(所以如果看到内容相同的b站视频名字也有邶的,那是我!是我!)

第一步先把你们老公的图从混杂的背景中抠出来(应该有工具,但我觉得我找到了都扣完了,欢迎评论告诉我

image.png

从实现上来说就是判断当前鼠标位置是否在浏览器的四条边边上,是的话就换图,这块就交给js

image.png 一部分是对于当前位置的判断,这个部分提取了一个函数,去判断应该显示怎样的图片

image.png 另一部分就是调用这个函数和节流,防止因过度判断位置导致的卡顿

余下的都是浏览器插件相关的工作,然后搜索后发现主要是受到manifest.json文件控制的,我们需要在其中设置相关的名称、头像、代码的路径等等,这块的详细内容已经有大佬描述的很清楚了,不再重复写,可以参考这个:www.cnblogs.com/liuxianan/p…

最后附上代码和图片(望换取一个三连~)

链接: pan.baidu.com/s/1I_FY5orz… 提取码: u76r