☰

Style for Coze Bot App mode

Make Coze Bot looks better!

  1. // ==UserScript==
  2. // @name         Style for Coze Bot App mode
  3. // @namespace    https://www.velhlkj.com/
  4. // @version      1.1.5
  5. // @description  Make Coze Bot looks better!
  6. // @author       Velade
  7. // @match        https://www.coze.com/store/bot/*
  8. // @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  9. // @grant        none
  10. // @run-at       document-body
  11. // @license      Apache 2.0
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     const style = document.createElement('style');
  18.     style.textContent = `
  19.                     /*官方阴影*/
  20.                     .ULoOs2TMkJkb2BgT_MKa {
  21.                         display: none !important;
  22.                     }
  23.                     /*新对话按钮*/
  24.                     .NyvVfPwFXFYvQFyXUtTl {
  25.                         padding-left: 0 !important;
  26.                     }
  27.                     /*标题列*/
  28.                     .nZxnu8KzOis7qKnDx66E {
  29.                         position: fixed !important;
  30.                         top: 5px !important;
  31.                         right: 5px !important;
  32.                         width: 80px !important;
  33.                         height: 40px !important;
  34.                         filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)) !important;
  35.                     }
  36.  
  37.                     .nZxnu8KzOis7qKnDx66E > div:first-child {
  38.                         display: none !important;
  39.                     }
  40.  
  41.                     .nZxnu8KzOis7qKnDx66E > div:nth-child(2) > div:nth-child(2){
  42.                         display: none !important;
  43.                     }
  44.                     /*对话区域主体*/
  45.                     .O4fwdEnt3QgzBjrYtohO {
  46.                         -webkit-mask: linear-gradient(180deg,hsla(0,0%,100%,0) 5px, #fff calc(8.11% + 5px), #fff 91.89%, hsla(0,0%,100%,0)) !important;
  47.                         mask: linear-gradient(180deg,hsla(0,0%,100%,0) 5px, #fff calc(8.11% + 5px), #fff 91.89%, hsla(0,0%,100%,0)) !important;
  48.                     }
  49.                     /*底部声明：改为导航栏占位*/
  50.                     .pStAbHgTdAlDVUlpMOGP {
  51.                         opacity: 0 !important;
  52.                         height: 5px !important;
  53.                     }
  54.                     .pStAbHgTdAlDVUlpMOGP > span {
  55.                         display: none;
  56.                     }
  57.                     /*斜体样式*/
  58.                     .flow-markdown-body em.proced{
  59.                         display: none !important;
  60.                     }
  61.                     .flow-markdown-body em.vel-em-action {
  62.                         display: block !important;
  63.                         clear: both !important;
  64.                         color: #FF69B4 !important;
  65.                         font-style: normal !important;
  66.                     }
  67.                     .flow-markdown-body em.vel-em-other {
  68.                         display: inline-block !important;
  69.                         clear: none !important;
  70.                         color: #FF69B4 !important;
  71.                         font-style: normal !important;
  72.                     }
  73.     `;
  74.     document.head.appendChild(style);
  75.     
  76.     let pendingNodes = new Array();
  77.  
  78.     let timer = null;
  79.  
  80.     let observer = new MutationObserver(mutations=>{
  81.         mutations.forEach(mutation=>{
  82.             if(mutation.type === 'childList' || mutation.type === "characterData"){
  83.                 let newPush = false;
  84.                 mutation.addedNodes.forEach((node)=>{
  85.                     if(node.matches && (node.matches(".vel-em-action") || node.matches(".vel-em-other"))) return;
  86.                     pendingNodes.push(node);
  87.                     newPush = true;
  88.                 })
  89.                if(newPush) PostProc();
  90.             }
  91.         })
  92.     });
  93.     
  94.     // 获取textnode
  95.     function getTextNodes(ele) {
  96.         if (ele.nodeType == 3) return [ele];
  97.         const nodes = ele.childNodes;
  98.         const textnodes = [];
  99.         for (const i in nodes) {
  100.             if (nodes[i].nodeType == 3) {
  101.                 textnodes.push(nodes[i]);
  102.             } else {
  103.  
  104.                 const r = getTextNodes(nodes[i]);
  105.                 for (const tn of r) {
  106.                     textnodes.push(tn);
  107.                 }
  108.             }
  109.         }
  110.         return textnodes;
  111.     }
  112.     
  113.     // 后处理
  114.     function PostProc(delay = 50) {
  115.         if(timer) clearTimeout(timer);
  116.         timer = setTimeout(()=>{
  117.             const _pendingNodes = [...new Set(pendingNodes)];
  118.             let node;
  119.             while(node = _pendingNodes.shift()) {
  120.                 if(!node.querySelectorAll) continue;
  121.                 if(node.textContent.match(/\*\([^\)]+?\)\*/)) {
  122.                     const nl = getTextNodes(node);
  123.                     for(const n of nl) {
  124.                          if(n.nodeValue.match(/\*\([^\)]+?\)\*/)){
  125.                              const newNode = document.createElement("span");
  126.                              newNode.innerHTML = n.nodeValue.replaceAll(/\*\(([^\)]+?)\)\*/g, `<em class="vel-em-action">$1</em>`);
  127.                              n.replaceWith(newNode);
  128.                          }
  129.                     }
  130.                 }else if(node.tagName.toLowerCase() == "em") {
  131.                     if(node.matches(".proced") || node.matches(".vel-em-action") || node.matches(".vel-em-other")) continue;
  132.                     if(node.textContent.match(/^[\(（].+?[\)）]$/)) {
  133.                         const em = document.createElement("em");
  134.                         em.textContent = node.textContent.replaceAll(/[\(\)（）]/g,"");
  135.                         em.classList.add("vel-em-action");
  136.                         node.classList.add("proced");
  137.                         node.after(em);
  138.                     }
  139.                     else node.classList.add("vel-em-other");
  140.                 }else if(node.matches(".math-inline")){
  141.                     if(node.parentElement.querySelector(".vel-em-action")) continue;
  142.                     const em = document.createElement("em");
  143.                     em.textContent = node.textContent.replaceAll(/[\(\)（）]/g,"");
  144.                     em.classList.add("vel-em-action");
  145.                     node.parentElement.classList.remove("vel-em-other");
  146.                     node.parentElement.classList.add("proced");
  147.                     node.parentElement.after(em);
  148.                 }else{
  149.                     node.querySelectorAll(`em:not(.vel-em-action, .vel-em-other)`).forEach(n=>{
  150.                         if(n.textContent.match(/^[\(（].+?[\)）]$/)) {
  151.                             if(n.parentElement.querySelector(".vel-em-action")) return;
  152.                             const em = document.createElement("em");
  153.                             em.textContent = n.textContent.replaceAll(/[\(\)（）]/g,"");
  154.                             em.classList.add("vel-em-action");
  155.                             n.classList.add("proced");
  156.                             n.after(em);
  157.                         }
  158.                         else n.classList.add("vel-em-other");
  159.                     })
  160.                 }
  161.             }
  162.         }, delay);
  163.     }
  164.     const config = { childList: true, subtree: true,characterData: true };
  165.     const targetNode = document.body;
  166.     observer.observe(targetNode, config);
  167. })();