random-usercss-button

UserCSSをランダムに変更する、アイコンボタンのテスト（CSSの変更）

/scrapboxlab/UserScript版アイコンボタン

↓アイコン用画像

https://gyazo.com/7b7f44a26a61a17ce7dc34001d25c2ad

CSSを雑に変更する。CSSを読み込む。settings 、自分のページでした設定のほうが優先される。リロードすればリセットされる。

code: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" ];

code:button.js

(async () => {

const path = "/api/code/villagepump/random-usercss-button/urls.js";

await import(path).then((obj) => {

const url = obj.urlsMath.floor(Math.random()*obj.urls.length)

console.log(url);

const cssId = '__bgi__';

let style = document.getElementById(cssId)

style?.remove()

document.head.insertAdjacentHTML('beforeend',`

@import "${url}";

</style>

`);

});

})()

code:button2.js

export async function execute() {

const path = "/api/code/villagepump/random-usercss-button/urls.js";

await import(path).then((obj) => {

const url = obj.urlsMath.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',`

@import "${url}";

</style>

});

}

code: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.urlsMath.floor(Math.random()*obj.urls.length);

console.log(url);

const cssId = '__bgi__';

let style = document.getElementById(cssId);

style?.remove();

document.head.insertAdjacentHTML('beforeend',`

@import "${url}";

</style>

`);

});

}

});

↓これがアイコンボタン

random-usercss-button.icon

これ面白いtakker.iconkuuote.icon

てか、こんなふうに動的にCSSを読み込むことが出来たのか

さすがにそろそろボタン名とアイコンをもう少しわかりやすく変更したほうがいいと思うのですが、いかがでしょうか？suto3.icon

アイコンボタンのデモとしての役割は終わったと思います。

ボタン名とアイコンを変更しました

ボタン名 suto3-button → random-usercss-button

js-script-button.icon

元ネタ

/daiiz/おみくじ-button

/scrasobox/禅モード (Zen mode)

#UserScript

#icon-button