浏览器插件,颜色提取器

1.谷歌版本95以上支持 EyeDropper
创建manifest.json文件
{
  "manifest_version": 2,
  "name": "colorPlugin",
  "description": "这是一个浏览器颜色获取插件",
  "version": "1.0",
  // 插件外层图标
  "icons": {
    "16": "111.png",
    "48": "111.png",
    "128": "111.png"
  },
  "browser_action": {
    // 默认图标
    "default_icon": "111.png",
    // 默认加载index.html
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": [
        "backgounrd.js"
    ]
  },
  "content_scripts": [
    {
      // 插件使用过略
        "matches": [
            "*://*/*"
        ],
        // 加载js 数组 ,分割,按顺序加载
        "js": [
            "backgounrd.js"
        ],
        // 什么时候录入,下面这个是 dom开发  也可以dom结束 document_end等 
        "run_at": "document_start"
    }
  ]
}
2.创建backgounrd.js 不用内容空着就可以
console.log('暂不使用')
3.创建popup.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>colorPlugin</title>
    <style>
        .content {
          position: relative;
            height: 80px;
            width: 80px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .color_textarea
        {
          padding-top: 20px;
          width: 100%;
          border: 0px;
          position: absolute;
          width: 1px;
          height: 1px;;
          left: -3px;
        }
        .clickImg{
          height: 40px;
          width: 40px;
          box-shadow: 0px 0px 5px #0f9;
          animation: fadeIn 1.2s infinite linear;
        }
        .dengDiv{
          position: absolute;
          content: "";
          display: block;
          width: 20px;
          height: 20px;
          background-color: transparent;
          bottom: 0px;
          border-radius: 10px;
        }
        @keyframes fadeIn {
        0% {
          height: 20px;
          width: 20px;
          opacity: 0;
        }
        50% {
          height: 30px;
          width: 30px;
          opacity: 1;
        }
        100% {
          height: 40px;
          width: 40px;
          opacity: 0;
        }
      }
    </style>
    <script src="./popup.js"></script>
</head>
<body>
    <div id="content" class="content">
         <!-- <button id="colorPluginBtnId" class="btn">plugin</button> -->
         <img id="colorPluginBtnId" class="clickImg" src="./icon.svg" alt="">
         <input id="color_textarea" class="color_textarea">
         <div id="dengDiv" class="dengDiv"></div>
    </div>
   
</body>

</html>
4.创建popup.js
window.addEventListener("load", winLoad, false);

//dom加载
function winLoad() {
  document.getElementById('colorPluginBtnId').addEventListener("click", btnClick);
}
const btnClick = () => { 
  if (window.EyeDropper) {
    const eyeDropper = new EyeDropper()
    eyeDropper.open().then((res) => {
      console.log(res.sRGBHex);
      navigator.clipboard.writeText(res.sRGBHex).then(() => {
      copyClipboard(res.sRGBHex)
    })}).catch(() => {
      console.log('用户点击Esc取消了')
    })
  } else {
    console.log('谷歌95正式版支持EyeDropper')
  }
}


const copyClipboard = ( text ) => {
  document.getElementById('dengDiv').style.background = text
  const dom = document.getElementById('color_textarea')
  dom.value = text
  dom.select()
  document.execCommand('copy')
}
5.缺少icon图片看目录结构,需要啥自己按目录添加,
1231239.png
6.实现效果
555555.png
7.添加插件
99999.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容