Skip to content

Commit

Permalink
bili 0.1.5
Browse files Browse the repository at this point in the history
  • Loading branch information
@Trrrrw
Trrrrw committed Jan 30, 2024
1 parent b802801 commit 502b98c
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 36 deletions.
26 changes: 16 additions & 10 deletions Bilibili-Search-Beautification.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,35 @@

## 安装
👉👉[点击此处安装](https://greasyfork.org/zh-CN/scripts/458903-b%E7%AB%99%E6%90%9C%E7%B4%A2%E9%A1%B5%E7%BE%8E%E5%8C%96)👈👈
> 确保您的浏览器安装有 **Tampermonkey 脚本管理器扩展（[Chrome](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=zh)** / **[Firefox](https://addons.mozilla.org/zh-CN/firefox/addon/tampermonkey/)** / **[Edge](https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd)）。**
> 确保您的浏览器安装有 **Tampermonkey 脚本管理器扩展（[Chrome](https://chromewebstore.google.com/detail/%E7%AF%A1%E6%94%B9%E7%8C%B4/dhdgffkkebhmkfjojejmpbldmpobfkfo)** / **[Firefox](https://addons.mozilla.org/zh-CN/firefox/addon/tampermonkey/)** / **[Edge](https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd)）。**
## 功能
- 美化页面
- 左上角图标点击链接替换为`https://search.bilibili.com/all`，首页移至悬浮窗内
- 背景图片是`bgimg`，修改其链接即可修改背景图片。
- 效果图：
![homepage](https://cdn.staticaly.com/gh/Trrrrw/UserScript/main/docs/src/.vuepress/public/assets/image/bili-homepage.webp)
![searching](https://cdn.staticaly.com/gh/Trrrrw/UserScript/main/docs/src/.vuepress/public/assets/image/bili-searching.webp)
![searchresult](https://cdn.staticaly.com/gh/Trrrrw/UserScript/main/docs/src/.vuepress/public/assets/image/bili-searchresult.webp)
![homepage](https://cdn.jsdelivr.net/gh/Trrrrw/UserScript@main/docs/src/.vuepress/public/assets/image/bili-homepage.webp)
![searching](https://cdn.jsdelivr.net/gh/Trrrrw/UserScript@main/docs/src/.vuepress/public/assets/image/bili-searching.webp)
![searchresult](https://cdn.jsdelivr.net/gh/Trrrrw/UserScript@main/docs/src/.vuepress/public/assets/image/bili-searchresult.webp)

## 适配网站
| | 网站链接 |PC|Pad|Phone|
|---------------------------------------------------|-------------------------|--|---|-----|
| ![icon](https://www.bilibili.com/favicon.ico?v=1) | search.bilibili.com/all |✔️|✔️| ✖️ |

## To Do
- [x] 使用本地图片
- [ ] 背景模糊动画
- [x] 搜索结果页面
- [x] 搜索结果页返回

<details> <summary><h2>更新</h2></summary>
- [ ] 搜索结果滚动时卡顿
- [ ] 搜索结果退回搜索主页后页面状态没完全恢复
- [ ] 搜索结果滚动条状态

## 0.1.5
- 去除了右侧滚动条
- 修复搜索结果页面刷新后背景显示为图片的问题
- 将搜索结果顶栏中的logo链接从主页改为搜索页
- 优化设置页面逻辑
- 新增可以将视频设置为背景（暂时只支持视频直连）

<details> <summary><h2>更新历史</h2></summary>

### 0.1.4
- 修复收藏按钮
Expand Down
138 changes: 114 additions & 24 deletions Bilibili-Search-Beautification.user.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// @name B站搜索页美化
// @namespace http://tampermonkey.net/
// @homepage https://github.com/Trrrrw/UserScript
// @version 0.1.4
// @version 0.1.5
// @description 美化search.bilibili.com页面
// @author Trrrrw
// @match https://search.bilibili.com/*
Expand Down Expand Up @@ -36,25 +36,48 @@
},{
name: 'imgFile',
value: ''
},{
name: 'videoUrl',
value: ''
},{
name: 'videoFile',
value: ''
}, {
name: 'upBtnSwitch',
value: true
}, {
name: 'isUrl',
value: true
name: 'bgType',
value: 1
}];
value.forEach((v) => {
GM_getValue(v.name) === undefined && GM_setValue(v.name, v.value);
});



GM_registerMenuCommand("⚙️设置",() => {
Swal.fire({
title:'⚙️设置',
html:`<input id="up-button-checkbox" type="checkbox" ${GM_getValue('upBtnSwitch') ? 'checked' : ''}>是否显示投稿按钮</input><input id="is-url-checkbox" type="checkbox" ${GM_getValue('isUrl') ? 'checked' : ''}>是否使用网络图片</input>`+
`<label class="swal2-input-label">🖼️输入图片链接</label>`+
`<input id="bgimg-url" class="swal2-input" type="url" placeholder="输入图片链接" value="${GM_getValue('imgUrl')}">`+
`<label class="swal2-input-label">🖼️选择本地文件</label>`+
`<input id="bgimg-file" class="swal2-file" type="file" accept="image/*" aria-label="Upload your profile picture">`
html:`<label for="bgType">设置背景类型：</label>`+
`<select id="bgType" name="bgTypeSettings">
<option value="1" ${GM_getValue('bgType')=='1' ? 'selected' : ''}>网络图片</option>
<option value="2" ${GM_getValue('bgType')=='2' ? 'selected' : ''}>本地图片</option>
<option value="3" ${GM_getValue('bgType')=='3' ? 'selected' : ''}>网络视频</option>
<!--<option value="4" ${GM_getValue('bgType')=='4' ? 'selected' : ''}>本地视频</option>-->
</select><br/>`+
`<input id="up-button-checkbox" type="checkbox" ${GM_getValue('upBtnSwitch') ? 'checked' : ''}>是否显示投稿按钮</input><br/>`+
`<div id = "setting1" style="display:${GM_getValue('bgType')!='1' ? 'none' : ''}">
<label class="swal2-input-label">🖼️输入图片链接</label><input id="bgimg-url" class="swal2-input" type="url" placeholder="输入图片链接" value="${GM_getValue('imgUrl')}">
</div>`+
`<div id = "setting2" style="display:${GM_getValue('bgType')!='2' ? 'none' : ''}">
<label class="swal2-input-label">🖼️选择图片文件</label><input id="bgimg-file" class="swal2-file" type="file" accept="image/*" aria-label="Upload your profile picture">
</div>`+
`<div id = "setting3" style="display:${GM_getValue('bgType')!='3' ? 'none' : ''}">
<label class="swal2-input-label">🎬输入视频链接</label><input id="bgvideo-url" class="swal2-input" type="url" placeholder="输入视频链接" value="${GM_getValue('videoUrl')}">
</div>`+
`<div id = "setting4" style="display:${GM_getValue('bgType')!='4' ? 'none' : ''}">
<label class="swal2-input-label">🎬选择视频文件</label><input id="bgvideo-file" class="swal2-file" type="file" accept="video/*" aria-label="Upload your profile picture">
</div>`
}).then((res)=>{
if (res.isConfirmed) {
history.go(0)
Expand All @@ -63,9 +86,6 @@
document.getElementById('up-button-checkbox').addEventListener('change', (e) => {
GM_setValue('upBtnSwitch', e.currentTarget.checked);
})
document.getElementById('is-url-checkbox').addEventListener('change', (e) => {
GM_setValue('isUrl', e.currentTarget.checked);
})
document.getElementById('bgimg-url').addEventListener('change', (e) => {
if(e.currentTarget.value){
GM_setValue('imgUrl', e.currentTarget.value);
Expand All @@ -81,6 +101,23 @@
reader.readAsDataURL(selectedFile);
}
})
document.getElementById('bgvideo-url').addEventListener('change', (e) => {
if(e.currentTarget.value){
GM_setValue('videoUrl', e.currentTarget.value);
}
})
document.getElementById('bgvideo-file').addEventListener('change', (e) => {
if(e.isTrusted){
const selectedFile = e.target.files[0];
var url = URL.createObjectURL(selectedFile);
GM_setValue('videoFile',url);
}
})
document.getElementById('bgType').addEventListener('change', (e) => {
GM_addStyle(`#setting${e.target.value}{display: unset !important}`);
GM_addStyle(`#setting${GM_getValue('bgType')}{display: none !important}`);
GM_setValue('bgType',e.target.value);
})
});

//删除元素
Expand All @@ -92,7 +129,8 @@
'.center-title-text',//搜索栏上方文字“搜索”
'.left-entry > .v-popover-wrap:nth-of-type(n+2)',//左上元素
'.mini-header__title',//左上bilibili图标右侧“首页”
'.search-panel:last-child'
'.search-panel:last-child',
'html::-webkit-scrollbar'//滚动条
];
if (!GM_getValue('upBtnSwitch')) {
del_dom.push('.right-entry-item--upload')//投稿按钮
Expand All @@ -105,11 +143,49 @@

//更改样式
//添加背景
if(GM_getValue('isUrl')){
GM_addStyle(`body{background: url( ${GM_getValue('imgUrl')} );}`)
}else{
GM_addStyle(`body{background: url( ${GM_getValue('imgFile')} );}`)
switch(GM_getValue('bgType')){
case '1':
GM_addStyle(`body{background: url( ${GM_getValue('imgUrl')} );}`)
break;
case '2':
GM_addStyle(`body{background: url( ${GM_getValue('imgFile')} );}`)
break;
case '3':{
const sourceTag = document.createElement("source");
sourceTag.src = GM_getValue('videoUrl');
sourceTag.type="video/mp4";
const videoTag = document.createElement("video");
videoTag.id="bg-video";
videoTag.muted=true;
videoTag.autoplay=true;
videoTag.loop=true;
videoTag.style.cssText=`position: absolute;object-fit: cover;height: 100%;width: 100%;top: 0;left: 0;`;
videoTag.appendChild(sourceTag);
document.body.appendChild(videoTag);
break;
}
case '4':{
const sourceTag = document.createElement("source");
sourceTag.src = GM_getValue('videoFile');
sourceTag.type="video/mp4";
const videoTag = document.createElement("video");
videoTag.id="bg-video";
videoTag.muted=true;
videoTag.autoplay=true;
videoTag.loop=true;
videoTag.style.cssText=`position: absolute;object-fit: cover;height: 100%;width: 100%;top: 0;left: 0;`;
videoTag.appendChild(sourceTag);
document.body.appendChild(videoTag);
break;
}
default:
GM_setValue('bgType','1');
}
// if(GM_getValue('isUrl')){
// GM_addStyle(`body{background: url( ${GM_getValue('imgUrl')} );}`)
// }else{
// GM_addStyle(`body{background: url( ${GM_getValue('imgFile')} );}`)
// }
GM_addStyle('#i_cecream{background: transparent;}')
GM_addStyle('body{background-attachment: fixed;background-size: cover;}')
//header模糊效果
Expand All @@ -130,27 +206,41 @@
GM_addStyle('.v-popover{padding-top: 25px !important;}')
//右上图标颜色
GM_addStyle('.right-entry-icon{color: #00aeec !important;}')

function searchResult(){
const newUrl = event.state ? event.state.url : window.location.href;
if (newUrl.includes('keyword')) {
GM_addStyle('.left-entry{display:block !important}')
GM_addStyle('#i_cecream{background: #ffffff !important;}')//移除背景模糊
document.getElementsByClassName('left-entry__title')[0].href = 'https://search.bilibili.com/all'//设置顶栏图标返回链接
GM_addStyle('#bg-video{display:none !important}')//移除背景视频
GM_addStyle('#bili-header-container{background: var(--bg1) !important;}')//恢复顶栏颜色
GM_addStyle('html::-webkit-scrollbar{display:unset !important;}')
} else {
//背景模糊
GM_addStyle('#i_cecream{background: transparent !important;}')
GM_addStyle('#bg-video{display:unset !important}')//恢复背景视频
GM_addStyle('#bili-header-container{background: transparent !important;}')//移除顶栏颜色
}
}

window.onload = function () {
searchResult();
//搜索框预览文字
document.getElementsByClassName('search-input-el')[0].placeholder = ''
//搜索结果
window.addEventListener('urlchange', function (event) {
const newUrl = event.state ? event.state.url : window.location.href;
if (newUrl.includes('keyword')) {
GM_addStyle('.left-entry{display:block !important}')
GM_addStyle('#i_cecream{background: #ffffff !important;}')//移除背景模糊
} else {
//背景模糊
GM_addStyle('#i_cecream{background: transparent !important;}')
}
searchResult();
});
//搜索栏选中模糊
document.onmouseup = function (e) {
if (e.button == 0) {
if (e.srcElement.className == 'search-input-el' && document.body.style.backdropFilter == '') {
document.body.style.backdropFilter = 'blur(10px)';
if(GM_getValue('bgType')=='3'||GM_getValue('bgType')=='4'){GM_addStyle('#bg-video{filter: blur(5px);}')}
} else if (e.srcElement.className != 'search-input-el' && document.body.style.backdropFilter == 'blur(10px)') {
document.body.style.backdropFilter = '';
if(GM_getValue('bgType')=='3'||GM_getValue('bgType')=='4'){GM_addStyle('#bg-video{filter: unset;}')}
}
}
};
Expand Down
4 changes: 2 additions & 2 deletions HUPU-BBS-Beautification.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

## 安装
👉👉[点击此处安装](https://greasyfork.org/zh-CN/scripts/459013-%E8%99%8E%E6%89%91%E7%BD%91%E9%A1%B5%E7%AB%AF%E4%BC%98%E5%8C%96)👈👈
> 确保您的浏览器安装有 **Tampermonkey 脚本管理器扩展（[Chrome](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=zh)** / **[Firefox](https://addons.mozilla.org/zh-CN/firefox/addon/tampermonkey/)** / **[Edge](https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd)）。**
> 确保您的浏览器安装有 **Tampermonkey 脚本管理器扩展（[Chrome](https://chromewebstore.google.com/detail/%E7%AF%A1%E6%94%B9%E7%8C%B4/dhdgffkkebhmkfjojejmpbldmpobfkfo)** / **[Firefox](https://addons.mozilla.org/zh-CN/firefox/addon/tampermonkey/)** / **[Edge](https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd)）。**
## 功能
- 优化使用体验
Expand All @@ -15,7 +15,7 @@
|--------------------------------------------------------------|----------------------|--|---|-----|
|![icon](https://w1.hoopchina.com.cn/images/pc/old/favicon.ico)|https://bbs.hupu.com/*|✔️|✔️| ✖️ |

<details> <summary><h2>更新</h2></summary>
<details> <summary><h2>更新历史</h2></summary>


### 0.1.2
Expand Down

0 comments on commit 502b98c

Please sign in to comment.