☰

临时style

临时在页面添加style

// ==UserScript==
// @name         临时style
// @namespace    http://webidea.top/
// @version      1.0.0
// @description  临时在页面添加style
// @author       TamsChan
// @match        *://*/*
// @icon         https://wiki.greasespot.net/favicon.ico
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// @grant        GM_addElement
// @grant        GM_log
// @license MIT
// ==/UserScript==

(function() {
  'use strict';

  // var css_style = document.createElement("style");
  // 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;}`;
  // document.body.appendChild(css_style);
  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;}`);

  let ls_style = "";
  if(GM_getValue("style_text")){
    ls_style = GM_getValue("style_text");
    let temporary_style_style = document.createElement("style");
    temporary_style_style.id = "temporary-style-style";
    temporary_style_style.innerHTML = ls_style;
    document.body.appendChild(temporary_style_style);
  };

  var pupout_dom = document.createElement("div");
  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>`;
  pupout_dom.innerHTML = _html
  document.body.appendChild(pupout_dom);

  document.addEventListener("click", function (event) {
    let open_list = document.querySelectorAll("#temporary-open *");
    let open_f = false;
    for (let o_item of open_list) {
      if (o_item == event.target){
        open_f = true
        break
      }
    }
    let close_list = document.querySelectorAll("#temporary-close *");
    let close_f = false;
    for (let c_item of close_list) {
      if (c_item == event.target){
        close_f = true
        break
      }
    }
    if (event.target == document.getElementById("temporary-open") || open_f) {
      document.querySelector("#temporary-style .right-textarea-box").style.width = "300px";
      document.getElementById("temporary-open").style.display = "none";
      document.getElementById("temporary-close").style.display = "block";
    }
    if (event.target == document.getElementById("temporary-close") || close_f) {
      document.querySelector("#temporary-style .right-textarea-box").style.width = "0px";
      document.getElementById("temporary-close").style.display = "none";
      document.getElementById("temporary-open").style.display = "block";
    }
    if (event.target == document.getElementById("temporary-style-sub")) {
      let style_text = document.getElementById("temporary-style-textarea").value;
      GM_setValue("style_text", style_text);
      if(document.getElementById("temporary-style-style")){
        let temporary_style_style = document.getElementById("temporary-style-style");
        temporary_style_style.innerHTML = style_text;
      } else {
        let temporary_style_style = document.createElement("style");
        temporary_style_style.id = "temporary-style-style";
        temporary_style_style.innerHTML = style_text;
        document.body.appendChild(temporary_style_style);
      }
    }
  });
})();