/Mijinko/URLからCSSの検証をするUserScript

generated at 10/17/2024, 3:11:20 AM
URLからCSSの検証をするUserScript
指定したURLからCSSを一時的に検証するUserScript
CSPの関係上、 scrapbox.io 以外が提供しているCSSは読み込めない（多分）

サンプル
JavaScript形式のソースコードを生成する
script.tsimport { manageCSS } from "https://scrapbox.io/api/code/Mijinko/URLからCSSの検証をするUserScript/managecss.js";
manageCSS();

本体
JavaScript形式のソースコードを生成する
managecss.ts/// <reference no-default-lib="true" />
/// <reference lib="es2022" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />

import {
  AlertMode,
  buildInButtons,
  Button,
  scrapboxAlert,
} from "https://scrapbox.io/api/code/Mijinko/input-dialog-userscript@1.0.1/scrapboxAlert.ts";

const buttons: { [K in string]: Button } = {
  ADD: {
    label: "追加",
    useInputForm: true,
    onClick: (from) => {
      return { button: "ADD", inputValue: from.InputValue };
    },
    className: "button-ADD",
  },
  DELETE: {
    label: "削除",
    useInputForm: true,
    onClick: (from) => {
      return { button: "DELETE", inputValue: from.InputValue };
    },
  },
};

const modes: { [K in string]: AlertMode } = {
  ADD_DELETE_CANCEL: {
    buttons: [buttons.ADD, buttons.DELETE, buildInButtons.CANCEL],
    priorityCancelButtonIndex: 2,
  },
};

export async function manageCSS() {
  const answer = await scrapboxAlert(
    modes.ADD_DELETE_CANCEL,
    "CSSのURLを入力してください",
  );
  if (answer.inputValue === undefined) return;
  switch (answer.button) {
    case "ADD":
      applyCSS(answer.inputValue);
      break;
    case "DELETE":
      removeCSS(answer.inputValue);
      break;
    default:
      break;
  }
}

function applyCSS(cssSrc: string) {
  const existLinks = document.head.getElementsByTagName("link");
  for (const el of existLinks) {
    if (el.getAttribute("href") == cssSrc) {
      return;
    }
  }

  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = cssSrc;
  document.head.appendChild(link);
}

function removeCSS(cssSrc: string) {
  const existLinks = document.head.getElementsByTagName("link");
  for (const el of existLinks) {
    if (el.getAttribute("href") == cssSrc) {
      el.remove();
    }
  }
}

