优化B站动态页效果
目前为
// ==UserScript==
// @name 优化B站效果
// @namespace http://tampermonkey.net/
// @version 2.2.1
// @description 优化B站动态页效果
// @author O.k
// @license MIT
// @match https://t.bilibili.com/?tab=*
// @match https://t.bilibili.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
(function () {
console.log("B站效果优化");
function delDOMNode(array) {
for (let i = 0; i < array.length; i++) {
let promise = new Promise((resolve, reject) => {
let tempID = window.setInterval(() => {
let temp = document.querySelector(array[i]);
if (temp) {
resolve(temp);
window.clearInterval(tempID);
}
}, 100);
}).then((node) => {
node.remove();
});
}
}
/*
.bili-dyn-version-control__reminding
.right
*/
//删除节点
let delArray = [
".bili-dyn-version-control__reminding",
".right",
".bili-dyn-version-control__btn",
"aside.left > section",
];
delDOMNode(delArray);
// 调整main区（主内容区）的宽度，由于暂时不太懂怎么引用vue，所以先这样写
let main_asideLeft_CSS = `
div#app main{
flex: 10 1;
}
div#app aside.left{
flex: 1 10;
}
`;
//调大部分区域的字体
//.bili-rich-text__content defalut:14px
//.bili-dyn-interaction__item__desc defalut:13px
//.bili-dyn-card-video__title
//.bili-dyn-card-video__desc
let style = document.createElement("style");
//paratext:副文本
let fontStyleString =
`:root{\n
--body-text: 18px;\n
--paratext: 16px;\n
}\n` +
`.bili-rich-text__content,.bili-dyn-card-video__title{\n
font-size: var(--body-text) !important;\n
}\n` +
`.bili-dyn-interaction__item__desc,.bili-dyn-card-video__desc{\n
font-size: var(--paratext) !important;\n
}\n`;
style.innerHTML = fontStyleString + main_asideLeft_CSS;
let headIntervalId = setInterval(() => {
let head = document.head;
if (head) {
head.appendChild(style);
clearInterval(headIntervalId);
}
}, 100);
//当鼠标悬浮并按下s键时，将那个视频添加到稍后再看
//.bili-dyn-card-video 视频整体
//.bili-dyn-card-video__mark 稍后再看按钮
//为当前视频投稿右边添加一个按钮，点击后将视频添加到稍后再看并点赞
let item_body_style = document.createElement("style");
let css = `
.bili-dyn-item__body{
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(2,1fr);
}
.user-add-button{
display: flex;
gap: 20px;
}
.user-add-button > div{
/*影响动画的居中效果*/
display: grid;
background-color: #66ccff;
border-radius: 50%;
height: 129px;
width: 129px;
margin-top: auto;
z-index: 1;
}
.user-add-button > div > div{
border-radius: 50%;
background-color: #d3d3d3;
z-index: 2;
margin: 0 auto;
align-self: center;
overflow: hidden;
text-align: center;
line-height: 129px;
font-size: 25px;
color: white;
transition: all 0.3s;
}
`;
item_body_style.innerHTML = css;
//将CSS插入到head中
{
let id = setInterval(() => {
let head = document.head;
if (head) {
head.appendChild(item_body_style);
clearInterval(id);
}
}, 100);
}
function setButton(item) {
let div = document.createElement("div");
let container = document.createElement("div");
container.setAttribute("class", "user-add-button");
let canvas = document.createElement("canvas");
let see_later = item.querySelector(".bili-dyn-card-video__mark");
let like_button = item
.querySelector(".bili-dyn-item__footer")
.querySelector(".like");
//对原布局进行调整
{
let item_body = item.querySelector(".bili-dyn-item__body");
container.style.setProperty("grid-template-columns", "129px 1fr");
canvas.setAttribute("width", "129");
canvas.setAttribute("height", "105");
canvas.style.setProperty("margin-top", "auto");
container.append(div);
container.append(canvas);
if (
item_body.querySelector(".bili-dyn-item__interaction") == null
) {
item_body.appendChild(container);
} else {
item_body.insertBefore(
container,
item_body.querySelector(".bili-dyn-item__interaction")
);
}
}
//为按钮增加动画效果
let animation = document.createElement("div");
{
animation.textContent = "已成功";
div.appendChild(animation);
animation.style.setProperty("width", "0px");
animation.style.setProperty("height", "0px");
}
div.addEventListener("click", () => {
if (animation.style.getPropertyValue("width") == "0px") {
animation.style.setProperty("width", "129px");
animation.style.setProperty("height", "129px");
} else {
animation.style.setProperty("width", "0px");
animation.style.setProperty("height", "0px");
}
try {
see_later.click();
if (like_button.getAttribute("class").indexOf("active") == -1) {
console.log("you like it");
like_button.click();
}
} catch (e) {
console.error(e);
}
});
//第二次更改方案难以使用，其思路是使用ctx操作像素实现动画，但是由于data:image的图像不是纯色，难以筛选，故放弃
//第三方案，思路是自己绘制路径，然后用clip裁剪以及lineTo的线条(从下到上)，实现动画，像素操作过于难了，而且浪费性能
//按钮右侧复制一个点赞
let like_border = new Path2D(
"M9.72 31.95h2.5V12.37h-2.5zM24.44 9.73h10.42a4.15 4.15 0 013.33 1.67 4.38 4.38 0 01.56 3.47L34.3 29.59a6.37 6.37 0 01-6 4.86H5a4.52 4.52 0 01-4.31-2.36 5.61 5.61 0 01-.69-2.5V14.73a4.93 4.93 0 012.5-4.31A8.38 8.38 0 015 9.73h6.25l6.8-8.49a3.83 3.83 0 016.64 2.94zm10.14 2.51H21.66l.28-2.92.42-5.14a1.26 1.26 0 00-.18-1 1.28 1.28 0 00-.82-.56 1.11 1.11 0 00-1.25.42l-6.36 8.2-.83 1.11H4.58a2 2 0 00-.83.28 2.28 2.28 0 00-1.25 2.08v14.88a2 2 0 00.42 1.25A2 2 0 005 31.95h23.33a2.38 2.38 0 001.39-.41 3.61 3.61 0 002.08-2.78l4.44-14.58 2.5.56-2.5-.56a2.45 2.45 0 00-.14-1.39 2.89 2.89 0 00-1.52-.54l.28-2.5z"
);
let like_clip = new Path2D(
"M9.72 31.95M24.44 9.73h10.42a4.15 4.15 0 013.33 1.67 4.38 4.38 0 01.56 3.47L34.3 29.59a6.37 6.37 0 01-6 4.86H5a4.52 4.52 0 01-4.31-2.36 5.61 5.61 0 01-.69-2.5V14.73a4.93 4.93 0 012.5-4.31A8.38 8.38 0 015 9.73h6.25l6.8-8.49a3.83 3.83 0 016.64 2.94z"
);
try {
let ctx = canvas.getContext("2d");
if (!ctx) throw new Error("ctx is null");
ctx.save();
ctx.scale(3, 3);
ctx.fillStyle = "#d3d3d3";
ctx.fill(like_border);
//为鼠标移入移出以及点击时添加效果
function mouseoverEvent(e) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00a1d6";
ctx.fill(like_border);
ctx.save();
ctx.clip(like_clip);
}
function mouseoutEvent(e) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#d3d3d3";
ctx.fill(like_border);
}
canvas.addEventListener("mouseover", mouseoverEvent);
canvas.addEventListener("mouseout", mouseoutEvent);
canvas.addEventListener("click", (e) => {
canvas.removeEventListener("mouseout", mouseoutEvent);
canvas.removeEventListener("mouseover", mouseoverEvent);
ctx.fillStyle = "#00a1d6";
requestAnimationFrame(clickAnimeFunction);
like_button.click();
});
let clickAnimeFunction = clickAnime.bind();
let animeTime = 0;
//用于实现反向动画
function clickAnime() {
if (canvas.height - animeTime < 0) {
window.cancelAnimationFrame(clickAnimeFunction);
animeTime = 0;
console.log("anime end");
return;
}
ctx.fillRect(
0,
canvas.height - 10 - animeTime,
canvas.width,
3
);
animeTime += 3;
window.requestAnimationFrame(clickAnimeFunction);
}
} catch (e) {
console.error(e);
}
}
//将显示视频时长的文字转移到播放量旁边
function setVideoTimeFont(item) {
let videoTime = item.querySelector(
".bili-dyn-card-video__duration"
).textContent;
let positionNode = item.querySelector(".bili-dyn-item__footer");
let newVideoTime = document.createElement("div");
{
newVideoTime.style.setProperty("width", "92px");
newVideoTime.style.setProperty("width", "48px");
newVideoTime.style.setProperty("line-height", "48px");
newVideoTime.style.setProperty("font-size", "20px");
}
newVideoTime.textContent = videoTime;
positionNode.appendChild(newVideoTime);
}
let videoList = [];
setInterval(() => {
let video = document.querySelector(".bili-dyn-list__items").children;
if (video.length > 0) {
videoList = video;
videoList.forEach((item) => {
//通过querySelector确认有没有超链接标签<a>，过滤非视频的动态
if (
item.querySelector(".bili-dyn-content__orig__major") ==
null ||
item
.querySelector(".bili-dyn-content__orig__major")
.querySelector("a") == null
) {
return;
}
if (item.getAttribute("data-userJs") == null) {
item.setAttribute("data-userJs", "true");
setButton(item);
setVideoTimeFont(item);
}
});
}
}, 1000);
// Your code here...
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址