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

226 阅读1分钟
前端开发浏览器插件:DPaw(Dog Paw - 小狗爪) 页面小助手,浏览器插件模板,可个性化开发,不受网络限制,开启即可使用

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

触发取色器后,移动至需要取色的位置 image.png 取名后弹出结果:RGB与HEX值,同时console控制台同样输出结果值 image.png

核心代码:

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(元素)页签,选中想要转化为图片的元素 image.png 2、切换至console(控制台)页签,在命令行输入:dextensions.imager.downloadToImage(dextensions.imager.downloadToImage(0) image.png 3、待执行完成,自动下载当前元素为图片至本地 image.png

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

1、选中需要格式化的字符串,右键弹出菜单,选择JSON格式化菜单,如下图 image.png 2、弹出的容器展示格式化好的JSON数据

image.png

资源下载:www.daelui.com/pool/res/da…

git库地址:gitee.com/daelui-exte…

插件使用方法:

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

image.png

2、在扩展程序页面,1)打开 开发者模式;2)加载已解压的扩展程序 image.png 3、目录选择 dpaw/dist ,此目录主插件源文件目录

image.png

qrcode_for_gh_37251178caf7_430.jpg

**扫码关注微信**