Tampermonkey油猴用户脚本获取当前页面的主色值

示例

基本用法

• tampermonkey.net可在官网或chrome webstore中下载安装油猴插件

• 点击Dashboard进入管理页面

  
  
  

  image

• 点击+创建新脚本

  
  
  

  image

• 直接在自执行函数里面写js代码就好了

  
  
  

  image

开头的一些特殊的注释

image

代码

// ==UserScript==
// @name         获取当前页主体颜色
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http*://*/*
// @grant        none
// @require      https://code.jquery.com/jquery-2.1.4.min.js
// @require      http://html2canvas.hertzen.com/dist/html2canvas.min.js
// ==/UserScript==

(function () {
  'use strict';
  // 常量
  const EFFECTIVE_COUNT = 200;

  /**
   * utils
   */
  // 获取颜色
  const getPixelColor = (r, g, b) => {
    let rHex = r.toString(16);
    r < 16 && (rHex = "0" + rHex);
    let gHex = g.toString(16);
    g < 16 && (gHex = "0" + gHex);
    let bHex = b.toString(16);
    b < 16 && (bHex = "0" + bHex);

    return {
      hexColor: '#' + rHex + gHex + bHex,
      rgbColor: `rgb(${r}, ${g}, ${b})`
    }
  }
  // 复制到剪切板
  const copyText = (text) => {
    if ($(".__temp-input__").length === 0) {
      let input = $("").addClass("__temp-input__");
      $('body').append(input);
    }
    $(".__temp-input__").val(text);
    $(".__temp-input__").select();
    if (document.execCommand) {
      document.execCommand('copy');
    }
  }
  // 下载canvas截屏
  const download = (url) => {
    let aElement = $("").attr({
      'href': url,
      "download": "downImg"
    });
    aElement[0].click();
  }

  // 调用方法的button & 所有样式
  const GlobalStyle = `
  .__fix-btn__ {
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 10000;
    font-size: 16px;
    opacity: 0.6;
    cursor: pointer;
    background: #1e1f26;
    color: #fff;
    border: none;
    padding: 10px 25px;
    cursor: pointer;
  }
  .__fix-btn__:hover {
    opacity: 1;
  }
  .__fix-btn__:active {
    opacity: 0.8;
  }
  .__temp-input__ {
    position: fixed;
    left: -1000px;
  }
  .__mask__ {
    position: fixed;
    background: rgba(0,0,0,.2);
    height: 100%;
    width: 100%;
    right: 0;
    top: 0;
    z-index: 100001;
    font-size: 16px;
  }
  .__panel__ {
    position: fixed;
    height: 100%;
    width: 600px;
    color: #fff;
    background-color: #1e1f26;
    right: 0;
    top: 0;
    padding: 15px;
    overflow-y: auto;
    z-index: 100002;
  }
  .__panel-list__ {
    display: flex;
  }
  .__panel-item__ {
    height: 60px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }
  .__panel-item-count__ {
    margin-right: 15px;
    text-align: center;
    width: 50px;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .__panel-item-color__:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-image: linear-gradient(#8EC5FC, #E0C3FC) 30 30;
  }
  .__panel-item-color__ {
    height: 40px;
    width: 40px;
    margin-right: 20px;
    border-radius: 8px;
    border: 2px solid #8EC5FC;
  }
  .__panel-item-text__ > div {
    color: #bbb;
    transition: all 0.3s;
    cursor: pointer;
  }
  .__panel-item-text__ > div:hover {
    color: #fff;
    /* transform: scale(1.1); */
  }
  `;

  let fixButton = $("").addClass('__fix-btn__').text("获取当前页主体颜色");
  let styleDom = $("