☰

临时style

临时在页面添加style

  1. // ==UserScript==
  2. // @name         临时style
  3. // @namespace    http://webidea.top/
  4. // @version      1.0.0
  5. // @description  临时在页面添加style
  6. // @author       TamsChan
  7. // @match        *://*/*
  8. // @icon         https://wiki.greasespot.net/favicon.ico
  9. // @grant        GM_getValue
  10. // @grant        GM_setValue
  11. // @grant        GM_addStyle
  12. // @grant        GM_addElement
  13. // @grant        GM_log
  14. // @license MIT
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.   'use strict';
  19.  
  20.   // var css_style = document.createElement("style");
  21.   // css_style.innerHTML = `#temporary-style{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-moz-box-orient:horizontal;-moz-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;position:fixed;right:0;top:50%;z-index:9999999999;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}#temporary-style .left-btn{border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:#242685;}#temporary-style .left-btn .icon{display:block;width:30px;height:30px;cursor:pointer;}#temporary-style .left-btn .icon:nth-child(2){display:none;}#temporary-style .right-textarea-box{width:300px;background-color:#ffffff;-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.3);box-shadow:0 0 10px 0 rgba(0,0,0,0.3);-webkit-transition:all 0.3s;-o-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;border-top-left-radius:5px;border-bottom-left-radius:5px;}#temporary-style .right-textarea-box .right-textarea{padding:5px;}#temporary-style .right-textarea-box .right-textarea #temporary-style-textarea{width:100%;height:200px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:5px;font-size:18px;-webkit-box-shadow:none;box-shadow:none;border:1px solid rgba(0,0,0,0.3);border-radius:5px;}#temporary-style .right-textarea-box .right-textarea #temporary-style-sub{display:block;width:80px;height:40px;border-radius:8px;font-size:18px;color:#ffffff;background-color:#25a178;margin-top:5px;margin-left:auto;cursor:pointer;}`;
  22.   // document.body.appendChild(css_style);
  23.   GM_addStyle(`#temporary-style{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-moz-box-orient:horizontal;-moz-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;position:fixed;right:0;top:50%;z-index:9999999999;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}#temporary-style .left-btn{position:absolute;left:0;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%);border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:#242685;}#temporary-style .left-btn .icon{display:block;width:30px;height:30px;cursor:pointer;}#temporary-style .left-btn .icon:nth-child(2){display:none;}#temporary-style .right-textarea-box{width:300px;background-color:#ffffff;-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.3);box-shadow:0 0 10px 0 rgba(0,0,0,0.3);-webkit-transition:all 0.3s;-o-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;border-top-left-radius:5px;border-bottom-left-radius:5px;}#temporary-style .right-textarea-box .right-textarea{padding:5px;}#temporary-style .right-textarea-box .right-textarea #temporary-style-textarea{width:100%;height:200px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:5px;font-size:18px;-webkit-box-shadow:none;box-shadow:none;border:1px solid rgba(0,0,0,0.3);border-radius:5px;}#temporary-style .right-textarea-box .right-textarea #temporary-style-sub{display:block;width:80px;height:40px;border-radius:8px;font-size:18px;color:#ffffff;background-color:#25a178;margin-top:5px;margin-left:auto;cursor:pointer;}`);
  24.  
  25.   let ls_style = "";
  26.   if(GM_getValue("style_text")){
  27.     ls_style = GM_getValue("style_text");
  28.     let temporary_style_style = document.createElement("style");
  29.     temporary_style_style.id = "temporary-style-style";
  30.     temporary_style_style.innerHTML = ls_style;
  31.     document.body.appendChild(temporary_style_style);
  32.   };
  33.  
  34.   var pupout_dom = document.createElement("div");
  35.   let _html = `<div id="temporary-style"><div class="left-btn"><svg t="1692849893736"id="temporary-open"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="1100"width="200"height="200"><path d="M561.92 192a47.36 47.36 0 0 1 0 64l-256 256 256 256a47.36 47.36 0 0 1-64 64L206.08 545.92A50.56 50.56 0 0 1 192 512a47.36 47.36 0 0 1 14.08-33.28L494.72 192a47.36 47.36 0 0 1 67.2 0z"p-id="1101"fill="#ffffff"></path><path d="M817.92 192a47.36 47.36 0 0 1 0 64l-256 256 256 256a47.36 47.36 0 0 1-64 64L462.08 545.92A50.56 50.56 0 0 1 448 512a47.36 47.36 0 0 1 14.08-33.28L750.72 192a47.36 47.36 0 0 1 67.2 0z"p-id="1102"fill="#ffffff"></path></svg><svg t="1692849333938"id="temporary-close"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="1240"width="200"height="200"><path d="M462.08 192a47.36 47.36 0 0 0 0 64l256 256-256 256a47.36 47.36 0 1 0 64 64l288.64-288.64A50.56 50.56 0 0 0 832 512a47.36 47.36 0 0 0-14.08-33.28L529.28 192a47.36 47.36 0 0 0-67.2 0z"p-id="1241"fill="#ffffff"></path><path d="M206.08 192a47.36 47.36 0 0 0 0 64l256 256-256 256a47.36 47.36 0 1 0 64 64l291.84-286.08A50.56 50.56 0 0 0 576 512a47.36 47.36 0 0 0-14.08-33.28L273.28 192a47.36 47.36 0 0 0-67.2 0z"p-id="1242"fill="#ffffff"></path></svg></div><div class="right-textarea-box"style="width: 0;"><div class="right-textarea"><textarea id="temporary-style-textarea"cols="30"rows="10">${ls_style}</textarea><button id="temporary-style-sub">生成</button></div></div></div>`;
  36.   pupout_dom.innerHTML = _html
  37.   document.body.appendChild(pupout_dom);
  38.  
  39.   document.addEventListener("click", function (event) {
  40.     let open_list = document.querySelectorAll("#temporary-open *");
  41.     let open_f = false;
  42.     for (let o_item of open_list) {
  43.       if (o_item == event.target){
  44.         open_f = true
  45.         break
  46.       }
  47.     }
  48.     let close_list = document.querySelectorAll("#temporary-close *");
  49.     let close_f = false;
  50.     for (let c_item of close_list) {
  51.       if (c_item == event.target){
  52.         close_f = true
  53.         break
  54.       }
  55.     }
  56.     if (event.target == document.getElementById("temporary-open") || open_f) {
  57.       document.querySelector("#temporary-style .right-textarea-box").style.width = "300px";
  58.       document.getElementById("temporary-open").style.display = "none";
  59.       document.getElementById("temporary-close").style.display = "block";
  60.     }
  61.     if (event.target == document.getElementById("temporary-close") || close_f) {
  62.       document.querySelector("#temporary-style .right-textarea-box").style.width = "0px";
  63.       document.getElementById("temporary-close").style.display = "none";
  64.       document.getElementById("temporary-open").style.display = "block";
  65.     }
  66.     if (event.target == document.getElementById("temporary-style-sub")) {
  67.       let style_text = document.getElementById("temporary-style-textarea").value;
  68.       GM_setValue("style_text", style_text);
  69.       if(document.getElementById("temporary-style-style")){
  70.         let temporary_style_style = document.getElementById("temporary-style-style");
  71.         temporary_style_style.innerHTML = style_text;
  72.       } else {
  73.         let temporary_style_style = document.createElement("style");
  74.         temporary_style_style.id = "temporary-style-style";
  75.         temporary_style_style.innerHTML = style_text;
  76.         document.body.appendChild(temporary_style_style);
  77.       }
  78.     }
  79.   });
  80. })();