変換済みのソースコード
の個人用なので後に削除される可能性あり
managecss.jsfunction b(){let t,n;return{promise:new Promise((o,r)=>{[t,n]=[o,r]}),resolve:t||(()=>{}),reject:n||(()=>{})}}function E(t){let n="";for(let[e,o]of Object.entries(t))n+=x(o,e);return n}function x(t,n){let e="",o=[],r=[];for(let[s,i]of Object.entries(t))typeof i=="number"||typeof i=="string"?r.push({name:s,value:i}):o.push({name:s,style:i});if(r.length>0){let s=n,i="";for(let a of r)i+=`${a.name}:${a.value};`;e+=`${s}{${i}}`}if(o.length>0)for(let s of o){let i=B(s.name,n);e+=x(s.style,i)}return e}function B(t,n){let e=n===void 0?"":n.trim(),o=t.trim();return o.includes("&")?o.replace("&",e):e+" "+o}var g={"#background":{position:"fixed","z-index":2e3,top:"40px",width:"100%",height:"100%","background-color":"hsl(0deg 0% 0% / 50%)"},".alert-bg":{position:"absolute",display:"block",width:"100%",height:"100%","background-color":"transparent"},".container":{position:"absolute",display:"flex","max-width":"50em",top:"60px",left:"1em",right:"1em",margin:"auto",padding:"1em 1.2em 1.2em","font-size":"15px",border:"1px solid black","border-radius":"10px","flex-direction":"column","background-color":"hsl(0deg 0% 100% / 85%)",".title":{margin:"0 0 5px","font-size":"1.2em","font-weight":900},".description":{margin:"0 0 5px"},".input-area":{textarea:{width:"100%",height:"5em"}},".button-area":{display:"flex","flex-direction":"row","justify-content":"space-evenly",button:{padding:"5px","min-width":"5em",border:"solid 2px hsl(0deg 0% 42%)","border-radius":"10px"}}}};var l={OK:{label:"OK",useInputForm:!1,onClick:()=>({button:"OK"}),className:"button-OK"},CANCEL:{label:"キャンセル",useInputForm:!1,onClick:()=>({button:"CANCEL"}),className:"button-CANCEL"},YES:{label:"はい",useInputForm:!1,onClick:()=>({button:"YES"}),className:"button-YES"},NO:{label:"いいえ",useInputForm:!1,onClick:()=>({button:"NO"}),className:"button-NO"},ENTER:{label:"決定",useInputForm:!0,onClick:t=>({button:"ENTER",inputValue:t.InputValue}),className:"button-ENTER"}};var C=[];function A(t){let{type:n,listener:e}=t;document.addEventListener(n,e),C.push({type:n,listener:e})}function v(){for(let t of C)document.removeEventListener(t.type,t.listener)}var k="scrapbox-alert",I={OK:{buttons:[l.OK],priorityCancelButtonIndex:0},OK_CANCEL:{buttons:[l.OK,l.CANCEL],priorityCancelButtonIndex:1},YES_NO:{buttons:[l.YES,l.NO]},YES_NO_CANCEL:{buttons:[l.YES,l.NO,l.CANCEL],priorityCancelButtonIndex:2},ENTER:{buttons:[l.ENTER],priorityEnterButtonIndex:0}};async function h(t=I.OK,n,e,o){let{background:r,inputArea:s,buttonArea:i}=L(n,e),a=document.createElement("textarea"),m=b();T(t.buttons)&&(o&&(a.textContent=o),s.append(a));let c=w(t.buttons,m,a);i.append(...c);let d=t.priorityEnterButtonIndex?t.priorityEnterButtonIndex:0,f=c[d],p=t.priorityCancelButtonIndex?c[t.priorityCancelButtonIndex]:void 0;return a.addEventListener("keydown",u=>{u.key==="Enter"&&u.ctrlKey&&!u.shiftKey&&!u.altKey&&!u.metaKey&&f.click()}),r.onclick=()=>{p&&p.click()},p&&A({type:"keydown",listener:u=>{u.key==="Escape"&&!u.ctrlKey&&!u.shiftKey&&!u.altKey&&!u.metaKey&&p.click()}}),m.promise}function L(t,n){let e=document.createElement("div");e.id=k,document.body.append(e);let o=e.attachShadow({mode:"open"}),r=document.createElement("div");r.id="background";let s=document.createElement("style");s.textContent=E(g);let i=document.createElement("div");i.className="alert-bg";let a=document.createElement("div");a.className="container";let m=document.createElement("p");m.className="title",m.textContent=t||"";let c=document.createElement("div");if(c.className="description",n){let p=n.split(`
`);for(let u of p){let y=document.createElement("span");y.textContent=u;let S=document.createElement("br");c.append(y,S)}}let d=document.createElement("div");d.className="input-area";let f=document.createElement("div");return f.className="button-area",a.append(m,c,d,f),r.append(i,a,s),o.append(r),{background:i,inputArea:d,buttonArea:f}}function D(){let t=document.getElementById(k);t!==null&&(v(),t.remove())}function w(t,n,e){let o=[];for(let r of t){let s=document.createElement("button");s.textContent=r.label,r.className&&s.classList.add(r.className),s.onclick=()=>{function i(){return r.useInputForm?(console.log(`textContent: ${e?.value}`),e?.value?r.onClick({InputValue:e?.value}):r.onClick({InputValue:""})):r.onClick(void 0)}n.resolve(i()),D()},o.push(s)}return o}function T(t){for(let n of t)if(n.useInputForm)return!0;return!1}var N={ADD:{label:"追加",useInputForm:!0,onClick:t=>({button:"ADD",inputValue:t.InputValue}),className:"button-ADD"},DELETE:{label:"削除",useInputForm:!0,onClick:t=>({button:"DELETE",inputValue:t.InputValue})}},K={ADD_DELETE_CANCEL:{buttons:[N.ADD,N.DELETE,l.CANCEL],priorityCancelButtonIndex:2}};async function et(){let t=await h(K.ADD_DELETE_CANCEL,"CSSのURLを入力してください");if(t.inputValue!==void 0)switch(t.button){case"ADD":O(t.inputValue);break;case"DELETE":M(t.inputValue);break;default:break}}function O(t){let n=document.head.getElementsByTagName("link");for(let o of n)if(o.getAttribute("href")==t)return;let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)}function M(t){let n=document.head.getElementsByTagName("link");for(let e of n)e.getAttribute("href")==t&&e.remove()}export{et as manageCSS};