浏览器插件FeHelper学习：页面取色器

大家好，欢迎来到IT知识分享网。

前言

这里要感谢FeHelper作者阿烈叔的开源，可以供大家学习。

参考：https://github.com/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来获取颜色值。

下载地址：http://html2canvas.hertzen.com/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对应的canvas const 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获取