Greasy Fork

Greasy Fork is available in English.

背景変更(Feederチャット)

Feederチャットの背景を変更するスクリプトです。

当前为 2020-05-04 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==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      http://greasyfork.icu/scripts/396472-yaju1919/code/yaju1919.js?version=798050
// @require      http://greasyfork.icu/scripts/387509-yaju1919-library/code/yaju1919_library.js?version=755144
// @require      http://greasyfork.icu/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: "装飾",
    };
})();