不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
FeHelper中新增【页面取色】工具 进入全屏
line

有太多小伙伴儿一直在反馈,希望在FeHelper中增加一个常用Web色的小工具,一直没时间倒腾这玩意儿。前些天偶然的机会,看到一个color-picker的组件,借鉴了一下,也结合PhotoShop上的取色操作,索性把这个功能尽快完成了!

实现原理

实现起来其实并不复杂,大概总结下面这几点吧(如果你感兴趣知道的话)

  • 选择工具的适用场景:http://*/*https://*/*files://*/*
  • 通过content-scripts方式,将color-picker主程序注入以上类型页面
  • background中增加事件监听
  • 触发页面取色操作
    • 方法一:在popup-menu中选择页面取色工具发送指令
    • 方法二:通过页面右键菜单选择FeHelper页面取色工具发送指令
  • background中响应指令、生成页面预览图,发回content-scripts主程序
  • color-picker中生成一张<img />z-index足够大,并生成随光标移动的color-preview-box
  • 结合canvaswebgl,生成预览效果
  • click确认取色结果,并自动选中结果
  • 点击X按钮或者选择[ESC]键,可退出页面取色模式
  • Enjoy it!

工具入口

屏幕快照 2016-01-09 上午8.41.31.png

当然,如果你开启了FeHelper右键菜单,通过右键也能直接调出。

使用方式

1、popup-menu方式

colorpicker-way-1.gif

2、context-menu方式

colorpicker-way-2.gif

意见反馈

工具会不断完善,但要看大家使用的情况,发现问题,及时反馈给我!

推荐统一的反馈渠道:http://www.baidufe.com/fehelper/feedback.html

趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line
  • 星情 2016-01-12 17:39:24 回复
    功能越来越强大了,赞!