URLからCSSの検証をするUserScript
指定したURLからCSSを一時的に検証するUserScript
CSPの関係上、scrapbox.io以外が提供しているCSSは読み込めない（多分） サンプル
code:script.ts
manageCSS();
本体
code:managecss.ts
/// <reference no-default-lib="true" />
/// <reference lib="es2022" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
import {
AlertMode,
buildInButtons,
Button,
scrapboxAlert,
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 };
},
},
};
ADD_DELETE_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();
}
}
}
変換済みのソースコード
Mijinko_SD.iconの個人用なので後に削除される可能性あり
code:managecss.js
function b(){let t,n;return{promise:new Promise((o,r)=>{t,n=o,r}),resolve:t||(()=>{}),reject:n||(()=>{})}}function E(t){let n="";for(lete,oof Object.entries(t))n+=x(o,e);return n}function x(t,n){let e="",o=[],r=[];for(lets,iof 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=cd,p=t.priorityCancelButtonIndex?ct.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};