☰

mws

自用工具库

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/445645/1124334/mws.js 

  1. // ==UserScript==
  2. // @name            Mws Script Utils
  3. // @namespace       https://rachpt.cn/
  4. // @description     Custom Functions for Mws Scripts
  5. // @version    	    1.0.3
  6. // @author          rachpt (https://github.com/rachpt)
  7. // @license         MIT
  8. // @grant           none
  9. // ==/UserScript==
  10.  
  11. var mws = new (class {
  12.   sleep(milliseconds) {
  13.     return new Promise(resolve => {
  14.       setTimeout(() => {
  15.         resolve();
  16.       }, milliseconds);
  17.     });
  18.   }
  19.   async _Step(selector, callback, need_content, timeout, milliseconds) {
  20.     while (timeout--) {
  21.       if (document.querySelector(selector) === null) {
  22.         await this.sleep(milliseconds);
  23.         continue;
  24.       } else {
  25.         if (need_content) {
  26.           if (document.querySelector(selector).innerText.length == 0) {
  27.             await this.sleep(milliseconds);
  28.             continue;
  29.           }
  30.         }
  31.       }
  32.       break;
  33.     }
  34.  
  35.     callback(selector);
  36.   }
  37.   wait(selector, timeout = Infinity, milliseconds = 300, need_content = false) {
  38.     return new Promise(resolve => {
  39.       this._Step(
  40.         selector,
  41.         function (selector) {
  42.           resolve(document.querySelector(selector));
  43.         },
  44.         need_content,
  45.         timeout,
  46.         milliseconds,
  47.       );
  48.     });
  49.   }
  50.  
  51.   _ReadFileAsync(file) {
  52.     return new Promise((resolve, reject) => {
  53.       const reader = new FileReader();
  54.       reader.onload = () => {
  55.         resolve(reader.result);
  56.       };
  57.       reader.onerror = reject;
  58.       reader.readAsDataURL(file);
  59.     });
  60.   }
  61.  
  62.   async _Img2Base64(url) {
  63.     try {
  64.       const imgBlob = await fetch(url).then(res => res.blob());
  65.       return await this._ReadFileAsync(imgBlob);
  66.     } catch (error) {
  67.       return 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj4gPHBhdGggZmlsbD0iIzRFNTA1NSIgZD0iTTIyNCAxMzZWMEgyNEMxMC43IDAgMCAxMC43IDAgMjR2NDY0YzAgMTMuMyAxMC43IDI0IDI0IDI0aDMzNmMxMy4zIDAgMjQtMTAuNyAyNC0yNFYxNjBIMjQ4Yy0xMy4yIDAtMjQtMTAuOC0yNC0yNHptMTYwLTE0LjF2Ni4xSDI1NlYwaDYuMWM2LjQgMCAxMi41IDIuNSAxNyA3bDk3LjkgOThjNC41IDQuNSA3IDEwLjYgNyAxNi45eiI+PC9wYXRoPiA8L3N2Zz4=';
  68.     }
  69.   }
  70.   /**
  71.    * 生成带 Badge 的网站 Icon
  72.    * @param {string} url Icon 地址
  73.    * @param {string} env 环境文字
  74.    * @param {string} color 文字颜色, 默认黑色
  75.    * @param {string} bgColor Badge背景色, 默认金色
  76.    * @returns
  77.    */
  78.   async genBadgedFavicon(url, env, color = '#fff', bgColor = '#ff9800') {
  79.     const img = await this._Img2Base64(url);
  80.     return `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  81.     <foreignObject x="0" y="0" width="100%" height="100%">
  82.         <body xmlns="http://www.w3.org/1999/xhtml">
  83.             <style>
  84.                 html,
  85.                 body {
  86.                     height: 100%;
  87.                     margin: 0;
  88.                     text-align: center;
  89.                 }
  90.                 img {
  91.                     display: block;
  92.                     width: 100%;
  93.                     height: 100%;
  94.                     object-fit: contain;
  95.                 }
  96.                 strong {
  97.                     position: absolute;
  98.                     bottom: 0;
  99.                     left: 50%;
  100.                     transform: translateX(-50%);
  101.                     text-transform: uppercase;
  102.                     background-color: ${bgColor};
  103.                     color: ${color};
  104.                     padding: 0px 1px;
  105.                     border-radius: 2px;
  106.                     font-size: 11px;
  107.                     box-sizing: border-box;
  108.                     max-width: 100%;
  109.                     width: max-content;
  110.                     height: 16px;
  111.                     line-height: 16px;
  112.                     word-break: break-all;
  113.                     overflow: hidden;
  114.                 }
  115.             </style>
  116.             <strong>${env}</strong>
  117.             <img src='${img}'></img>
  118.         </body>
  119.       </foreignObject>
  120.     </svg>`
  121.       .replace(/\n/g, '')
  122.       .replace(/\t/g, '')
  123.       .replace(/#/g, '%23');
  124.   }
  125. })();