ページの背景画像を変更するUserScript

挙動は少しだけ違います

table:list

ラベル URL コメント

使い方

code:sample-script.js

import { setupWallpaperMenu } from "/api/code/villagepump/ページの背景画像を変更するUserScript/script.js";

setupWallpaperMenu("/api/table/villagepump/ページの背景画像を変更するUserScript/list.csv");

を追加

setupWallpaperMenu() 引数にはテーブル記法のAPI（CSVファイル）を指定する

リロード

実行例

https://gyazo.com/d1fcd8aaab7e1aadd8e111db4baf40b6

注意事項

リロード時にCSVファイルを読み込んで、メニューを作り直すので、すこし重い

code:script.js

// NOTE: This file is an ES Module.

/**

* Creates a Scrapbox page menu to set a wallpaper from a list of images in a CSV file.

* @param {string} csvUrl - The URL of the CSV file containing image names and URLs.

*/

export function setupWallpaperMenu(csvUrl) {

// Run only in a Scrapbox environment.

if (typeof scrapbox === "undefined") {

console.log("This script is intended to run in a Scrapbox environment.");

return;

}

scrapbox.PageMenu.addMenu({

title: "壁紙",

onClick: async () => {

const menu = scrapbox.PageMenu("壁紙");

menu.addItem({ title: "Now loading...", onClick: () => null });

try {

const text = await fetchLists(csvUrl);

const urls = [];

const menuItems = [];

// 1. Prepare menu items and a list of valid URLs from the fetched text.

text.split("\n").forEach(line => {

if (!line) return;

const res = line.split(",");

if (imageUrlRegex.test(imageUrl)) {

urls.push(imageUrl);

menuItems.push({

title: name,

onClick: () => { changeCss(imageUrl); }

});

}

});

// 2. Clear the "Now loading..." message.

menu.removeAllItems();

// 3. Add the new menu items.

menu.addItem({

title: "消す",

onClick: () => { changeCss(null); }

});

menuItems.forEach(item => menu.addItem(item));

if (urls.length > 0) {

menu.addItem({

title: "ランダム",

onClick: () => { changeCss(choice(urls)); }

});

}

} catch (error) {

console.error("Failed to load wallpaper list:", error);

menu.removeAllItems();

menu.addItem({ title: "Error: Failed to load", onClick: () => null });

}

}

});

}

// --- Helper Functions (exported for testing) ---

export const fetchLists = async (url) => {

const response = await fetch(url);

if (!response.ok) {

throw new Error("Network response was not ok");

}

const text = await response.text();

// Assuming the CSV has a header row to be skipped (slice(1))

// and lines might start with a comma to be removed.

return text.split("\n").slice(1)

.map(line => line.replace(/^,/, ""))

.join("\n");

};

export const changeCss = (imageUrl) => {

const styleId = "__bgi__";

let style = document.getElementById(styleId);

if (style) {

style.remove();

}

// If imageUrl is not provided, simply remove the style and exit.

if (!imageUrl) {

return;

}

const css = `

.page {

background-image: url("${imageUrl}");

background-repeat: repeat-y;

background-attachment: scroll;

background-position: right top;

background-size: 60% auto;

}

`;

style = document.createElement("style");

style.setAttribute("id", styleId);

style.appendChild(document.createTextNode(css.trim()));

document.head.appendChild(style);

};

export const choice = (arr) => {

if (!arr || arr.length === 0) {

return null;

}

};

// A more robust regex for image URLs.

UserScript.icon