☰

editor html

try to take over the world!

  1. // ==UserScript==
  2. // @name         editor html
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  try to take over the world!
  6. // @author       Enoch
  7. // @match        https://www.oppo.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=zhinan.tech
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.     const textNodes = [];
  15.     // 遍历 DOM 树，寻找只包含文本的节点
  16.     function findTextNodes(node) {
  17.         if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().length > 0) {
  18.             textNodes.push(node);
  19.         } else {
  20.             for (const childNode of node.childNodes) {
  21.                 findTextNodes(childNode);
  22.             }
  23.         }
  24.     }
  25.     // 查找只包含文本的节点
  26.     findTextNodes(document.body);
  27.     // 给满足条件的文本节点的父级元素添加背景颜色
  28.     for (const textNode of textNodes) {
  29.         const parentElement = textNode.parentElement;
  30.         const {width,height} = parentElement.getBoundingClientRect();
  31.         parentElement.style.backgroundColor = '#7ea864';
  32.         parentElement.style.width = `${width}px`;
  33.         parentElement.style.height = `${height}px`;
  34.  
  35.     }
  36.  
  37.     // 创建一个开关元素
  38.     const switchElement = document.createElement('input');
  39.     switchElement.type = 'checkbox';
  40.     Object.assign(switchElement.style, {
  41.         marginRight: '5px'
  42.     });
  43.  
  44.     const labelElement = document.createElement('label');
  45.     labelElement.textContent = '开启编辑模式';
  46.     Object.assign(labelElement.style, {
  47.         cursor: 'pointer',
  48.         contentEditable: 'false'
  49.     });
  50.  
  51.     const topBar = document.createElement('div');
  52.     Object.assign(topBar.style, {
  53.         position: 'fixed',
  54.         top: '0',
  55.         right: '0',
  56.         backgroundColor: '#f7f7f7',
  57.         padding: '10px',
  58.         zIndex: '100'
  59.     });
  60.     labelElement.appendChild(switchElement);
  61.     topBar.appendChild(labelElement);
  62.     document.body.appendChild(topBar);
  63.  
  64.     // 处理开关按钮的点击事件
  65.     switchElement.addEventListener('change', function() {
  66.         const bodyEditable = switchElement.checked;
  67.         if(bodyEditable){
  68.           labelElement.textContent='关闭编辑模式';
  69.         }else{
  70.           labelElement.textContent='开启编辑模式';
  71.         }
  72.         document.body.contentEditable = bodyEditable;
  73.     });
  74. })();