工作辅助工具

效果：

另附油猴插件离线安装包：https://www.yuque.com/jsoncode/web/uo0727

以下就是全部的插件脚本。

// ==UserScript==
// @name         工作菜单
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        **://**/**
// @grant        GM_setClipboard
// @grant        GM_getValue
// @grant        GM_setValue
// @run-at       document-idle
// ==/UserScript==

(function() {
  let list = [
    {
      title: '账号名称',
      name: '账号',
      value: '密码',
      url: '登录链接',
      titleAttr: '提示内容',
    }
  ];

  list = list.map(item => {
    item.id = escape(item.title + item.name + item.value + item.url);
    item.useCount = GM_getValue(item.id) || 0;
    item.useCount = item.useCount * 1;
    return item;
  });

  let doc = window.top.document
  let iframeWrapperContent = doc.getElementById('iframeWrapperContent')
  if(!iframeWrapperContent){
    doc.body.insertAdjacentHTML('beforeend',`
        <style>
            #iframeWrapperContent{position:relative;transition-duration:.2s;width:50px;height:50px;}
            #iframeEl{box-shadow:2px 2px 10px rgba(0,0,0,0.4);position:absolute;left:0;top:0;width:calc(100% - 50px);height:calc(100% - 50px);
                border:0;z-index:0;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);overflow:hidden;border-radius:10px;transition-duration:.2s;
                }
            #iframeBtn{font-size:12px;padding:0 8px;outline:0;width:50px;height:50px;border-radius:100px;border:0;background:#2a68c9;color:#fff;position:absolute;right:0;bottom:0;z-index:1;cursor:pointer;}
            #iframeBtn:hover{background:#204e97;}
        </style>
        <div style="position:fixed;right:10px;bottom:10px;z-index:9999999;">
            <div id="iframeWrapperContent">
                <iframe id="iframeEl" src="${getHtml()}"></iframe>
                <button id="iframeBtn">工作菜单</button>
            </div>
        </div>
        `)
    let iframeWrapperContent = doc.getElementById('iframeWrapperContent')
    let iframeEl = doc.getElementById('iframeEl')
    let iframeBtn = doc.getElementById('iframeBtn')
    iframeBtn.addEventListener('click',e=>{
      if(iframeWrapperContent.getAttribute('data-open')==='1'){
        iframeWrapperContent.setAttribute('data-open','0');
        iframeWrapperContent.style.width = '50px';
        iframeWrapperContent.style.height = '50px';
        iframeEl.style.opacity='0';
      }else{
        iframeWrapperContent.setAttribute('data-open','1');
        iframeWrapperContent.style.width = '600px';
        iframeWrapperContent.style.height = '500px';
        iframeEl.style.opacity='1';
      }
    },false);
    doc.addEventListener('click',e=>{
      if(e.target.id!=='iframeBtn'&& !e.target.closest('#iframeBtn')){
        iframeWrapperContent.setAttribute('data-open','0');
        iframeWrapperContent.style.width = '50px';
        iframeWrapperContent.style.height = '50px';
        iframeEl.style.opacity='0';
      }
    },false);
    window.top.addEventListener("message", e=>{
      if (e.origin!=='null'){
        return;
      }
      let data =e.data;
      let item= list[data.index];
      let useCount = item.useCount+1;
      let cpList = [
        item.title,
        item.name,
        item.value
      ];
      GM_setClipboard(cpList[data.sub]);
      GM_setValue(item.id,useCount.toString());
      list[data.index].useCount = useCount;
      setTimeout(()=>{
        doc.getElementById('iframeEl').src = getHtml();
      },1000)
    }, false);
  }

  function getHtml(){
    list = list.sort((item1,item2)=>{
      if(item1.useCount===item2.useCount){
        return 0;
      }else if(item1.useCount>item2.useCount){
        return -1;
      }else if(item1.useCount<item2.useCount){
        return 1;
      }
    });
    let html = `
    <div>
        <ol>
            <li>
                <div class="li-wrap">
                    <div>标题</div>
                    <div>账号</div>
                    <div>密码</div>
                    <div>使用频率</div>
                </div>
            </li>
            ${list.map((item,index)=> `<li data-index="${index}">
               <div class="li-wrap">
                   <div class="sub-item" data-sub="0">${item.title}</div>
                   <div class="sub-item" data-sub="1" ${item.titleAttr?`title="${item.titleAttr}"`:''}><a ${item.url?`href="${item.url}"`:''} target="_blank">${item.name}</a></div>
                   <div class="sub-item" data-sub="2">${item.value}</div>
                   <div>${item.useCount}</div>
               </div>
            </li>`).join('')}
        </ol>
    </div>
    `
    let style = `
    <style>
    *{box-sizing:border-box;}
    body{padding:15px;margin:0;font-size:12px;cursor: default;}
    body::-webkit-scrollbar{width:0;height:0;}
    ol{margin-left:0;padding-left:1rem;}
    li{margin-left:0;}
    li:hover{background:rgba(0,0,0,.1);}
    li .li-wrap{display:flex;height:30px;align-items:space-between;}
    li .li-wrap div{padding:0 10px;display:flex;align-items:center;}
    li .li-wrap div:nth-child(1){flex:2}
    li .li-wrap div:nth-child(2){flex:3}
    li .li-wrap div:nth-child(3){flex:2}
    li .li-wrap div:nth-child(4){flex:1}
    li .li-wrap div:hover{background:rgba(0,0,0,.3);}
    li .li-wrap div a{text-decoration:none;display:flex;align-items:center;width:100%;height:30px;}
    li .li-wrap div a[href]{color:#2a68c9;cursor:pointer;}
    </style>
    <script type="text/javascript">
     document.addEventListener('DOMContentLoaded',()=>{
         document.addEventListener('click',e=>{
             let el= e.target
             el = el.classList.contains('sub-item')?el:el.closest('.sub-item')
             if(el){
                 let index = el.closest('li').getAttribute('data-index');
                 let sub = el.getAttribute('data-sub');
                 window.top.postMessage({index,sub},'*')
             }
         })
     },false);
    </script>
    `
    html = html.replace(/"/g,'%22')
        .replace(/'/g,'%27')
        .replace(/&/g,'&amp;')
        .replace(/#/g,'%23')
        .replace(/\n/g,'')
      +escape(style);

    html = `data:text/html,<!DOCTYPE html><html><head><meta charset='utf-8'><\/head><body>${html}<\/body><\/html>`;
    return html;
  }
})();