random-usercss-button
↓アイコン用画像
CSSを雑に変更する。CSSを読み込む。settings 、自分のページでした設定のほうが優先される。リロードすればリセットされる。
urls.js export const urls = [ "/api/code/scrasobox/settings/style.css",
"/api/code/masui/settings/style.css",
"/api/code/daiiz/settings/style.css",
"/api/code/rashitaactivity/settings/style.css",
"/api/code/shiology/settings/style.css",
"/api/code/syunichisuge/settings/style.css",
"/api/code/memooooo/settings/style.css",
"/api/code/ColumbusDays/settings/style.css",
"/api/code/kemsso/settings/style.css",
"/api/code/habakan/settings/style.css",
"/api/code/progfay-pub/Dark_Theme_CSS/style.css",
"/api/code/rokoucha/Dark_theme/full-dark.css",
"/api/code/suto3/Scrapbox:ビーバー君/style.css",
"/api/code/cd/settings/style.css" ]; button.js(async () => {
const path = "/api/code/villagepump/random-usercss-button/urls.js";
await import(path).then((obj) => {
const url = obj.urls[Math.floor(Math.random()*obj.urls.length)]
console.log(url);
const cssId = '__bgi__';
let style = document.getElementById(cssId)
style?.remove()
document.head.insertAdjacentHTML('beforeend',`
<style id="${cssId}">
@import "${url}";
</style>
`);
});
})()button2.js export async function execute() {
const path = "/api/code/villagepump/random-usercss-button/urls.js";
await import(path).then((obj) => {
const url = obj.urls[Math.floor(Math.random()*obj.urls.length)]
console.log(url);
const cssId = '__bgi__';
let style = document.getElementById(cssId)
//if (style){ style.remove() }
style?.remove()
document.head.insertAdjacentHTML('beforeend',`
<style id="${cssId}">
@import "${url}";
</style>
`)
});
}script.js // UserCSSをランダムに変更する UserScript
scrapbox.PageMenu.addItem({
title: "random-usercss",
image: "https://gyazo.com/7b7f44a26a61a17ce7dc34001d25c2ad/raw",
onClick: async () => {
const path = "/api/code/villagepump/random-usercss-button/urls.js";
await import(path).then((obj) => {
const url = obj.urls[Math.floor(Math.random()*obj.urls.length)];
console.log(url);
const cssId = '__bgi__';
let style = document.getElementById(cssId);
style?.remove();
document.head.insertAdjacentHTML('beforeend',`
<style id="${cssId}">
@import "${url}";
</style>
`);
});
}
});↓これがアイコンボタン
これ面白い
てか、こんなふうに動的にCSSを読み込むことが出来たのか
さすがにそろそろボタン名とアイコンをもう少しわかりやすく変更したほうがいいと思うのですが、いかがでしょうか？
アイコンボタンのデモとしての役割は終わったと思います。
ボタン名とアイコンを変更しました
ボタン名 suto3-button → random-usercss-button
元ネタ