前言
对于大部分前端开发者来说,FeHelper插件应该很多人都用过。我最常用的就是页面取色工具,但是有个小小的不足,获取到的颜色是16进制的,当需要rgb格式时还需要借助FeHelper提供的颜色转换工具进行转换。
本文将学习FeHelper的页面取色功能和颜色转换功能,·并基于这两种开发一个自己的取色工具。
这里要感谢FeHelper作者阿烈叔的开源,可以供大家学习。
参考:/zxlie/FeHelper
技术选项
还是使用上一篇文章:快速查找swagger接口的插件 中使用到的jquery和uikit,感觉这两个拿来写插件是挺不错的。
其他
因为刚开始学习,有些地方不太明白,这次借着学习FeHlper来修改一些东西
依赖注入的匹配
"content_scripts": [{"matches": ["http://*/*","https://*/*","file://*/*"],"css": ["./uilit/uikit.min.css"],"js": ["./uilit/uikit.min.js","./uilit/uikit-icons.min.js","./js/jquery.js"]}]
判断当前页面是否可以进行依赖注入,原来对于非http(https)的网页会进行报错
chrome.tabs.query({active: true, currentWindow: true }, tabs => {let tab = tabs.length ? tabs[0] : null;if (tab) {if (/^(http(s)?|file):\/\//.test(tabs[0].url)) {//依赖注入} else {sendMessage('抱歉此工具无法在当前页面使用')}} else {sendMessage('请在标签页内使用')}});function sendMessage(message) {chrome.notifications.create('color-picker-id',{type: 'basic',iconUrl: chrome.runtime.getURL('../img/picker-128.png'),title: '温馨提示',message: message,eventTime: Date.now() + 2000})setTimeout(() => {chrome.notifications.clear('color-picker-id')}, 5000)}
取色器学习
看了一下源代码,没有注释真的是难受。
鼠标移入事件
之前一直想不明白一个问题,那就是如何获取到鼠标移入到的元素。今天打印了一下鼠标对象,发现已经为我们提供了
const abc = document.querySelector('#container');abc?.addEventListener('mousemove', e => {console.log(e.target);});
我们可以直接拿到鼠标移入的dom元素。但这是最基本的东西,如果当某一个元素设置定位属性后,那么你是拿不到你想要的那个元素。
比如当鼠标移入到红色小方块上时,你只能得到这个定位元素。因为这个定位元素更大,如果直接将这个元素的背景色设为黑色,你是看不到的。
但是我们的fehelper是可以获取到红色方框的颜色。当然因为有透明的的影响,红色小方块的颜色也不是红色。
canvas
这是另外一个核心。虽然我们没法拿到红色方块,但是我们可以拿到定位元素的父级。然后通过html2canvas
把dom转成canvas,通过canvas来获取颜色值。
下载地址:/dist/html2canvas.min.js
html2canvas(document.body).then(function(canvas) {document.body.appendChild(canvas);});
当然这里可以优化下,拿到元素后先判断该元素有没有定位属性。如果没有那就是我们要找的元素,直接将这个元素转成canvas,这样可以优化性能(不能直接获取元素的背景色,因为有可能你要获取的是文字的颜色😭)。
如果是定位元素的话,就找到其父级,将其父级变成canvas(一般情况下,定位元素不多;就算有定位元素,应该也是直接父级;如果最后父级是body,并且有很多子元素,那就自认倒霉,不过检验还是判断一下,如果父级元素是body,并且子元素特别多的话,直接提示获取不到颜色好了😂)
实现
这里最好先看一下我的这篇文章:通过canvas获取图片的颜色值
当点击按钮后,向页面里注入脚本,通过该脚本实现获取颜色的功能。
//popup.js 依赖注入chrome.scripting.executeScript({target: {tabId: tab.id },files: ["js/handle.js"]});
这里有个注意点,我想在handle.js
里使用jQuery,但是控制台提示找不到。查到的原因是:
popup.js文件和handle.js文件运行在不同的沙箱里,所以不能共享jquery4。您可以尝试使用chrome.runtime.sendMessage和chrome.runtime.onMessage来在不同的脚本之间通信。
这里我们使用原生js来写,写页面通信比较复杂
给body标签上绑定一个鼠标移入事件,用来获取鼠标位置所在的dom元素
body.addEventListener('mouseover', e => {console.log("元素是:", e.target)target = e.target})
---------------------------------------------------------------------------分界线-------------------------------------------------------------------------------------
按照上面的思路做完后,我发现是错误的。一开始想的是将尽可能少的dom转成canvas,但是每次都重写创建canvas对象是非常耗时间的。正确的思路是一开始就将body元素转成canvas对象,这样只需要创建一次,后续的操作只是操作这个canvas
第一次尝试后的效果
第一张图是我自己的demo,第二张图是FeHelper的。可以明显看出存在以下问题:
卡顿,创建的div不能实时跟着鼠标并且获取到的颜色不是那么准确
优化:
将top、left的改变用平移代替用mousemove
代替mouseover
,这个才是导致不流畅的根本原因。查了以下两种的区别是:
mousemove 是当鼠标在指定的元素内移动时触发的事件,每移动一个像素点就会触发一次。mouseover 是当鼠标从外部进入指定的元素或其子元素时触发的事件,该事件会冒泡。mouseover 和 mouseout 是一对事件,指鼠标移入和移出元素,而 mouseenter 和 mouseleave 是另一对事件,指鼠标移入和移出当前元素,不包括子元素,且不冒泡。
从上图可以看到现在已经非常的流畅了,接下来就是细节方面的优化:
修改鼠标的样式在div中间显示当前的颜色值,在右上角加一个叉号
修改鼠标样式
配置插件可访问的资源
在manifest.json
里配置插件可以访问的资源
"web_accessible_resources": [{"resources": ["img/*"],"matches": ["<all_urls>"]}],
以上代码标识。插件可以在任何url的网页下访问img
文件夹下的所有资源。web_accessible_resources
是用来设置访问静态资源的,比如图片;而content_scripts
是用来设置可以访问的js
、css
//修改鼠标的样式为图片body.style.cursor = `url(${chrome.runtime.getURL('img/picker-16.png')}),auto`
必须要通过chrome.runtime.getURL
才能获取到最终的位置
效果:
//添加颜色显示区域const colorText = document.createElement('div')colorText.id = "color-text"colorText.style.cssText = `width:50px;height:20px;position:absolute;bottom:10px;left:45px;border:1px solid #000;text-align:center;line-height:20px;border-radius: 3px;background-color:#fff;`divTemplate.appendChild(colorText)
问题
发现鼠标放在超链接上,鼠标样式会改变;但是fehelper的不会改变。
解决:修改生成的body的canvas,让他的层级在上面,这样就不会触发到超链接。
// 获取body对应的canvasconst canvas = await getCanvas()//修改canvas的层级canvas.style.zIndex = '999'canvas.style.position = 'absolute'canvas.style.top = "0px"canvas.style.left = "0px"//将canvas添加到body中body.appendChild(canvas)
实现颜色复制
这里就不放关闭图标了,打算通过鼠标左键来复制颜色并关闭插件。关于如何复制之前在
// 这里canvas在最上层,给canvas绑定双击事件canvas.addEventListener('click', () => {//获取剪切板const clipboardObj = navigator.clipboard;//将颜色写入剪切板clipboardObj.writeText(colorText.innerText)//注销事件,这里直接将元素移出,更加方便body.removeChild(divTemplate)body.removeChild(canvas)})
问题
当第一次使用时可以正常使用,这时已经将脚本注入到了网页。当下一次再点击时,再控制台会报错某个变量已经定义了,导致差距无法正常工作。暂时想到的方法时匿名函数
(()=>{// 业务逻辑})()
最终效果图
可能还存在一些问题,但是这个demo的基本功能已经实现了
demo获取
关注我的公众号,回复关键字取色器进行demo获取