前言

对于大部分前端开发者来说，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获取