☰

測試選單

測試選單介面

  1. // ==UserScript==
  2. // @name         測試選單
  3. // @namespace    test-menu
  4. // @version      1.0.0
  5. // @description  測試選單介面
  6. // @author       Test
  7. // @match        *://*/*
  8. // @grant        GM_registerMenuCommand
  9. // @grant        GM_unregisterMenuCommand
  10. // @grant        GM_setValue
  11. // @grant        GM_getValue
  12. // @grant        GM_listValues
  13. // @grant        GM_deleteValue
  14. // @grant        GM_download
  15. // @grant        GM_xmlhttpRequest
  16. // @grant        GM_setClipboard
  17. // ==/UserScript==
  18.  
  19. (function() {
  20.     'use strict';
  21.  
  22.     // 語言包
  23.     const lang = {
  24.         set: '設置',
  25.         iconPosition: '圖標位置',
  26.         playVideo: '視頻解析',
  27.         playMusic: '音樂下載',
  28.         zhNice: '知乎增強',
  29.         videoDownload: '視頻下載',
  30.         iconHeight: '圖標高度',
  31.         iconWidth: '圖標大小',
  32.         iconLine: '水平位置',
  33.         iconWaitTime: '等待時間',
  34.         iconLeft: '靠左',
  35.         iconRight: '靠右',
  36.         tipIconHeight: '默認360,建議1~500',
  37.         tipIconWidth: '默認40,建議20~50',
  38.         tipIconOpacity: '請填寫0-100的整數',
  39.         setPlayVideo: '解析設置',
  40.         playVideoLineAdd: '站外解析',
  41.         tipPlayVideoLineAdd: '請填入線路名稱和地址，中間用半角逗號隔開，每線路一行。',
  42.         zhSet: '知乎設置',
  43.         zhVideoClose: '屏蔽視頻',
  44.         zhVideoDownload: '視頻下載',
  45.         zhADClose: '屏蔽廣告',
  46.         zhCloseLeft: '關閉側邊欄',
  47.         zhChangeLink: '鏈接直接跳轉',
  48.         specialColumn: '標記文章',
  49.         videoTitle: '標記視頻',
  50.         scriptsinstall: '腳本安裝',
  51.         scriptsuse: '使用方法',
  52.         question: '常見問題',
  53.         tggroup: 'Telegram'
  54.     };
  55.  
  56.     class TestMenu {
  57.         constructor() {
  58.             this.initMenu();
  59.             this.iconVipTop = 360;
  60.             this.iconVipPosition = 'left';
  61.         }
  62.  
  63.         initMenu() {
  64.             GM_registerMenuCommand(lang.set, () => this.menuSet());
  65.             this.setStyle();
  66.         }
  67.  
  68.         setStyle() {
  69.             const domStyle = document.createElement('style');
  70.             const domHead = document.getElementsByTagName('head')[0];
  71.  
  72.             let menuSetStyle = `
  73.                 .zhmMask{
  74.                     z-index:999999999;
  75.                     background-color:#000;
  76.                     position: fixed;top: 0;right: 0;bottom: 0;left: 0;
  77.                     opacity:0.8;
  78.                 }
  79.                 .zhm_wrap-box{
  80.                     z-index:1000000000;
  81.                     position:fixed;top: 50%;left: 50%;transform: translate(-50%, -200px);
  82.                     width: 300px;
  83.                     color: #555;
  84.                     background-color: #fff;
  85.                     border-radius: 5px;
  86.                     overflow:hidden;
  87.                     font:16px numFont,PingFangSC-Regular,Tahoma,Microsoft Yahei,sans-serif !important;
  88.                     font-weight:400 !important;
  89.                 }
  90.                 .zhm_setWrapLi{
  91.                     margin:0px;padding:0px;
  92.                 }
  93.                 .zhm_setWrapLi li{
  94.                     background-color: #fff;
  95.                     border-bottom:1px solid #eee;
  96.                     margin:0px !important;
  97.                     padding:12px 20px;
  98.                     display: flex;
  99.                     justify-content: space-between;align-items: center;
  100.                     list-style: none;
  101.                 }
  102.                 .zhm_setWrapLiContent{
  103.                     display: flex;justify-content: space-between;align-items: center;
  104.                 }
  105.                 .zhm_iconSetFoot{
  106.                     position:absolute;bottom:0px;padding:10px 20px;width:100%;
  107.                     z-index:1000000009;background:#fef9ef;
  108.                 }
  109.                 .zhm_iconSetFootLi{
  110.                     margin:0px;padding:0px;
  111.                 }
  112.                 .zhm_iconSetFootLi li{
  113.                     display: inline-flex;
  114.                     padding:0px 2px;
  115.                     justify-content: space-between;align-items: center;
  116.                     font-size: 12px;
  117.                 }
  118.                 .zhm_iconSetFootLi li a{
  119.                     color:#555;
  120.                 }
  121.                 .zhm_iconSetPage{
  122.                     z-index:1000000001;
  123.                     position:absolute;top:0px;left:300px;
  124.                     background:#fff;
  125.                     width:300px;
  126.                     height:100%;
  127.                     display:none;
  128.                 }
  129.                 .zhm_iconSetUlHead{
  130.                     padding:0px;
  131.                     margin:0px;
  132.                 }
  133.                 .zhm_iconSetPageHead{
  134.                     border-bottom:1px solid #ccc;
  135.                     height:40px;
  136.                     line-height:40px;
  137.                     display: flex;
  138.                     justify-content: space-between;
  139.                     align-items: center;
  140.                     background-color:#fe6d73;
  141.                     color:#fff;
  142.                     font-size: 15px;
  143.                 }
  144.                 .zhm_iconSetPageLi{
  145.                     margin:0px;padding:0px;
  146.                 }
  147.                 .zhm_iconSetPageLi li{
  148.                     list-style: none;
  149.                     padding:8px 20px;
  150.                     border-bottom:1px solid #eee;
  151.                 }
  152.                 .zhm_back{
  153.                     border: solid #FFF;
  154.                     border-width: 0 3px 3px 0;
  155.                     display: inline-block;
  156.                     padding: 3px;
  157.                     transform: rotate(135deg);
  158.                     -webkit-transform: rotate(135deg);
  159.                     margin-left:10px;
  160.                     cursor:pointer;
  161.                 }
  162.                 .zhm_to-right{
  163.                     margin-left:20px;
  164.                     display: inline-block;
  165.                     padding: 3px;
  166.                     transform: rotate(-45deg);
  167.                     -webkit-transform: rotate(-45deg);
  168.                     cursor:pointer;
  169.                     border: solid #CCC;
  170.                     border-width: 0 3px 3px 0;
  171.                 }
  172.                 .zhm_to-right.disabled{
  173.                     border-color: #EEE;
  174.                     cursor: default;
  175.                 }
  176.                 .zhm_circular{
  177.                     width: 40px;
  178.                     height: 20px;
  179.                     border-radius: 16px;
  180.                     transition: .3s;
  181.                     cursor: pointer;
  182.                     box-shadow: 0 0 3px #999 inset;
  183.                 }
  184.                 .zhm_round-button{
  185.                     width: 20px;
  186.                     height: 20px;
  187.                     border-radius: 50%;
  188.                     box-shadow: 0 1px 5px rgba(0,0,0,.5);
  189.                     transition: .3s;
  190.                     position: relative;
  191.                 }
  192.                 .zhm_text-input {
  193.                     font-size: 16px;
  194.                     position: relative;
  195.                     right:0px;
  196.                     z-index: 0;
  197.                 }
  198.                 .zhm_text-input__body {
  199.                     -webkit-appearance: none;
  200.                     background-color: transparent;
  201.                     border: 1px solid #c2c2c2;
  202.                     border-radius: 3px;
  203.                     height: 1.7em;
  204.                     line-height: 1.7;
  205.                     padding: 2px 1em;
  206.                     width:55%;
  207.                     font-size:14px;
  208.                     box-sizing: initial;
  209.                 }
  210.                 .zhm_select-box {
  211.                     box-sizing: inherit;
  212.                     font-size: 16px;
  213.                     position: relative;
  214.                     width:90px;
  215.                 }
  216.                 .zhm_select-box__body {
  217.                     -webkit-appearance: none;
  218.                     background-color: transparent;
  219.                     border: 1px solid #c2c2c2;
  220.                     border-radius: 3px;
  221.                     cursor: pointer;
  222.                     height: 1.7em;
  223.                     line-height: 1.7;
  224.                     padding-left: 1em;
  225.                     padding-right: calc(1em + 16px);
  226.                     width: 140%;
  227.                     font-size:14px;
  228.                     padding-top:2px;
  229.                     padding-bottom:2px;
  230.                 }
  231.                 .zhm_toLeftMove{
  232.                     animation:moveToLeft 0.5s infinite;
  233.                     -webkit-animation:moveToLeft 0.5s infinite;
  234.                     animation-iteration-count:1;
  235.                     animation-fill-mode: forwards;
  236.                 }
  237.                 @keyframes moveToLeft{
  238.                     from {left:300px;}
  239.                     to {left:0px;}
  240.                 }
  241.                 @-webkit-keyframes moveToLeft{
  242.                     from {left:300px;}
  243.                     to {left:0px;}
  244.                 }
  245.                 .zhm_toRightMove{
  246.                     animation:moveToRight 0.5s infinite;
  247.                     -webkit-animation:moveToRight 0.5s infinite;
  248.                     animation-iteration-count:1;
  249.                     animation-fill-mode: forwards;
  250.                 }
  251.                 @keyframes moveToRight{
  252.                     from {left:0px;}
  253.                     to {left:300px;}
  254.                 }
  255.                 @-webkit-keyframes moveToRight{
  256.                     from {left:0px;}
  257.                     to {left:300px;}
  258.                 }
  259.             `;
  260.             
  261.             domStyle.appendChild(document.createTextNode(menuSetStyle));
  262.             domHead.appendChild(domStyle);
  263.         }
  264.  
  265.         menuSet() {
  266.             // 選單設置數據
  267.             const setListJson = [
  268.                 {listName:lang.iconPosition, setListID:'iconPositionSetPage', setPageID:'movieIconSetPage', takePlace:'0px'},
  269.                 {listName:lang.playVideo, setListID:'movieList', setPageID:'movieVideoSetPage', takePlace:'0px'},
  270.                 {listName:lang.playMusic, setListID:'musicList', setPageID:'', takePlace:''},
  271.                 {listName:lang.zhNice, setListID:'zhihuList', setPageID:'zhihuIconSetPage', takePlace:'220px'},
  272.                 {listName:lang.videoDownload, setListID:'videoDownloadList', setPageID:'videoDownloadSetPage', takePlace:'0px'},
  273.                 {listName:'夜間模式', setListID:'blackmodeList', setPageID:'', takePlace:''}
  274.             ];
  275.  
  276.             // 創建主選單HTML
  277.             let setHtml = '<div id="setMask" class="zhmMask"></div>';
  278.             setHtml += '<div class="zhm_wrap-box" id="setWrap">';
  279.             
  280.             // 添加設置選單標題
  281.             setHtml += `
  282.             <ul class='zhm_iconSetUlHead'>
  283.                 <li class='zhm_iconSetPageHead'>
  284.                     <span></span>
  285.                     <span>${lang.set}</span>
  286.                     <span class='zhm_iconSetSave'>×</span>
  287.                 </li>
  288.             </ul>`;
  289.  
  290.             // 圖標位置設置頁面
  291.             setHtml += `
  292.             <div class='zhm_iconSetPage' id='movieIconSetPage'>
  293.                 <ul class='zhm_iconSetUlHead'>
  294.                     <li class='zhm_iconSetPageHead'>
  295.                         <span class='zhm_back'></span>
  296.                         <span>${lang.iconPosition}</span>
  297.                         <span class='zhm_iconSetSave'>×</span>
  298.                     </li>
  299.                 </ul>
  300.                 <ul class='zhm_iconSetPageLi'>
  301.                     <li>${lang.iconHeight}：
  302.                         <span class='zhm_text-input'>
  303.                             <input class='zhm_text-input__body' id='iconTop' value='${this.iconVipTop}' placeholder='${lang.tipIconHeight}'>
  304.                         </span>
  305.                     </li>
  306.                     <li>${lang.iconLine}：
  307.                         <div class='zhm_select-box'>
  308.                             <select class='zhm_select-box__body' id='iconPosition'>
  309.                                 <option value='left' ${this.iconVipPosition=='left'?'selected':''}>${lang.iconLeft}</option>
  310.                                 <option value='right' ${this.iconVipPosition=='right'?'selected':''}>${lang.iconRight}</option>
  311.                             </select>
  312.                         </div>
  313.                     </li>
  314.                 </ul>
  315.             </div>`;
  316.  
  317.             // 視頻解析設置頁面
  318.             setHtml += `
  319.             <div class='zhm_iconSetPage' id='movieVideoSetPage'>
  320.                 <ul class='zhm_iconSetUlHead'>
  321.                     <li class='zhm_iconSetPageHead'>
  322.                         <span class='zhm_back'></span>
  323.                         <span>${lang.setPlayVideo}</span>
  324.                         <span class='zhm_iconSetSave'>×</span>
  325.                     </li>
  326.                 </ul>
  327.                 <ul class='zhm_iconSetPageLi'>
  328.                     <li>
  329.                         <span>${lang.playVideoLineAdd}</span>
  330.                         <div class='zhm_circular' id='videoPlayLineAdd' style='background-color:#FFE5E5'>
  331.                             <div class='zhm_round-button' style='background:#fe6d73;left:22px'></div>
  332.                         </div>
  333.                     </li>
  334.                     <li>
  335.                         <textarea id='playVideoLineTextarea' placeholder='${lang.tipPlayVideoLineAdd}' style='width:100%;height:200px;'></textarea>
  336.                     </li>
  337.                 </ul>
  338.             </div>`;
  339.  
  340.             // 知乎增強設置頁面
  341.             setHtml += `
  342.             <div class='zhm_iconSetPage' id='zhihuIconSetPage'>
  343.                 <ul class='zhm_iconSetUlHead'>
  344.                     <li class='zhm_iconSetPageHead'>
  345.                         <span class='zhm_back'></span>
  346.                         <span>${lang.zhSet}</span>
  347.                         <span class='zhm_iconSetSave'>×</span>
  348.                     </li>
  349.                 </ul>
  350.                 <ul class='zhm_iconSetPageLi'>
  351.                     <li>
  352.                         <span>${lang.zhVideoClose}</span>
  353.                         <div class='zhm_circular' id='removeVideo' style='background-color:#FFF'>
  354.                             <div class='zhm_round-button' style='background:#fff;left:0px'></div>
  355.                         </div>
  356.                     </li>
  357.                     <li>
  358.                         <span>${lang.zhVideoDownload}</span>
  359.                         <div class='zhm_circular' id='downloadVideo' style='background-color:#FFE5E5'>
  360.                             <div class='zhm_round-button' style='background:#fe6d73;left:22px'></div>
  361.                         </div>
  362.                     </li>
  363.                 </ul>
  364.             </div>`;
  365.  
  366.             // 主選單列表
  367.             setHtml += '<ul class="zhm_setWrapLi">';
  368.             
  369.             setListJson.forEach(item => {
  370.                 const listValue = GM_getValue(item.setListID, item.setListID=='blackmodeList'?'0':'22');
  371.                 const backColor = listValue != '22' ? '#fff' : '#fe6d73';
  372.                 const switchBackColor = listValue != '22' ? '#FFF' : '#FFE5E5';
  373.                 
  374.                 setHtml += `
  375.                 <li>
  376.                     <span>${item.listName}</span>
  377.                     <div class='zhm_setWrapLiContent'>
  378.                         <div class='zhm_circular' style='background-color:${switchBackColor}' id='${item.setListID}'>
  379.                             <div class='zhm_round-button' style='background:${backColor};left:${listValue}px'></div>
  380.                         </div>
  381.                         <span class='zhm_to-right ${!item.setPageID ? "disabled" : ""}' ${item.setPageID ? `data='${item.setPageID}' takePlace='${item.takePlace}'` : ""}></span>
  382.                     </div>
  383.                 </li>`;
  384.             });
  385.  
  386.             setHtml += '</ul>';
  387.             
  388.             // 底部
  389.             setHtml += `
  390.             <div class='zhm_iconSetFoot'>
  391.                 <ul class='zhm_iconSetFootLi'>
  392.                     <li><a href='https://t.me/+sGo6ZZvy54wzYTll' target='_blank'>${lang.tggroup}</a></li>
  393.                 </ul>
  394.             </div>`;
  395.  
  396.             setHtml += '</div>';
  397.  
  398.             // 添加到頁面
  399.             const div = document.createElement('div');
  400.             div.id = 'zhmMenu';
  401.             div.innerHTML = setHtml;
  402.             document.body.appendChild(div);
  403.  
  404.             // 綁定事件
  405.             this.bindEvents();
  406.         }
  407.  
  408.         bindEvents() {
  409.             // 開關按鈕點擊
  410.             document.querySelectorAll('.zhm_circular').forEach(item => {
  411.                 item.addEventListener('click', (e) => {
  412.                     const button = e.currentTarget.querySelector('.zhm_round-button');
  413.                     const currentLeft = parseInt(button.style.left);
  414.                     const newLeft = currentLeft == 0 ? 22 : 0;
  415.                     
  416.                     button.style.left = newLeft + 'px';
  417.                     button.style.background = newLeft == 22 ? '#fe6d73' : '#fff';
  418.                     e.currentTarget.style.backgroundColor = newLeft == 22 ? '#FFE5E5' : '#fff';
  419.                     
  420.                     GM_setValue(e.currentTarget.id, newLeft);
  421.                 });
  422.             });
  423.  
  424.             // 次級選單切換
  425.             document.querySelectorAll('.zhm_to-right:not(.disabled)').forEach(item => {
  426.                 item.addEventListener('click', (e) => {
  427.                     const pageId = e.currentTarget.getAttribute('data');
  428.                     const page = document.getElementById(pageId);
  429.                     page.style.display = 'block';
  430.                     page.className = 'zhm_iconSetPage zhm_toLeftMove';
  431.                 });
  432.             });
  433.  
  434.             // 返回按鈕
  435.             document.querySelectorAll('.zhm_back').forEach(item => {
  436.                 item.addEventListener('click', (e) => {
  437.                     const page = e.currentTarget.closest('.zhm_iconSetPage');
  438.                     page.className = 'zhm_iconSetPage zhm_toRightMove';
  439.                     setTimeout(() => {
  440.                         page.style.display = 'none';
  441.                     }, 500);
  442.                 });
  443.             });
  444.  
  445.             // 關閉按鈕
  446.             document.querySelectorAll('.zhm_iconSetSave').forEach(item => {
  447.                 item.addEventListener('click', () => {
  448.                     document.getElementById('zhmMenu').remove();
  449.                 });
  450.             });
  451.         }
  452.     }
  453.  
  454.     new TestMenu();
  455. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址