前端开发浏览器插件：小狗爪(支持Chrome与Edge)

前端开发浏览器插件：DPaw(Dog Paw - 小狗爪) 页面小助手，浏览器插件模板，可个性化开发，不受网络限制，开启即可使用

一、取色器：快捷键：Ctrl + Shift + E(注：本地环境或https页面才能正常触发)

触发取色器后，移动至需要取色的位置

取名后弹出结果：RGB与HEX值，同时console控制台同样输出结果值

核心代码：

const eyeDropper = new EyeDropper()
const el = document.body || document.document
el && el.addEventListener('keydown', async (e) => {
  if (e.ctrlKey && e.shiftKey && e.keyCode === 69) {
    try {
      const result = await eyeDropper.open()
      let rgbValue = result.sRGBHex // 此为获取的颜色值
    } catch (e) {
      console.log('用户取消了取色')
    }
  }
})

二、DOM生成图片下载

1、按下F12打开控制台，切换至Element(元素)页签，选中想要转化为图片的元素

2、切换至console(控制台)页签，在命令行输入：$dextensions.imager.downloadToImage($0)

3、待执行完成，自动下载当前元素为图片至本地

三、在页面格式化JSON字符串

1、选中需要格式化的字符串，右键弹出菜单，选择JSON格式化菜单，如下图

2、弹出的容器展示格式化好的JSON数据

资源下载：http://www.daelui.com/pool/res/data/dpaw.zip

git库地址：dpaw: DPaw(Dog Paw - 小狗爪) 页面小助手，浏览器插件模板，可个性化开发- 取色器(https页面或本地页面可用)- 辅助代码文本内容可选中，过滤选中文本注入

 

插件使用方法：

1、在浏览器地址输入 chrome://extensions/ ,或者通过浏览器属性打开

2、在扩展程序页面，1）打开 开发者模式；2）加载已解压的扩展程序

3、目录选择 dpaw/dist ，此目录主插件源文件目录 

扫码关注微信