更改ab站背景的懒人脚本，引用vue和jquery优化
// ==UserScript==
// @name AB站网页背景更改2
// @description 更改ab站背景的懒人脚本，引用vue和jquery优化
// @icon http://github.smiku.site/sakura.png
// @license MIT
// @bilibili https://space.bilibili.com/29058270
// @github https://github.com/wuxintlh/
// @githubBoke https://wuxintlh.github.io
// @acfun https://www.acfun.cn/u/57391284
// @version 2.0.0.2-release
// @author 桜ミク
// @match *www.bilibili.com/*
// @match *://*.bilibili.com/*
// @match *message.bilibili.com/*
// @match *t.bilibili.com/*
// @match *manga.bilibili.com/*
// @match *live.bilibili.com/blackboard/*
// @match *www.bilibili.com/page-proxy/*
// @match *www.acfun.cn/*
// @match *.acfun.cn/*
// @exclude *live.bilibili.com/p/html/live-lottery/*
// @exclude *message.bilibili.com/pages/nav/index_new_pc_sync*
// @exclude *t.bilibili.com/pages/nav/index_new*
// @exclude *member.bilibili.com/x2/creative/*
// @exclude *member.bilibili.com/video/*
// @exclude *ink.bilibili.com/p/center/course/index.html*
// @exclude *www.bilibili.com/v/pay/charge*
// @exclude *message.acfun.cn/*
// @exclude *www.bilibili.com/bangumi*
// @exclude *account.bilibili.com/account/*
// @exclude *cm.bilibili.com/quests/*
// @exclude *member.bilibili.com/platform*
// @exclude *pay.bilibili.com/pay-v2-web*
// @QQgroup 793513923
// @QQgroup https://jq.qq.com/?_wv=1027&k=0ewDiWw1
// @grant none
// @require https://greasyfork.org/scripts/445358-ab%E7%AB%99%E8%83%8C%E6%99%AF%E6%9B%B4%E6%94%B9css/code/ab%E7%AB%99%E8%83%8C%E6%99%AF%E6%9B%B4%E6%94%B9css.js?version=1053244
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @require https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
// @namespace https://greasyfork.org/users/599643
// ==/UserScript==
//#region 初始化脚本运行
var screenHeight, bcurl, host, host_name, domain_name, ab_chosen, body, main, path_name, el_body;
var SakuraVue;
$("window").ready(function() {
setTimeout(function() {
//#region 初始化变量
// try {
bcurl = getBcurl();
if (bcurl == null || bcurl == 'undefined') {
bcurl = "https://img1.imgtp.com/2022/05/19/qqKLSTQo.png";
}
screenHeight = document.documentElement.clientHeight;
domain_name = document.domain;
host = window.location.host;
path_name = window.location.pathname;
body = $('body')[0];
while (true) {
if (domain_name.indexOf("bilibili") != -1) {
ab_chosen = 0;
break;
} else if (domain_name.indexOf("acfun") != -1) {
ab_chosen = 1;
break;
} else {
console.error("背景脚本可能出现意料之外的错误,错误原因发生在匹配ab站");
break;
}
}
while (true) {
if (ab_chosen == 0) {
host = window.location.host;
if (host == 'live.bilibili.com') {
host_name = 0;
el_body;
break;
} else {
host_name = 1;
el_body;
break;
}
} else if (ab_chosen == 1) {
host = window.location.host;
var aUrl = document.location;
if (aUrl.pathname == '\/') {
host_name = 0;
el_body;
break;
} else {
host_name = 1;
el_body;
break;
}
} else {
console.error("背景脚本可能出现意料之外的错误,错误原因发生在匹配域名的情况下");
break;
}
}
//#endregion
//#region 打开网页时设置背景
setTimeout(function() {
setBackgroundImage(bcurl, ab_chosen)
}, 3000);
//#endregion
//#region 初始化vue
el_body = getElBody(ab_chosen);
//设置背景更改的盒子
setTimeout(function() {
setBackgroundBox(el_body);
}, 2000);
var default_background_url = [
['https://i0.hdslb.com/bfs/article/d12fee446e2533206e0b04024c39e00a40c4bc4c.png@1320w_912h.webp',
'https://i0.hdslb.com/bfs/article/54616fdbb9bed40ea2cf8540f8517b11c9aa4ad3.jpg@1320w_868h.webp',
'https://img1.imgtp.com/2022/05/19/qqKLSTQo.png',
'https://i0.hdslb.com/bfs/album/658ab52e2d631f9d974112e2d5b4cab476e3f61d.jpg',
'https://i0.hdslb.com/bfs/vc/c255f51c594cf6e724fb9f04975fae7e7eb8b876.jpg@2000w_1e.webp',
'https://w.wallhaven.cc/full/o3/wallhaven-o31p97.jpg'
],
['https://w.wallhaven.cc/full/g8/wallhaven-g8kd37.jpg',
'https://img.tt98.com/d/file/96kaifa/201905101622281/001.jpg',
'https://img.tt98.com/d/file/tt98/2019092618001803/001.jpg',
'https://w.wallhaven.cc/full/g7/wallhaven-g79ov3.jpg',
'https://w.wallhaven.cc/full/rd/wallhaven-rdyyjm.png',
'https://w.wallhaven.cc/full/o3/wallhaven-o31p97.jpg'
]
];
//初始化框架
setTimeout(function() {
$("window").ready(function() {
el_body = "#sakuraBackgroundBox";
SakuraVue = new Vue({
el: el_body,
data: {
default_url: default_background_url[ab_chosen]
},
methods: {
defaultBackgroundChange: function(src) {
//设置背景
setBackgroundImage(src, ab_chosen);
setBcurl(src);
},
diyBackgroundChange: function() {
if ($("#diyInput").val() == "" || $("#diyInput").val() == null) {
alert("请不要输入空值");
return null;
} else {
//设置背景
var src = $("#diyInput").val();
setBackgroundImage(src, ab_chosen);
setBcurl(src);
}
},
displayChangeBox: function() {
var changeBox = $(".ChangeBox")[0];
changeBox.style.display = changeBox.style.display == "none" ? "block" : "none";
},
diyBase64Change: function() {
var file = $("#base64Pic")[0].files[0];
var reader = new FileReader();
if (file) {
reader.readAsDataURL(file);
reader.onloadend = function() {
// console.log(reader.result);
setBackgroundImage(reader.result, ab_chosen);
}
} else {
alert("请上传一张图片");
}
}
},
});
});
}, 3000);
//#endregion
// } catch (err) {
// console.error("背景程序出现致命错误，这样的错误发生在程序主体,此为报错信息：" + err);
// }
//#endregion
}, 0)
});
//#region 封装代码
//获取bcurl
function getBcurl() {
var bcurl = window.localStorage.getItem('bcurl');
return bcurl;
}
function setBcurl(url) {
window.localStorage.setItem('bcurl', url);
return true;
}
//设置背景
function setBackgroundImage(url, ab_chosen) {
var div, main, app, body = $("body")[0];
setBcurl(url)
if (ab_chosen == 0) {
if ($("#app").length > 0) {
app = $("#app")[0];
app.style.background = 'url(' + url + ') center 0px/cover';
app.style.backfroundRepeat = 'no-repeat';
app.style.backgroundPosition = 'center center';
app.style.backgroundSize = '100% 100%';
app.style.zIndex = '-1';
app.style.webkitBackgroundSize = 'cover';
app.style.backgroundAttachment = "fixed";
} else {
if ($(".SakuraBackground").length > 0) {
div = $(".SakuraBackground")[0];
} else {
div = document.createElement("div");
body.appendChild(div);
}
div.style.background = 'url(' + url + ')';
div.style.backfroundRepeat = 'no-repeat';
div.style.position = 'fixed';
div.style.backgroundPosition = 'center center';
div.style.backgroundSize = 'cover';
div.style.zoom = '1';
div.style.width = '100%';
div.style.height = '100%';
div.style.top = '0';
div.style.left = '0';
div.style.webkitBackgroundSize = 'cover';
div.style.zIndex = '-1';
div.className = 'SakuraBackground';
}
} else if (ab_chosen == 1) {
if ($("#main").length > 0) {
main = $("#main")[0];
main.style.background = 'url(' + url + ') center 0px/cover';
main.style.backfroundRepeat = 'no-repeat';
main.style.backgroundPosition = 'center center';
main.style.backgroundSize = '100% 100%';
main.style.zIndex = '-1';
main.style.webkitBackgroundSize = 'cover';
main.style.backgroundAttachment = "fixed";
main.className = 'SakuraBackground';
} else {
if ($(".SakuraBackground").length > 0) {
div = $(".SakuraBackground")[0];
} else {
div = document.createElement("div");
body.appendChild(div);
}
div.style.backgroundImage = 'url(' + url + ')';
div.style.backfroundRepeat = 'no-repeat';
div.style.position = 'fixed';
div.style.backgroundPosition = 'center center';
div.style.backgroundSize = 'cover';
div.style.zoom = '1';
div.style.width = '100%';
div.style.height = '100%';
div.style.top = '0';
div.style.left = '0';
div.style.webkitBackgroundSize = 'cover';
div.style.zIndex = '-1';
div.className = 'SakuraBackground';
}
}
}
//获取el
function getElBody(ab_chosen) {
var el_body;
if (ab_chosen == 0) {
if ($("#app").length > 0) {
el_body = "#app";
} else {
el_body = "body";
}
} else {
if ($("#main").length > 0) {
el_body = "#main";
} else {
el_body = "body";
}
}
return el_body;
}
//在el下添加html
function setBackgroundBox(el_body) {
var father_node = $(el_body)[0];
var background_box = document.createElement("div");
father_node.appendChild(background_box);
background_box.innerHTML = `
<button class="clickButton" v-on:click="displayChangeBox()">更改背景</button>
<div class="ChangeBox">
<h4>更改背景</h4>
<div class="defaultBox">
<img :src="default_url[0]" alt="" class="defaultImage" v-on:click="defaultBackgroundChange(default_url[0])">
<img :src="default_url[1]" alt="" class="defaultImage" v-on:click="defaultBackgroundChange(default_url[1])">
<img :src="default_url[2]" alt="" class="defaultImage" v-on:click="defaultBackgroundChange(default_url[2])">
<img :src="default_url[3]" alt="" class="defaultImage" v-on:click="defaultBackgroundChange(default_url[3])">
<img :src="default_url[4]" alt="" class="defaultImage" v-on:click="defaultBackgroundChange(default_url[4])">
<img :src="default_url[5]" alt="" class="defaultImage" v-on:click="defaultBackgroundChange(default_url[5])">
</div>
<div class="diyBox">
<input type="text" name="" id="diyInput" placeholder="请输入背景URL">
<button id="diySubmit" v-on:click="diyBackgroundChange()" accept="image/png,image/webp">点击修改</button>
<input type="file" name="" id="base64Pic">
<button id="diySubmit" v-on:click="diyBase64Change()">点击修改</button>
</div>
</div>
`;
background_box.id = "sakuraBackgroundBox";
console.log("sakuraBackgroundBox创建完毕");
}
//#endregion