Greasy Fork is available in English.
Feederチャットの背景を変更するスクリプトです。
// ==UserScript==
// @name 背景変更(Feederチャット)
// @namespace http://tampermonkey.net/
// @version 0.8
// @description Feederチャットの背景を変更するスクリプトです。
// @author You
// @match *.x-feeder.info/*/
// @match *.x-feeder.info/*/sp/
// @exclude *.x-feeder.info/*/settings/**
// @require https://greasyfork.org/scripts/396472-yaju1919/code/yaju1919.js?version=798050
// @require https://greasyfork.org/scripts/387509-yaju1919-library/code/yaju1919_library.js?version=755144
// @require https://greasyfork.org/scripts/388005-managed-extensions/code/Managed_Extensions.js?version=720959
// @grant GM.setValue
// @grant GM.getValue
// ==/UserScript==
(function() {
'use strict';
// カスタマイズ領域
const debugInfoColor = "lightyellow"; // デバッグ情報の色
const debugInfoBorderRadius = "8px"; // デバッグ情報の枠の角
//-----------------
let inputBoolBtn, inputDebugBoolBtn, inputChangeInterval, inputImgURL, inputFilterColor, inputFilterOpacity, inputBlur, inputBrightness, inputSaturate, inputSepia;
const addBtn = (h, title, func) => {
return $("<button>").text(title).click(func).appendTo(h);
};
const backgroundColor_copy = $("#wrapper").css("backgroundColor");
const backgroundImage_copy = $("body").css("backgroundImage");
const setConfig = () => {
const h = $("<div>");
let start_flag = false;
let exeFunc = () => start_flag ? funcMainAndChange() : null;
inputBoolBtn = yaju1919.addInputBool(h, {
title: "壁紙変更",
value: false,
change: exeFunc,
});
inputDebugBoolBtn = yaju1919.addInputBool(h, {
title: "デバッグ情報",
value: false,
change: exeFunc,
});
let debugInfoTitle = $("<div>").appendTo(h); // "デバッグ情報"と表示する要素
let debugInfo = $("<ul>").appendTo(h); // デバッグ情報を表示する要素
inputChangeInterval = yaju1919.addInputNumber(h, {
title: "切り替え時間",
placeholder: "背景画像の切り替え時間(単位:秒)",
save: "AM_inputChangeInterval",
width: "90%",
value: 10,
min: 10,
max: Infinity,
change: exeFunc,
});
inputImgURL = yaju1919.addInputText(h, {
title: "画像のURL",
placeholder: "背景にしたい画像のURLを入力(複数の場合は改行で区切って入力)",
save: "AM_inputImgURL",
width: "90%",
textarea: true,
change: exeFunc,
});
inputFilterColor = yaju1919.addInputText(h, {
title: "フィルタの色",
placeholder: "カラーコードを入力(空の場合は黒色)",
save: "AM_inputFilterColor",
width: "90%",
change: exeFunc,
});
let h2 = $("<div>").appendTo(h);
inputFilterOpacity = yaju1919_library.appendInputRange(h, {
save: "AM_inputFilterOpacity",
width: "90%",
value: 0,
min: 0,
max: 100,
step: 1,
change: exeFunc,
});
let h3 = $("<div>").appendTo(h);
inputBlur = yaju1919_library.appendInputRange(h, {
save: "AM_inputBlur",
width: "90%",
value: 0,
min: 0,
max: 100,
step: 1,
change: exeFunc,
});
let h4 = $("<div>").appendTo(h);
inputBrightness = yaju1919_library.appendInputRange(h, {
save: "AM_inputBrightness",
width: "90%",
value: 100,
min: 0,
max: 500,
step: 1,
change: exeFunc,
});
let h5 = $("<div>").appendTo(h);
inputSaturate = yaju1919_library.appendInputRange(h, {
save: "AM_inputSaturate",
width: "90%",
value: 100,
min: 0,
max: 200,
step: 1,
change: exeFunc,
});
let h6 = $("<div>").appendTo(h);
inputSepia = yaju1919_library.appendInputRange(h, {
save: "AM_inputSepia",
width: "90%",
value: 0,
min: 0,
max: 100,
step: 1,
change: exeFunc,
});
addBtn(h, "初期値に戻す", () => {
let e = h.find("input");
e.eq(4).val(0);
e.eq(5).val(0);
e.eq(6).val(100);
e.eq(7).val(100);
e.eq(8).val(0);
exeFunc();
});
const removeBgImg = () => { // 背景画像を削除
$("body").children().each((i, e) => e.style.zIndex === "-114515" ? $(e).remove() : null);
$("body").removeAttr('style').css({
"backgroundImage": "url(" + backgroundImage_copy + ")",
});
yaju1919.setBgImg(null, {
opacity: 0
});
$("#wrapper").css({
"backgroundColor": backgroundColor_copy
});
};
const removeDebugInfo = () => { // デバッグ情報を削除
debugInfo.empty();
debugInfoTitle.text("").removeAttr('style');
debugInfo.removeAttr('style');
};
let count = 0;
const main = () => {
const boolBtn = inputBoolBtn();
const debugBoolBtn = inputDebugBoolBtn();
const changeInterval = inputChangeInterval();
const imgURL = inputImgURL();
const filterColor = inputFilterColor();
const filterOpacity = inputFilterOpacity();
// CSSのfilterプロパティに関する値
const blur = inputBlur();
const brightness = inputBrightness();
const saturate = inputSaturate();
const sepia = inputSepia();
//--------------------------------
const imgURLs = imgURL.split("\n").filter(v => v);
const filter = `blur(${blur}px) brightness(${brightness}%) saturate(${saturate}%) sepia(${sepia}%)` // CSSのfilterプロパティ
// 調整バーの数値表示
h2.text(`フィルタの透明度 : ${filterOpacity}`);
h3.text(`ぼかしの強度 : ${blur}`);
h4.text(`画像の明るさ : ${brightness}`);
h5.text(`彩度 : ${saturate}`);
h6.text(`セピア : ${sepia}`);
//-------------------
if (count > imgURLs.length - 1) {
count = 0;
};
// デバッグ情報を表示
if (!debugBoolBtn) {
removeDebugInfo();
} else {
removeDebugInfo();
debugInfoTitle.text("デバッグ情報").css({
"color": debugInfoColor,
});
debugInfo.css({
"border": "5px solid",
"border-color": debugInfoColor,
"border-radius": debugInfoBorderRadius,
});
let debugInfoText = `inputBoolBtn : ${boolBtn}\ninputDebugBoolBtn : ${debugBoolBtn}\ninputChangeInterval : ${changeInterval}\ninputImgURL : ${imgURL}\ninputFilterColor : ${filterColor}\ninputFilterOpacity : ${filterOpacity}\ninputBlur : ${blur}\ninputBrightness : ${brightness}\ninputSaturate : ${saturate}\ninputSepia : ${sepia}\nimgURLs : ${imgURLs}\nfilter : ${filter}\ncount : ${count}\nimgURLs[count] : ${imgURLs[count]}\nimgURLs.length : ${imgURLs.length}`;
let debugInfoArr = debugInfoText.split("\n");
let debugInfoElm;
for (let i = 0; i < debugInfoArr.length; i++) {
debugInfoElm = $("<li>").appendTo(debugInfo);
debugInfoElm.text(debugInfoArr[i]).css({
"list-style": "none",
"border": "1px solid",
"border-color": debugInfoColor,
"color": debugInfoColor,
});
};
};
//-------------------
if (imgURL === "" || !boolBtn) {
removeBgImg();
} else {
removeBgImg();
$("#wrapper").css({
"backgroundColor": "transparent"
});
yaju1919.setBgImg(imgURLs[count], {
color: filterColor,
opacity: Number(filterOpacity) / 100
});
let elm = $("<div>").appendTo($("body"));
elm.css({
"z-index": "-114515",
"background": "inherit",
"-webkit-filter": filter,
"-moz-filter": filter,
"-o-filter": filter,
"-ms-filter": filter,
"filter": filter,
"position": "fixed",
"top": "0px",
"left": "0px",
"right": "0px",
"bottom": "0px",
});
count++
};
};
let si, change = () => {
{
if (!inputChangeInterval) return;
const changeInterval = inputChangeInterval();
clearInterval(si);
si = setInterval(main, changeInterval * 1000);
};
};
const funcMainAndChange = () => {
change();
main();
};
start_flag = true;
// 起動時に調整バーの数値を読み込む
main();
let st = setTimeout(() => {
// 調整バーの数値表示
h2.text(`フィルタの透明度 : ${inputFilterOpacity()}`);
h3.text(`ぼかしの強度 : ${inputBlur()}`);
h4.text(`画像の明るさ : ${inputBrightness()}`);
h5.text(`彩度 : ${inputSaturate()}`);
h6.text(`セピア : ${inputSepia()}`);
//-------------------
clearTimeout(st);
});
//---------------------------------
return h;
};
win.Managed_Extensions["背景変更"] = {
config: setConfig,
tag: "装飾",
};
})();