b站笔记
// ==UserScript==
// @name b站笔记
// @namespace none
// @version 2.0.1
// @description 实现功能：1、全屏笔记融合：当视频全屏时让笔记面板嵌入视频页面内，实现了视频观看与笔记记录的无缝切换，不需要退出全屏，即可进行笔记记录，当视频是非全屏时就恢复官方默认布局让笔记面板出现在视频页面外边，确保笔记与观影互不干扰。2、笔记内容滚动定位：在笔记面板增加顶部直达、底部跳转及滚动条功能，有时笔记内容太多，有些浏览器又不会显示滚动条的，要记笔记时得用鼠标滚轮慢慢将笔记内容滚动到底部进行记录，这样很麻烦，有了这个功能后即便是长篇笔记也能快速滚动至所需位置。3、笔记面板隐藏：点击按钮或者鼠标在笔记面板空白处右击即可隐藏笔记面板，避免关闭笔记后再次打开时需要重新翻找笔记位置的麻烦，当需要再次显示笔记面板时，只需要将鼠标移到视频页面右侧，笔记面板便会自动显示，且笔记内容仍保持在隐藏前的位置。4、笔记截图弹出放大与面板宽度调整：笔记内容中截图不太好看清，就可以点击图片，让图片弹出，以便更清晰地查看截图内容，另外也可以直接拖动宽度控制条来调整面板宽度，笔记里面所有截图也会同步放大，非常方便查看。5、透明度调节：有时候我们记笔记的同时也可能希望可以看到字幕、弹幕、或者视频画面，就可以将透明度调高进行查看。6、插入视频标题：当观看分P视频时，可能会需要知道哪些笔记内容对应的是哪个视频以方便后续如果对笔记内容有疑惑时再找到那个视频查阅，就需要将视频标题复制到笔记内容上边，手动复制视频标题太麻烦，点击插入视频标题，标题就会复制到笔记面板中鼠标光标所在位置。7、截屏带时间标记：在插入视频截图的同时，自动添加时间标记，时间标记会出现在视频截屏的上边，以便回顾。8、笔记列表快捷访问：在网页头部点击这个我的笔记按钮，会弹出一个面板显示笔记列表，在里面可以查看所有视频的笔记，再点击这个按钮可以关掉这个面板。9、将笔记以pdf导出到本地：便于离线查看与分享，点击另存为pdf按钮，等到出现一个打印面板，打印机这里选择另存为pdf,如果需要保持笔记内容中的文字颜色、文本背景，下面更多设置里还需勾选上背景图形，然后再点击保存即可。
// @author 繁星1678
// @match https://www.bilibili.com/video/*
// @match https://www.bilibili.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant GM_addStyle
// @license MIT
// @require https://cdn.jsdelivr.net/npm/sweetalert2@11
// ==/UserScript==
(function () {
'use strict';
let IsFull = false;
let IsJbjClick = false;
let bar;
let selection;
let range;
let tm_qd;
let IsInsert = false;
let IsMyNote = false;
let IsNotePcHightChange = false;
let isClose = true;
let isTmAddLisner = false;//是否设置了插入时间标签点击监听事件
const currentUrl = window.location.href;
let isCloseNoteList = false;
let noteOpen=false
/////////////////////////////////////
// 创建iframe,访问的网页显示在这里面，并将iframe插入到页面中
function createIframeAndIsertDocument() {
let iframeS = document.querySelector('.note-list-iframe')
// 创建一个 iframe 并设置其样式
let iframe = document.createElement('iframe');
iframe.src = 'https://space.bilibili.com/v/note-list';
iframe.className = 'note-list-iframe';
iframe.style.width = '65%';
iframe.style.height = '80%';
iframe.style.position = 'fixed';
iframe.style.top = '50px';
iframe.style.left = '0px';
iframe.style.border = 'none';
iframe.style.zIndex = '99999';
iframe.style.boxShadow = '0 4px 8px';
iframe.style.borderRadius = '10px';
if (!iframeS) {
document.body.appendChild(iframe)
//////////
iframe.onload = function () {
// 移除 onload 处理函数，避免重复执行
iframe.onload = null;
// 初始化拖动功能
// 其他初始化操作
removeBiliMainHeader();
};
//////////
}
}
// 在首页移除笔记列表头部在
function removeBiliMainHeader() {
let iframe = document.querySelector('.note-list-iframe')
// 获取 iframe 内部的文档
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.querySelector('#biliMainHeader').remove()
}
// 在首页设置iframe可拖动
function iframeDrag(iframe) {
let isDragging = false;
let offsetX = 0;
let offsetY = 0;
// let iframe = document.querySelector('.note-list-iframe')
iframe.addEventListener('load', () => {
iframe.contentDocument.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - iframe.offsetLeft;
offsetY = e.clientY - iframe.offsetTop;
});
iframe.contentDocument.addEventListener('mousemove', (e) => {
if (isDragging) {
iframe.style.left = (e.clientX - offsetX) + 'px';
iframe.style.top = (e.clientY - offsetY) + 'px';
}
});
iframe.contentDocument.addEventListener('mouseup', () => {
isDragging = false;
});
});
}
// 创建笔记列表按钮并添加监听事件
function setNoteListBtn() {
let iframe = null
let noteListsBtn = document.querySelector('.note-lists');
// 如果存在就设置监听,不存在就创造一个并设置监听
if (noteListsBtn) {
// setNoteListsBtnListener(noteListsBtn);
// alert('noteListsBtn存在:',noteListsBtn)
} else {
// alert('noteListsBtn不存在')
function createNoteListBtnAndInsertDocument() {
let avatar_wrap = document.querySelector('.header-avatar-wrap');
if (avatar_wrap) {
noteListsBtn = document.createElement('div');
noteListsBtn.style.display = 'grid';
noteListsBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="55" height="20" viewBox="0 0 24 24" style="filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));"><g fill="none" stroke="#FF8C00" stroke-width="1.5"><path stroke-linecap="round" d="M18 10h-5"/><path d="M2 6.95c0-.883 0-1.324.07-1.692A4 4 0 0 1 5.257 2.07C5.626 2 6.068 2 6.95 2c.386 0 .58 0 .766.017a4 4 0 0 1 2.18.904c.144.119.28.255.554.529L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .848.352C14.098 6 14.675 6 15.828 6h.374c2.632 0 3.949 0 4.804.77c.079.07.154.145.224.224c.77.855.77 2.172.77 4.804V14c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14z"/></g></svg><span style="color: #FF8C00; font-size: 13px; text-shadow: 0.1px 0.1px 0.3px rgba(0, 0, 0, 0.6);">我的笔记</span>`;
noteListsBtn.style.cursor = 'pointer';
noteListsBtn.className = 'note-lists';
avatar_wrap.parentNode.insertBefore(noteListsBtn, avatar_wrap);
observer.disconnect();
// setNoteListsBtnListener(noteListsBtn)
noteListsBtn.addEventListener('click', function (e) {
if (isCloseNoteList) {
let iframe = document.querySelector('.note-list-iframe');
document.body.removeChild(iframe);
// 笔记列表被关闭，换成我的笔记的图标
noteListsBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="55" height="20" viewBox="0 0 24 24" style="filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));"><g fill="none" stroke="#FF8C00" stroke-width="1.5"><path stroke-linecap="round" d="M18 10h-5"/><path d="M2 6.95c0-.883 0-1.324.07-1.692A4 4 0 0 1 5.257 2.07C5.626 2 6.068 2 6.95 2c.386 0 .58 0 .766.017a4 4 0 0 1 2.18.904c.144.119.28.255.554.529L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .848.352C14.098 6 14.675 6 15.828 6h.374c2.632 0 3.949 0 4.804.77c.079.07.154.145.224.224c.77.855.77 2.172.77 4.804V14c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14z"/></g></svg><span style="color: #FF8C00; font-size: 13px; text-shadow: 0.1px 0.1px 0.3px rgba(0, 0, 0, 0.6);">我的笔记</span>`;
} else {
createIframeAndIsertDocument()
function isloadIframe() {
iframe = document.querySelector('.note-list-iframe')
if (iframe) {
observer.disconnect();
iframeDrag(iframe)
}
}
let observer = new MutationObserver(isloadIframe)
let config = { childList: true, subtree: true }
observer.observe(document.body, config)
// 笔记列表被打开，换成关闭笔记的图标
noteListsBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="55" height="20" viewBox="0 0 24 24" style="filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));"><g fill="none" stroke="#65a30d" stroke-width="1.5"><path d="M1 15V9a6 6 0 0 1 6-6h10a6 6 0 0 1 6 6v6a6 6 0 0 1-6 6H7a6 6 0 0 1-6-6Z"/><path d="M7 9a3 3 0 1 1 0 6a3 3 0 0 1 0-6Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 15V9h3m2 6V9h3m-8 3h2.572M17 12h2.572"/></g></svg><span style="color: #FF8C00; font-size: 13px; text-shadow: 0.1px 0.1px 0.3px rgba(0, 0, 0, 0.6);">关闭笔记</span>`
}
isCloseNoteList = !isCloseNoteList;
})
}
}
let observer = new MutationObserver(createNoteListBtnAndInsertDocument)
let config = { childList: true, subtree: true }
observer.observe(document.body, config)
}
}
// if (
// (currentUrl.startsWith('https://www.bilibili.com/?spm_id_from=') && currentUrl.includes('='))
// || currentUrl === 'https://www.bilibili.com/'
// ) {
// setNoteListBtn()
// }
if (currentUrl.startsWith('https://www.bilibili.com/')) {
setNoteListBtn()
}
if (currentUrl.indexOf('https://www.bilibili.com/video/') === 0 || currentUrl.startsWith('https://www.bilibili.com/cheese/')) {
function isFirefox() {
return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
}
function isEdge() {
// 获取 User Agent 字符串
const userAgent = navigator.userAgent;
// 检查 User Agent 字符串中是否包含 "Edg" 或 "Edge"
return userAgent.indexOf("Edg") !== -1 || userAgent.indexOf("Edge") !== -1;
}
// 以pdf格式将笔记内容保存到本地
//////////////////////////
function saveNoteAsPdf() {
// const note_pc = document.querySelector("div.resizable-component.note-pc");
// if (note_pc) {
let fullUrl = window.location.href
let searchParams = new URLSearchParams(fullUrl.search)
// 判断链接中是否存在'note'
let isNote = searchParams.has('note')
let titleElement = document.querySelector(".video-title.special-text-indent");
let title = titleElement ? (titleElement.getAttribute('data-title').trim() || titleElement.getAttribute('title').trim() || titleElement.textContent).trim() : '';
if (!title) {
console.error('无法找到视频标题');
}
let url = window.location.href || title;
const saveBtn = document.createElement("button");
saveBtn.id = "saveBtn";
saveBtn.textContent = "另存为pdf";
saveBtn.style.width = "auto";
saveBtn.title = "将笔记内容以pdf格式保存到本地";
saveBtn.onclick = saveAsPDF;
const style = document.createElement('style');
style.textContent = `
#saveBtn {
background-color: #3f72af;
color: white;
border: none;
padding: 2px 1px;
vertical-align: middle;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#saveBtn:hover {
background-color: #112d4e;
}
`;
document.head.appendChild(style);
// if(isNote){
// let ql_save_btn = document.querySelector('.ql-save-btn');
// if (ql_save_btn) {
// ql_save_btn.parentNode.appendChild(saveBtn);
// }
// return
// }
setTimeout(() => {
let ckbj_btn = document.querySelector('div.list-note-operation');
if (ckbj_btn) {
ckbj_btn.addEventListener("click", function (event) {
const ql_save_btn = document.querySelector('.ql-save-btn');
if (ql_save_btn) {
ql_save_btn.parentNode.appendChild(saveBtn);
}
})
} else {
console.log("586 没有找到ckbij按钮")
}
setTimeout(() => {
let ql_save_btn = document.querySelector('.ql-save-btn');
if (ql_save_btn) {
ql_save_btn.parentNode.appendChild(saveBtn);
return
}
}, 2000);
let ql_save_btn = document.querySelector('.ql-save-btn');
if (ql_save_btn) {
ql_save_btn.parentNode.appendChild(saveBtn);
return
}
}, 1000);
let newJbjBtn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.video-note-inner');
let jbj_btn_title = newJbjBtn.innerText.trim()
if (jbj_btn_title === "记笔记") {
newJbjBtn.addEventListener("click", function (event) {
const ql_save_btn = document.querySelector('.ql-save-btn');
// ql_save_btn.parentNode.appendChild(saveBtn);
if (ql_save_btn) {
ql_save_btn.parentNode.appendChild(saveBtn);
}
setTimeout(() => {
let ckbj_btn = document.querySelector('div.list-note-operation');
if (ckbj_btn) {
ckbj_btn.addEventListener("click", function (event) {
const ql_save_btn = document.querySelector('.ql-save-btn');
if (ql_save_btn) {
ql_save_btn.parentNode.appendChild(saveBtn);
}
})
} else {
console.log("586 没有找到ckbij按钮")
}
}, 800);
})
} else {
newJbjBtn.addEventListener("click", function (event) {
setTimeout(() => {
let ckbj_btn = document.querySelector('div.list-note-operation');
if (ckbj_btn) {
ckbj_btn.addEventListener("click", function (event) {
const ql_save_btn = document.querySelector('.ql-save-btn');
if (ql_save_btn) {
ql_save_btn.parentNode.appendChild(saveBtn);
}
})
} else {
console.log("586 没有找到ckbij按钮")
}
}, 800);
})
}
function saveAsPDF() {
// let imgWidth = 1920;
let imgWidth = screen.width;
imgWidth = imgWidth * 0.7+'px';
const content = document.querySelector(".ql-editor");
if (!content) {
console.error('无法找到编辑器内容');
return;
}
// 创建一个新的窗口，并设置位置
const printWindow = window.open('', 'Print', 'width=500,height=400,left=350,top=330');
// 将内容复制到新窗口中
printWindow.document.open();
printWindow.document.write(`
<html>
<head>
<title style="color:#005691;font-size:22px;font-weight:bold">${title}</title>
<meta charset="UTF-8">
<meta name="default-title" content="${title || 'b站笔记'}">
<style>
@media print {
body {
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
font-family: Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 0.5em;
font-weight: bold;
}
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
p {
margin: auto 0;
text-align: left; /* 左对齐文本 */
align-self: flex-start; /* 对齐到父容器开始位置 */
text-indent: 2em; /* 添加缩进样式 */
margin-bottom: 1em; /* 段落间距 */
}
a {
color: #1f4e5f;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul, ol {
margin: 0 0 1em 2em;
}
li {
margin-bottom: 0.5em;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1em;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.note {
background-color: #f9f9f9;
border-left: 4px solid #ccc;
padding: 10px;
margin-bottom: 1em;
}
.note p {
text-indent: 0;
margin: 0;
}
img {
width: 130%; /* 图片宽度 */
height: auto; /* 保持图片的宽高比 */
}
}
</style>
</head>
<body>
<br><br>
<a href="${url}" style="fot-family: Arial, sans-serif; font-size: 10px; color: #1f4e5f;">打开视频</a>
${transformContent(content.innerHTML)}
<a href="${url}" style="font-family: Arial, sans-serif; font-size: 10px; color: #1f4e5f;">打开视频</a>
</body>
</html>
`);
printWindow.document.close();
setTimeout(() => {
// 等待DOM内容加载完成
// 触发打印对话框
printWindow.print();
// 关闭新窗口
printWindow.close();
},2000);
}
function transformContent(html) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const timeTags = doc.querySelectorAll('.time-tag-item__text');
timeTags.forEach(tag => {
let textToParse = tag.getAttribute('title') || tag.textContent;
// 提取章节编号，如 "P1"
const chapterMatch = textToParse.match(/P(\d+)/);
let chapter = chapterMatch ? Number(chapterMatch[1]) : -1; // 默认章节为1
if (chapter === -1 || chapter === 1) {
chapter = ''
} else {
chapter = '&p=' + chapter
}
// 提取时间并转换为秒数
const timeMatch = textToParse.match(/(\d+):(\d+):(\d+)$/) || textToParse.match(/(\d+):(\d+)$/);
if (timeMatch) {
console.log('timeMatch:' + timeMatch);
// 如果匹配到的是小时:分钟:秒
let hours = 0, minutes = 0, seconds = 0;
if (timeMatch.length === 4) {
[, hours, minutes, seconds] = timeMatch;
} else if (timeMatch.length === 3) {
// 如果是分钟:秒
[, minutes, seconds] = timeMatch;
}
// 计算总秒数
let totalSeconds = (parseInt(hours, 10) * 3600) + (parseInt(minutes, 10) * 60) + parseInt(seconds, 10);
console.log('Total seconds:', totalSeconds); // 可以用于调试输出
// 设置`?t=`参数
const timeParam = '?t=' + totalSeconds;
console.log('时间参数:', timeParam);
totalSeconds = '?t=' + totalSeconds
// 跳到指定视频的指定时间进行播放 https://www.bilibili.com/video/BV1cq4y1U7sg?t=557.2&p=6
// 创建 URL 对象
const url1 = new URL(window.location.href);
// const queryString = url1.search.substring(1);
const params = new URLSearchParams(url1.search);
// let vdSource = params.get('vd_source');
// 获取基础路径部分（去掉查询字符串和片段标识符）
let baseUrl = url1.origin + url1.pathname;
if (baseUrl.endsWith('/')) {
baseUrl = baseUrl.slice(0, -1);
}
console.log('baseurl:' + baseUrl);
// 构建新的 URL
const newLink = `<a href="${baseUrl}${timeParam}${chapter}" style="font-family: Arial, sans-serif; font-size: 10px; color: #1f4e5f;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="15" vertical-align="middle" viewBox="0 0 24 24"><path fill="#333333" d="M6 21V4h14l-2.096 4.27L20 12.538H7V21z"/></svg>${tag.textContent}</a>`;
tag.outerHTML = newLink;
}
});
// 处理 p 元素中的样式
let pElements = doc.querySelectorAll('p');
pElements.forEach(pElement => {
const spans = pElement.querySelectorAll('span, strong');
// 处理文字样式
spans.forEach(span => {
// 获取颜色和背景色的匹配结果
const colorMatch = span.classList.value.match(/ql-color-#([a-fA-F0-9]{6})/);
const bgMatch = span.classList.value.match(/ql-bg-#([a-fA-F0-9]{6})/);
// const cb = span.classList.value.match(/ql-color-(#[0-9a-fA-F]{6})\s+ql-bg-(#[0-9a-fA-F]{6})/);
console.log('colorMatch:' + colorMatch);
console.log('bgMatch:' + bgMatch);
if (colorMatch) {
span.style.color = `#${colorMatch[1]}`;
// span.style.color = `#${colorMatch[1]}`;
// span.classList.remove('ql-color-' + colorMatch[1]);
// span.setAttribute('style', `color: #${colorMatch[1]};`);
}
if(bgMatch){
// span.style.backgroundColor = `#${bgMatch[1]}`;
span.style.background = `#${bgMatch[1]}`;
// span.classList.remove('ql-bg-' + bgMatch[1]);
// span.setAttribute('style', `background-color: #FFFF00;`);
}
});
// 处理图片宽高
// const imgs = pElement.querySelectorAll('img');
// imgs.forEach(img => {
// const width = img.getAttribute('width');
// // const height = img.getAttribute('height');
// if (width) {
// // img.setAttribute('style', `width: ${width}px; height: 200px;`);
// img.setAttribute('style', `width: 100%; height: auto;`);
// // img.style.display = 'block';
// // img.style.width = '100%';
// // img.style.height = 'auto';
// }
// });
});
return doc.body.innerHTML;
}
// }
}
//////////////////////////
//////////////////////////
function moveButtonWhenDetected() {
const jbj_btn = document.querySelector('#arc_toolbar_report > div.video-toolbar-right > div.video-note.video-toolbar-right-item.toolbar-right-note > div.video-note-inner');
const qxd_btn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.bpx-player-ctrl-btn.bpx-player-ctrl-quality');
let full_btn = document.querySelector("#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.bpx-player-ctrl-btn.bpx-player-ctrl-full")
let wyqp_btn = document.querySelector("div.bpx-player-ctrl-btn.bpx-player-ctrl-web")
let note_pc = document.querySelector("div.resizable-component.note-pc")
if (jbj_btn && qxd_btn && full_btn && wyqp_btn && note_pc) {
// let note_pc = document.querySelector("div.resizable-component.note-pc")
// note_pc.style.width = "460px"
//使笔记始终保持在网页中固定位置,即使网页上下滚动,笔记始终都可见
GM_addStyle(`
.fixed-position {
position: fixed !important;
min-width: 460px !important;
}
`);
note_pc.classList.add('fixed-position');
// setWidthDivBox()
// // refreshOpacity()
// setOpacity()
// setBtn()
// saveNoteAsPdf()
qxd_btn.parentNode.insertBefore(jbj_btn, qxd_btn);
// 重新设置样式，确保移动后的按钮也有正确的样式
const newJbjBtn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.video-note-inner');
if (newJbjBtn) {
noteEvent()
setWidthDivBox()
// refreshOpacity()
setOpacity()
setBtn()
ckbj_btn_event()
// saveNoteAsPdf()
setTimeout(() => {
setTimeout(() => {
let url = window.location.href;
let searchParams = new URLSearchParams(new URL(url).search);
console.log('searchParams:' + searchParams)
noteOpen = searchParams.get('note');
console.log('noteOpen:' + noteOpen)
if(noteOpen){
IsJbjClick=true
if(note_pc.style.display != 'none'){
IsJbjClick=true
note_pc.style.width = '460px'
}
setbar()
// setScrollbar()
refreshScrollbar()
setBtn()
Screenshot()
}
}, 200);
saveNoteAsPdf()
}, 300);
// 直接修改style属性来应用样式
newJbjBtn.style.marginRight = '25px';
newJbjBtn.style.cursor = 'pointer';
// 注意：颜色需要确保与CSS中定义的一致，这里直接应用白色
newJbjBtn.style.color = 'white';
newJbjBtn.addEventListener("click", (e) => {
setTimeout(() => {
jbjBtnOnclickEvent()
// let svBtn = document.querySelector('#saveBtn');
// if(!svBtn){saveNoteAsPdf()}
// let svBtn = document.querySelector('#saveBtn');
// if(!svBtn){saveNoteAsPdf()}
}, 0);
// 这里应该是具体的点击事件处理逻辑
// jbjBtnOnclickEvent()
});
let full_btn = document.querySelector("#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.bpx-player-ctrl-btn.bpx-player-ctrl-full")
let wyqp_btn = document.querySelector("div.bpx-player-ctrl-btn.bpx-player-ctrl-web")
full_btn.addEventListener("click", function () {
// setTimeout(() => {
// full_btn_event()
// }, 0);
full_btn_event()
})
wyqp_btn.addEventListener("click", function () {
// if(note_pc.style.display!='none'){
// IsJbjClick=true
// }
// setTimeout(() => {
// wyqpBtnEvent()
// }, 0);
wyqpBtnEvent()
})
// setTimeout(() => {
// let noteListsBtn = document.querySelector('.note-lists')
// setNoteListsBtnListener(noteListsBtn)
// }, 100);
// ckbj_btn_event()
// setTimeout(() => {
// if (note_pc.style.display != 'none') {
// IsJbjClick = true
// note_pc.style.width = '460px'
// // refreshScrollbar()
// // saveNoteAsPdf()
// setBtn()
// // let ckbj_btn = document.querySelector('div.list-note-operation');
// // if (ckbj_btn){
// // ckbj_btn.addEventListener("click", function () {
// // saveNoteAsPdf()
// // })
// // }
// }
// }, 3000);
}
observer.disconnect();
// full_btn.addEventListener("click", function () {
// // setTimeout(() => {
// // full_btn_event()
// // }, 0);
// full_btn_event()
// })
// wyqp_btn.addEventListener("click", function () {
// // setTimeout(() => {
// // wyqpBtnEvent()
// // }, 0);
// wyqpBtnEvent()
// })
// setTimeout(() => {
// let noteListsBtn = document.querySelector('.note-lists')
// setNoteListsBtnListener(noteListsBtn)
// }, 100);
// let svBtn = document.querySelector('#saveBtn');
// if(!svBtn){saveNoteAsPdf()}
}
}
// 创建MutationObserver实例
const observer = new MutationObserver(moveButtonWhenDetected);
// 配置观察选项：子节点变化
const config = { childList: true, subtree: true };
// 开始观察body（或其它合适的容器）
observer.observe(document.body, config);
// 确保DOMContentLoaded后也尝试执行一次，以防元素一开始就存在
window.addEventListener('DOMContentLoaded', moveButtonWhenDetected);
// let noteListsBtn = document.querySelector('.note-lists')
// if(noteListsBtn){
// setNoteListsBtnListener(noteListsBtn)
// }else{
// alert('未找到笔记列表按钮在视频播放页面函数中569行')
// }
// 删除时间戳与图片之间的空格br元素
function deleteBr() {
////////////////////////////////////////////
// 获取所有匹配 .ql-image-preview 类的元素
let images = document.querySelectorAll(".ql-image-preview");
// 初始化变量以存储最大数字和对应的元素
let maxNumber = -1;
let maxImageElement = null;
// 遍历每个元素
images.forEach(image => {
// 获取 data-id 属性的值
const dataId = image.getAttribute('data-id');
// 提取数字部分
const number = parseInt(dataId.match(/\d+/)[0], 10);
// 比较数字，更新最大数字和对应的元素
if (number > maxNumber) {
maxNumber = number;
maxImageElement = image;
}
});
let currentImage = maxImageElement.previousElementSibling;
// let currentImage = lastImage.previousElementSibling;
if (currentImage && currentImage.tagName === 'P') {
currentImage.parentNode.removeChild(currentImage)
} else {
console.log('没有找到匹配的元素');
}
}
// 插入截屏的同时也插入时间标记
function Screenshot() {
if (isTmAddLisner) return;
// 插入截屏按钮
let tp = document.querySelector("span.ql-capture-btn.ql-bar");
// 插入时间标记按钮
let tm = document.querySelector("span.ql-tag-btn.ql-bar-btn");
let note_editor = document.querySelector("div.note-editor")
if (tp && tm) {
tp.addEventListener("click", (e) => {
creatNoteImageClikEvent();
tm.click()
setTimeout(() => {
deleteBr()
}, 900)
});
let observerActive = false;
tm.addEventListener("click", () => {
if (observerActive) return;
if (IsInsert) return;
const insert = () => {
let tm_qd = document.querySelector("div.dialog-btn.tag-dialog__btn--confirm");
if (tm_qd) {
tm_qd.click();
observer.disconnect();
observerActive = false;
}
};
const observer = new MutationObserver(insert);
const config = { childList: true, subtree: true };
observer.observe(note_editor, config);
observerActive = true;
});
} else {
console.error("无法找到截屏按钮或时间标记按钮");
}
}
function full_btn_event() {
// let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
// let bfyHeight = bfy.getBoundingClientRect().height;
let note_pc = document.querySelector("div.resizable-component.note-pc")
let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
let bfyHeight = bfy.getBoundingClientRect().height;
// let wh = window.innerHeight;
if (note_pc && bfyHeight != 1080 && IsJbjClick) {
setNotePanel()
} else if (note_pc && bfyHeight == 1080 && IsJbjClick) {
let infoflow = document.querySelector("#__infoflow_commercial")
let biliMainHeader = document.querySelector("#biliMainHeader")
if (infoflow) {
infoflow.parentNode.insertBefore(note_pc, infoflow)
} else if (biliMainHeader) {
biliMainHeader.parentNode.insertBefore(note_pc, biliMainHeader)
} else {
console.log("没有找到infoflow和biliMainHeader节点")
}
note_pc.style.width = '460px'
}
}
function wyqpBtnEvent() {
let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
let wh = window.innerHeight;
let bfyHeight = bfy.getBoundingClientRect().height;
let note_pc = document.querySelector("div.resizable-component.note-pc")
if (bfyHeight == wh && IsJbjClick) {
setNotePanel()
} else {
if (note_pc && IsJbjClick) {
let infoflow = document.querySelector("#__infoflow_commercial")
let biliMainHeader = document.querySelector("#biliMainHeader")
if (infoflow) {
infoflow.parentNode.insertBefore(note_pc, infoflow)
} else if (biliMainHeader) {
biliMainHeader.parentNode.insertBefore(note_pc, biliMainHeader)
} else {
console.log("没有找到infoflow和biliMainHeader节点")
}
note_pc.style.width = '460px'
}
}
}
////////////////////////////////////////////
function MyNoteBtnClick() {
const userNames = document.querySelectorAll('.user-name');
// 统计这些元素的数量
const count = userNames.length;
// 输出结果
console.log(`user-name 的个数是: ${count}`);
for (let i = 0; i < count; i++) {
let note_card_container = document.querySelector(`div.note-card-container > div:nth-child(${i + 1})`);
if (note_card_container) {
note_card_container.addEventListener('click', function () {
// IsMyNote = false;
// creatNoteImageClikEvent()
let MyNoteBtn = document.querySelector("div.note-operation.detail");
if (MyNoteBtn) {
MyNoteBtn.addEventListener('click', handleMyNoteBtnClick);
} else {
console.log('没有找到MyNoteBtn');
}
});
}
}
}
function OnNoteListWheel() {
let NoteList = document.querySelector("div.note-content > div")
if (NoteList) {
NoteList.addEventListener('wheel', e => {
let MyNoteBtn = document.querySelector("div.note-operation");
if (MyNoteBtn) {
MyNoteBtn.addEventListener('click', handleMyNoteBtnClick);
} else {
console.log('没有找到MyNoteBtn');
}
});
} else {
console.log('没有找到NoteList');
}
}
function handleMyNoteBtnClick() {
setTimeout(() => {
refreshBtn();
back_note_btn_event();
}, 0);
}
function close_btn_event() {
let close_btn = document.querySelector("div.close-note")
if (!close_btn) return;
close_btn.addEventListener("click", (e) => {
isClose = true
IsJbjClick = false
isTmAddLisner = false
})
}
// 查看笔记按钮事件
function ckbj_btn_event() {
// let note_pc = document.querySelector("resizable-component.note-pc")
// note_pc.style.width = "460px"
let thumb = document.querySelector("div.ZDscrollbar.custom-scrollbar > div > div")
if (thumb) { thumb.style.top = "0" }
range = ""
let ckbj_btn = document.querySelector('div.list-note-operation');
if (ckbj_btn) {
ckbj_btn.addEventListener('click', function () {
IsMyNote = true
let ql_editor = document.querySelector(".ql-editor")
if (ql_editor) {
ql_editor.style.overflowY = "auto"
ql_editor.style.overflowX = "hidden"
} else {
console.log("没有找到ql_editor,无法修改滚动条样式")
}
let note_editor = document.querySelector("div.note-editor")
note_editor.style.height = "96%"
creatNoteImageClikEvent()//点击笔记中图片触发事件
Screenshot()
isTmAddLisner = true
InsertBtnEvent()
refreshScrollbar()
// saveNoteAsPdf()
// let NotePanel = document.querySelector("body > div.resizable-component.note-pc")
// if (NotePanel) {
// NotePanel.style.width = '450px'
// }
// refreshWidthDivBox()
// refreshOpacity()
// refreshBtn()
// setTimeout(() => {
// refreshBtn()
// }, 0);
back_note_btn_event()
editorEvent()
setTimeout(() => {
InsertBtnEvent()
}, 0);
// noteEvent()
})
}
}
// 从笔记页面后退按钮的事件
function back_note_btn_event() {
let back_note_btn = document.querySelector("div.back-note-list")
if (back_note_btn) {
back_note_btn.addEventListener("click", function () {
// IsNotePcHightChange=false
isTmAddLisner = false
scrollbarDisplay("hide")
// BtnDisplay("hide")
let note_pc = document.querySelector("div.resizable-component.note-pc")
if (note_pc.style.opacity != 1) { note_pc.style.opacity = 1 }
// 重置透明度值
let opacitySlider = document.querySelector("div.sliderContainer > input")
if (opacitySlider) { opacitySlider.value = 0 }
let label2 = document.querySelector("div.sliderContainer > label2")
if (label2) { label2.textContent = '0%' }
// ckbj_btn_event()
})
} else {
console.log("没有找到back_note_btn")
}
}
// 添加各种点击记笔记的监听事件
function jbjBtnOnclickEvent() {
let thumb = document.querySelector("div.ZDscrollbar.custom-scrollbar > div > div")
if (thumb) { thumb.style.top = "0" }
range = ""
isClose = false
IsJbjClick = true
let opacitySlider = document.querySelector("div.sliderContainer > input")
if (opacitySlider) { opacitySlider.value = 0 }
let label2 = document.querySelector("div.sliderContainer > label2")
if (label2) { label2.textContent = '0%' }
let note_list = document.querySelector("div.note-list")
if (note_list) { note_list.style.height = '96%'; }
let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
let ql_editor = document.querySelector(".ql-editor")
if (ql_editor) {
ql_editor.style.overflowY = "auto"
ql_editor.style.overflowX = "hidden"
}
let bfyHeight = bfy.getBoundingClientRect().height;
let wh = window.innerHeight;
if (bfyHeight == wh) {
setNotePanel()
}
noteEvent()
refreshBar()
// 笔记宽度
// refreshWidthDivBox()
// 笔记透明度
// refreshOpacity()
close_btn_event()
let newJbjBtn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.video-note-inner');
let jbj_btn_title = newJbjBtn.innerText.trim()
let note_pc = document.querySelector("div.resizable-component.note-pc");
if (note_pc) {
note_pc.style.width = "460px"
note_pc.addEventListener('mouseover', (e) => {
note_pc.addEventListener('wheel', (e) => {
e.stopPropagation();
})
})
note_pc.addEventListener('mousedown', (e) => {
note_pc.addEventListener('wheel', (e) => {
e.stopPropagation();
})
})
note_pc.addEventListener('mouseup', (e) => {
note_pc.addEventListener('wheel', (e) => {
e.stopPropagation();
})
})
} else {
console.log("1028:没有找到note_pc")
}
if (note_pc.style.opacity != 1) { note_pc.style.opacity = 1 }
if (jbj_btn_title === "记笔记") {
console.log("1 if (jbj_btn_title == 记笔记)执行")
IsMyNote = true
let note_editor = document.querySelector("div.note-editor")
note_editor.style.height = "96%"
// 给笔记中图片添加点击事件,点击图片弹出
creatNoteImageClikEvent()
// 插入截屏的同时插入时间标记
Screenshot()
isTmAddLisner = true
editorEvent()
InsertBtnEvent()
console.log("2 if (jbj_btn_title == 记笔记)执行")
refreshScrollbar()
back_note_btn_event()
} else {
OnNoteListWheel()
MyNoteBtnClick()
scrollbarDisplay("hide")
// refreshScrollbar()
}
let bar = document.querySelector("#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch > div.custom-bar-class")
// let bfyHeight = bfy.getBoundingClientRect().height;
if (bfyHeight >= 1080) {
bar.style.display = "block"
}
// refreshBtnlistener()
// let note_editor = document.querySelector("div.note-editor")
// note_pc.style.height += 100+"px";
// note_pc = document.querySelector("div.resizable-component.note-pc")
}
// 1.笔记面板宽度控制条相关
// 判断WidthDivBoxExist是否存在如果不存在则添加宽度控制条,存在则删除后重新添加才能不出错保持监听事件有效
function refreshWidthDivBox() {
let widthDivBox = document.querySelector("div.width-control-box")
if (!widthDivBox) { setWidthDivBox() }
}
// 设置宽度控制条
function setWidthDivBox() {
let note_pc = document.querySelector("div.resizable-component.note-pc")
note_pc.style.width = "460px"
//使笔记始终保持在网页中固定位置,即使网页上下滚动,笔记始终都可见
GM_addStyle(`
.fixed-position {
position: fixed !important;
}
`);
note_pc.classList.add('fixed-position');
// 创建一个新的div来容纳滑块和标签，并添加类名
let widthDivBox = document.createElement('div');
widthDivBox.className = 'width-control-box';
widthDivBox.style.width = '405px';
widthDivBox.style.marginLeft = '25px';
// widthDivBox.style.height = '15px';
widthDivBox.style.height = '1.5%';
// widthDivBox.style.marginBottom = '1.4%';
// 创建并设置宽度滑块左侧标签，并添加类名
let widthLab1 = document.createElement('label');
widthLab1.className = 'width-slider-label';
widthLab1.textContent = '宽度';
widthLab1.style.fontSize = '15px';
widthLab1.style.borderRadius = "10px";
widthLab1.style.marginRight = '2.5px';
widthLab1.style.color = "rgb(19, 72, 87)";
// 创建并设置宽度滑块右侧标签，并添加类名
let widthLab2 = document.createElement('label');
widthLab2.className = 'width-slider-value';
// widthLab2.textContent = '800px';
widthLab2.textContent = '460px';
widthLab2.style.borderRadius = "10px";
widthLab2.style.color = "rgb(19, 72, 87)";
widthLab1.style.marginRight = '2.5px';
widthLab2.style.fontSize = '15px';
// widthLab2.style.right = '0';
// 创建宽度滑块，并添加类名
let widthSlider = document.createElement('input');
widthSlider.className = 'width-slider';
widthSlider.type = 'range';
widthSlider.min = '460';
widthSlider.max = '1912';
widthSlider.step = '1';
// widthSlider.value = note_pc.offsetWidth.toString(); // 初始值为当前宽度
widthSlider.value = '460'; // 初始值为当前宽度
// 设置宽度滑块样式
widthSlider.style.marginRight = '2.5px';
widthSlider.style.height = "8px";
widthSlider.style.width = "300px";
widthSlider.style.outline = "none";
widthSlider.style.backgroundColor = "#003300";
// widthSlider.style.backgroundColor = "skyblue";
widthSlider.style.opacity = "1";
widthSlider.style.cursor = "pointer";
widthLab1.addEventListener('mousedown', function (e) {
e.preventDefault();
e.stopPropagation();
})
widthLab2.addEventListener('mousedown', function (e) {
e.preventDefault();
e.stopPropagation();
})
// 添加事件监听器来响应滑块的变化
// 笔记中有图片时,图片宽度也需要单独调节
const img = document.getElementsByClassName('ql-image-preview');
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.attributeName === 'style') {
const width = parseInt(note_pc.style.width.replace('px', ''), 10);
widthSlider.value = width;
widthLab2.textContent = width + 'px';
// widthLab2.textContent = 460 + 'px';
}
});
});
// 观察note_pc的style属性
observer.observe(note_pc, { attributes: true, attributeFilter: ['style'] });
widthSlider.addEventListener("input", function (e) {
e.preventDefault();
e.stopPropagation();
let value = widthSlider.value;
note_pc.style.width = value + 'px';
if (img) {
for (let i = 0; i < img.length; i++) {
// 为当前元素设置宽度
img[i].style.width = value + 'px';
}
}
widthLab2.textContent = value + 'px';
});
// 将元素添加到DOM中
widthDivBox.appendChild(widthLab1);
widthDivBox.appendChild(widthSlider);
widthDivBox.appendChild(widthLab2);
// setTimeout(() => {
// let note_content = document.querySelector("div.note-content")
// if (note_content) {
// note_content.parentNode.insertBefore(widthDivBox, note_content);
// } else {
// console.log("note_content元素不存在")
// }
// }, 300);
let note_content = document.querySelector("div.note-content")
if (note_content) {
note_content.parentNode.insertBefore(widthDivBox, note_content);
} else {
console.log("note_content元素不存在")
}
}
// 2.笔记内容高度控制条
// 刷新笔记面板内容高度控制条
function refreshScrollbar() {
// 类名:ZDscrollbar
if (isFirefox()) {
console.log('这是火狐浏览器');
return;
}
if(isEdge()){
console.log('这是Edge浏览器');
return;
}
let note_pc = document.querySelector("div.resizable-component.note-pc")
if (!note_pc) return;
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
if (scrollbar && scrollbar.style.display == "none") {
scrollbarDisplay("show")
refreshScrollBarListener(scrollbar)
} else if (!scrollbar) {
setScrollbar()
}
function refreshScrollBarListener(s) {
function alteration() {
let contentHeight;
let scrollbar = s;
let isDragging = false;
let dragStartPos = 0;
// dragStartPos = 0;
let editor = document.querySelector('.ql-editor');
if (!editor) {
console.log("1246:未找到 editor 元素")
}
let track = document.querySelector("div.ZDscrollbar.custom-scrollbar > div")
let thumb = document.querySelector("div.ZDscrollbar.custom-scrollbar > div > div")
if (!IsNotePcHightChange) {
thumb.style.top = '0';
}
// thumb.style.top = '0';
let scrollbarHeight;
let note_pcHeight;
track.addEventListener('mouseover', () => {
contentHeight = editor.scrollHeight;
note_pcHeight = editor.clientHeight;
scrollbarHeight = scrollbar.clientHeight;
});
editor.addEventListener('mouseover', () => {
contentHeight = editor.scrollHeight;
note_pcHeight = editor.clientHeight;
scrollbarHeight = scrollbar.clientHeight;
});
editor.addEventListener('mouseover', () => {
contentHeight = editor.scrollHeight;
note_pcHeight = editor.clientHeight;
scrollbarHeight = scrollbar.clientHeight;
});
editor.addEventListener('scroll', () => {
// contentHeight = editor.scrollHeight;
// scrollbarHeight = scrollbar.clientHeight;
// note_pcHeight = editor.clientHeight;
let scrollTop = editor.scrollTop;
let thumbTop = (scrollTop / (contentHeight - note_pcHeight)) * (scrollbarHeight - thumb.clientHeight);
thumb.style.top = `${thumbTop}px`;
});
// let isDragging = false;
// let dragStartPos = 0;
// dragStartPos = 0;
thumb.addEventListener('mousedown', (e) => {
e.preventDefault(); // 取消默认操作，阻止链接跳转
e.stopPropagation(); // 阻止事件冒泡到其他监听器
isDragging = true;
dragStartPos = e.clientY - thumb.offsetTop;
});
thumb.addEventListener('mouseover', (e) => {
thumb.style.opacity = '1';
});
thumb.addEventListener('mouseout', (e) => {
thumb.style.opacity = '0.3';
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
let newTop = Math.max(0, Math.min(scrollbarHeight - thumb.clientHeight, e.clientY - dragStartPos));
thumb.style.top = `${newTop}px`;
let scrollFraction = newTop / (scrollbarHeight - thumb.clientHeight);
editor.scrollTop = scrollFraction * (contentHeight - note_pcHeight);
});
}
const ro = new ResizeObserver(entries => {
IsNotePcHightChange = true
entries.forEach(entry => {
alteration();
// console.log(`note_pc高度发生变化 ${entry.contentRect.height}`);
});
});
ro.observe(note_pc);
}
}
function scrollbarDisplay(displayState) {
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
if (scrollbar === null) {
console.error(" Scrollbar element not found.");
return;
}
if (displayState === "hide") {
scrollbar.style.display = "none";
} else if (displayState === "show") {
scrollbar.style.display = "block";
} else {
console.warn("Invalid display state. Expected 'hide' or 'show'.");
}
}
// 设置笔记内容高度控制条
function setScrollbar() {
let note_pc = document.querySelector("div.resizable-component.note-pc")
if (note_pc === null) {
console.error("没有找到note_pc");
return;
}
const scrollbar = document.createElement('div');
scrollbar.className = 'ZDscrollbar';
scrollbar.classList.add('custom-scrollbar');
scrollbar.style.position = 'absolute';
// scrollbar.style.top = note_pc.style.top;
scrollbar.style.top = '0';
scrollbar.style.width = '12px';
scrollbar.style.height = '100%';
scrollbar.style.right = '-13px';
const track = document.createElement('div');
track.className = 'track';
track.style.width = '100%';
track.style.height = '100%';
track.style.backgroundColor = "#f0f0f0";
track.style.borderRadius = '3px';
const thumb = document.createElement('div');
thumb.className = 'thumb';
thumb.style.position = 'relative';
thumb.style.width = '100%';
thumb.style.backgroundColor = "#888";
thumb.style.borderRadius = '5px';
thumb.style.opacity = '0.3';
thumb.style.height = '49px';
// 鼠标移到thumb后光标变成小手:
thumb.style.cursor = 'pointer';
track.appendChild(thumb);
scrollbar.appendChild(track);
// bjk_box.parentNode.appendChild(scrollbar);
note_pc.appendChild(scrollbar);
/////////////////////////////
// 选择目标元素
// let ql_editor = document.querySelector('.ql-editor');
// let ql_editor = document.querySelector('.editor-innter.ql-container.ql-snow');
// let ql_editor = document.querySelector('.note-editor');
// 为元素添加类名
// ql_editor.classList.add('customScrollbarStyle');
// // 定义自定义滚动条样式
// const customScrollbarStyle = `
// .customScrollbarStyle::-webkit-scrollbar {
// width: 12px;
// }
// .customScrollbarStyle::-webkit-scrollbar-track {
// background: #f1f1f1;
// }
// .customScrollbarStyle::-webkit-scrollbar-thumb {
// background: #888;
// border-radius: 6px;
// }
// .customScrollbarStyle::-webkit-scrollbar-thumb:hover {
// background: #555;
// }
// `;
// // 使用 GM_addStyle 注入自定义样式
// // GM_addStyle(customScrollbarStyle);
// // 使用 GM_addStyle 注入自定义样式
// if (typeof GM_addStyle === 'function') {
// GM_addStyle(customScrollbarStyle);
// } else {
// // 如果不在 Tampermonkey 环境下，则手动注入样式
// const styleElement = document.createElement('style');
// styleElement.innerHTML = customScrollbarStyle;
// document.head.appendChild(styleElement);
// }
// // 确认元素的高度和溢出属性
// ql_editor.style.overflow = 'auto'; // 设置溢出属性为 auto 或 scroll
// ql_editor.style.height = '300px'; // 设置一个固定高度以确保内容超出时显示滚动条
/////////////////////////////
// alteration()
setTimeout(() => {
let ckbj_btn = document.querySelector('div.list-note-operation');
if(ckbj_btn){
ckbj_btn.addEventListener('click',()=>{
note_pc.style.width = '460px'
alteration()
})
}else{
note_pc.style.width = '460px'
alteration()
}
}, 3000);
function alteration() {
let editor = document.querySelector('.ql-editor');
let contentHeight;
let scrollbarHeight;
let note_pcHeight;
if (!IsNotePcHightChange) {
thumb.style.top = '0';
}
// thumb.style.top = '0';
track.addEventListener('mouseover', () => {
contentHeight = editor.scrollHeight;
note_pcHeight = editor.clientHeight;
scrollbarHeight = scrollbar.clientHeight;
});
editor.addEventListener('mouseover', () => {
contentHeight = editor.scrollHeight;
note_pcHeight = editor.clientHeight;
scrollbarHeight = scrollbar.clientHeight;
});
editor.addEventListener('scroll', () => {
let scrollTop = editor.scrollTop;
let thumbTop = (scrollTop / (contentHeight - note_pcHeight)) * (scrollbarHeight - thumb.clientHeight);
thumb.style.top = `${thumbTop}px`;
});
let isDragging = false;
let dragStartPos = 0;
isDragging = false;
dragStartPos = 0;
thumb.addEventListener('mousedown', (e) => {
e.preventDefault(); // 取消默认操作，阻止链接跳转
e.stopPropagation(); // 阻止事件冒泡到其他监听器
isDragging = true;
dragStartPos = e.clientY - thumb.offsetTop;
});
thumb.addEventListener('mouseover', (e) => {
thumb.style.opacity = '1';
});
thumb.addEventListener('mouseout', (e) => {
thumb.style.opacity = '0.3';
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
let newTop = Math.max(0, Math.min(scrollbarHeight - thumb.clientHeight, e.clientY - dragStartPos));
thumb.style.top = `${newTop}px`;
let scrollFraction = newTop / (scrollbarHeight - thumb.clientHeight);
editor.scrollTop = scrollFraction * (contentHeight - note_pcHeight);
});
}
note_pc = document.querySelector("div.resizable-component.note-pc")
const ro = new ResizeObserver(entries => {
IsNotePcHightChange = true
entries.forEach(entry => {
alteration();
// console.log(`note_pc高度发生变化 ${entry.contentRect.height}`);
});
});
ro.observe(note_pc);
}
// 3.透明度控制条
// 刷新笔记面板内容高度控制条
function refreshOpacity() {
let OpacityBox = document.querySelector("div.sliderContainer")
if (OpacityBox) {
return
} else {
setOpacity()
}
}
function setOpacity() {
// let ql_snow = document.querySelector("div.editor-innter.ql-container.ql-snow")
let opacitySliderBox = document.createElement('div');
opacitySliderBox.className = 'sliderContainer'; // 添加类名
opacitySliderBox.style.width = '405px';
opacitySliderBox.style.marginLeft = '25px';
// opacitySliderBox.style.height = '15px';
opacitySliderBox.style.height = '3%';
opacitySliderBox.style.marginTop = '10px';
// opacitySliderBox.style.marginBottom = '1%';
opacitySliderBox.style.marginBottom = '10px';
// opacitySliderBox.style.backgroundColor = '#000000';
let lab1 = document.createElement('label1');
lab1.className = 'sliderLabel1'; // 添加类名
lab1.textContent = '透明';
lab1.style.fontSize = '15px';
lab1.style.borderRadius = "10px";
lab1.style.marginRight = '2.5px';
// lab1.style.color = "#000000";
lab1.style.color = "#020205";
// lab1.style.background = '#663366';
// lab1.style.fontWeight = "bold";
// lab1.style.color = "##FFFF00";
let lab2 = document.createElement('label2');
lab2.className = 'sliderLabel2'; // 添加类名
lab2.textContent = '0%';
lab2.style.borderRadius = "10px";
// lab2.style.color = "#000000";
lab2.style.color = "#020205";
// lab2.style.background = '#663366';
lab2.style.right = '50px'; // 可能需要调整，因为right属性通常与position属性一起使用
lab2.style.fontSize = '15px';
lab2.style.fontWeight = "bold";
let opacitySlider = document.createElement('input');
opacitySlider.className = 'opacitySlider'; // 添加类名
opacitySlider.type = 'range';
opacitySlider.min = '0';
// opacitySlider.max = '1';
opacitySlider.max = '0.95';
opacitySlider.step = '0.01';
// opacitySlider.value = '1';
opacitySlider.value = '0';
// 滑块样式
opacitySlider.style.marginRight = '2.5px';
opacitySlider.style.height = "8px";
opacitySlider.style.width = "300px";
opacitySlider.style.outline = "none";
opacitySlider.style.backgroundColor = "#000000";
opacitySlider.style.color = "#000000";
opacitySlider.style.opacity = "1";
opacitySlider.style.cursor = "pointer";
// 将元素添加到dom中
opacitySliderBox.appendChild(lab1);
opacitySliderBox.appendChild(opacitySlider);
opacitySliderBox.appendChild(lab2);
let note_pc = document.querySelector("div.resizable-component.note-pc")
opacitySlider.addEventListener("input", function (e) {
// 若不阻止默认操作opacitySlider.value就无法拖动到最大值
e.preventDefault();
e.stopPropagation();
let value = opacitySlider.value;
note_pc.style.opacity = 1 - value;
// let text_value = Math.round(value * 100);
let text_value = Math.round(value * 100);
lab2.textContent = text_value + '%';
});
// 鼠标移入透明度调节滑块时，弹窗提示鼠标所x在位置透明度数值
opacitySlider.addEventListener('mousemove', function (event) {
// 获取滑块的宽度和鼠标的位置
let rect = opacitySlider.getBoundingClientRect();
let offsetX = event.clientX - rect.left;
let sliderWidth = rect.width;
// 计算滑块的值
let value = (offsetX / sliderWidth) * (opacitySlider.max - opacitySlider.min) + opacitySlider.min;
value = Math.round(value * 100); // 保留两位小数
opacitySlider.title = '透明度调整为: ' + value + "%";
});
let width_control_box = document.querySelector("div.width-control-box")
width_control_box.insertAdjacentElement('afterend', opacitySliderBox);
// ql_snow.parentNode.insertBefore(opacitySliderBox, ql_snow);
}
// 4.到顶部/到底部按钮
function refreshBtn() {
let BtnBox = document.querySelector("div.note-header.drag-el > div.scrollButtonWrapper")
if (BtnBox) {
BtnDisplay('show')
refreshBtnlistener()
return;
}
else {
setBtn()
}
}
function BtnDisplay(displayState) {
let BtnBox = document.querySelector("div.scrollButtonWrapper")
if (!BtnBox) { return; }
if (displayState == "hide") {
BtnBox.style.display = "none";
} else if (displayState == "show") {
BtnBox.style.display = "block";
}
}
function setBtn() {
let btnContainer = document.createElement('div');
btnContainer.className = 'scrollButtonWrapper'; // 添加类名
btnContainer.style.left = "150px";
btnContainer.style.position = "absolute";
btnContainer.style.backgroundColor = "transparent"; // 设置背景为透明
// 创建到顶部按钮
let toTopBtn = document.createElement("button");
toTopBtn.className = 'scrollToTopBtn'; // 添加类名
toTopBtn.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNNSA1VjRoMTR2MXptNi41IDE1VjkuNjA4bC0zLjEgMy4xTDcuNjkyIDEyTDEyIDcuNjkyTDE2LjMwOCAxMmwtLjcwOC43MDhsLTMuMS0zLjFWMjB6Ii8+PC9zdmc+')"; // 使用 Base64 编码的图片
toTopBtn.style.backgroundSize = "cover"; // 使背景图片覆盖整个按钮
toTopBtn.style.width = "22px"; // 设置按钮宽度
toTopBtn.style.height = "25px"; // 设置按钮高度
toTopBtn.style.border = "none"; // 移除按钮边框
toTopBtn.style.cursor = "pointer"; // 设置鼠标悬停样式
toTopBtn.title = '到顶部';
toTopBtn.style.marginRight = "5px"
toTopBtn.style.backgroundColor = "transparent";
// 创建到底部按钮
let toBottomBtn = document.createElement("button");
toBottomBtn.className = 'scrollToBottomBtn'; // 添加类名
toBottomBtn.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNNSAyMHYtMWgxNHYxem03LTMuNjkyTDcuNjkyIDEybC43MDgtLjcwOGwzLjEgMy4xVjRoMXYxMC4zOTJsMy4xLTMuMWwuNzA4LjcwOHoiLz48L3N2Zz4=')"; // 使用 Base64 编码的图片
toBottomBtn.style.backgroundSize = "cover"; // 使背景图片覆盖整个按钮
toBottomBtn.style.width = "22px"; // 设置按钮宽度
toBottomBtn.style.height = "25px"; // 设置按钮高度
toBottomBtn.style.border = "none"; // 移除按钮边框
toBottomBtn.style.cursor = "pointer"; // 设置鼠标悬停样式
toBottomBtn.title = '到底部';
toBottomBtn.style.marginRight = "5px"
toBottomBtn.style.backgroundColor = "transparent";
// 创建隐藏按钮
let hideBtn = document.createElement("button");
hideBtn.className = 'hide'; // 添加类名
hideBtn.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJtOS44MDggMTQuODhsLTQuNzQgNC43NDdxLS4xNDcuMTQ2LS4zNDUuMTU2dC0uMzYzLS4xNTZ0LS4xNjYtLjM1N3QuMTY2LS4zNTZsNC43NC00Ljc0MUg2LjU1OHEtLjIxMyAwLS4zNTYtLjE0NHEtLjE0NC0uMTQ0LS4xNDQtLjM1N3QuMTQ0LS4zNTZ0LjM1Ni0uMTQzSDEwcS4zNDMgMCAuNTc2LjIzMnQuMjMyLjU3NnYzLjQ0MnEwIC4yMTMtLjE0NC4zNTZ0LS4zNTcuMTQ0dC0uMzU2LS4xNDR0LS4xNDMtLjM1NnpNMTQuOSA5Ljc5aDIuNTQycS4yMTMgMCAuMzU3LjE0NHEuMTQzLjE0My4xNDMuMzU2dC0uMTQzLjM1NnQtLjM1Ny4xNDRIMTRxLS4zNDMgMC0uNTc1LS4yMzN0LS4yMzMtLjU3NVY2LjUzOXEwLS4yMTMuMTQ0LS4zNTd0LjM1Ny0uMTQzdC4zNTYuMTQzdC4xNDMuMzU3VjkuMDhsNC43NC00Ljc0NnEuMTQ3LS4xNDYuMzQ1LS4xNTZ0LjM2NC4xNTZxLjE2NS4xNjUuMTY1LjM1NnEwIC4xOTItLjE2Ni4zNTd6Ii8+PC9zdmc+')"; // 使用 Base64 编码的图片
hideBtn.style.backgroundSize = "cover"; // 使背景图片覆盖整个按钮
hideBtn.style.width = "22px"; // 设置按钮宽度
hideBtn.style.height = "25px"; // 设置按钮高度
hideBtn.style.border = "none"; // 移除按钮边框
hideBtn.style.cursor = "pointer"; // 设置鼠标悬停样式
hideBtn.title = '隐藏-隐藏后鼠标移到视频右边框可显示笔记';
hideBtn.style.backgroundColor = "transparent";
// 将按钮添加到容器中
btnContainer.appendChild(toTopBtn);
btnContainer.appendChild(toBottomBtn);
btnContainer.appendChild(hideBtn);
let newJbjBtn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.video-note-inner');
let jbj_btn_title = newJbjBtn.innerText.trim()
if (jbj_btn_title === "记笔记") {
newJbjBtn.addEventListener("click", (e) => {
let note_message = document.querySelector("div.status-bar.note-message")
// let close_note = document.querySelector("div.close-note")
// 将容器添加到gkbj_btn的父节点中
if (note_message) {
// alert('找到了公开笔记按钮')
note_message.parentNode.insertBefore(btnContainer, note_message);
setTimeout(() => {
setBtnEvent();
}, 0);
// setBtnEvent();
} else {
console.log('没找到公开笔记按钮')
}
})
} else {
newJbjBtn.addEventListener("click", (e) => {
let ckbj_btn = document.querySelector('div.list-note-operation');
if (ckbj_btn) {
ckbj_btn.addEventListener("click", (e) => {
let note_message = document.querySelector("div.status-bar.note-message")
// let close_note = document.querySelector("div.close-note")
// 将容器添加到gkbj_btn的父节点中
if (note_message) {
// alert('找到了公开笔记按钮')
note_message.parentNode.insertBefore(btnContainer, note_message);
setTimeout(() => {
setBtnEvent();
}, 0);
// setBtnEvent();
} else {
console.log('没找到公开笔记按钮')
}
})
} else {
console.log('1648 没找到公开笔记按钮')
}
})
}
setTimeout(() => {
let ckbj_btn = document.querySelector('div.list-note-operation');
ckbj_btn.addEventListener("click", (e) => {
let note_message = document.querySelector("div.status-bar.note-message")
// let close_note = document.querySelector("div.close-note")
// 将容器添加到gkbj_btn的父节点中
if (note_message) {
// alert('找到了公开笔记按钮')
note_message.parentNode.insertBefore(btnContainer, note_message);
setTimeout(() => {
setBtnEvent();
}, 0);
// setBtnEvent();
} else {
console.log('没找到公开笔记按钮')
}
})
setTimeout(() => {
let note_message = document.querySelector("div.status-bar.note-message")
if(note_message){
note_message.parentNode.insertBefore(btnContainer, note_message);
setTimeout(() => {
setBtnEvent();
}, 0);
}
}, 3000);
let note_message = document.querySelector("div.status-bar.note-message")
if(note_message){
note_message.parentNode.insertBefore(btnContainer, note_message);
setTimeout(() => {
setBtnEvent();
}, 0);
}
}, 300);
// 设置事件监听器
function setBtnEvent() {
let editor = document.querySelector("div.ql-editor")
toBottomBtn.addEventListener("click", (e) => {
editor.scrollTo(0, editor.scrollHeight);
let thumb = document.querySelector("div.ZDscrollbar.custom-scrollbar > div > div")
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
if (thumb) {
thumb.style.top = scrollbar.clientHeight - thumb.clientHeight + "px"
// refreshScrollBarListener(scrollbar)
}
e.stopPropagation();
});
toTopBtn.addEventListener("click", (e) => {
editor.scrollTo(0, 0);
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
let thumb = document.querySelector("div.ZDscrollbar.custom-scrollbar > div > div")
if (thumb) {
thumb.style.top = "0px"
// refreshScrollBarListener(scrollbar)
}
e.stopPropagation();
});
hideBtn.addEventListener('click', (e) => {
// let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
let NotePanel = document.querySelector("div.resizable-component.note-pc")
NotePanel.style.display = "none";
});
editor.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
});
}
};
function refreshBtnlistener() {
let editor = document.querySelector("div.ql-editor")
let toBottomBtn = document.querySelector("button.scrollToBottomBtn")
let toTopBtn = document.querySelector("button.scrollToTopBtn")
toBottomBtn.addEventListener("click", (e) => {
editor.scrollTo(0, editor.scrollHeight);
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
if (scrollbar) {
// refreshScrollBarListener(scrollbar)
}
editor.stopPropagation();
});
toTopBtn.addEventListener("click", (e) => {
editor.scrollTo(0, 0);
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
if (scrollbar) {
// refreshScrollBarListener(scrollbar)
}
e.stopPropagation();
});
editor.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
});
let hideBtn = document.querySelector(".hide")
if (hideBtn) {
hideBtn.addEventListener('click', (e) => {
let NotePanel = document.querySelector("div.resizable-component.note-pc")
NotePanel.style.display = "none";
});
}
}
// 5.移动笔记面板：
// 此函数的作用是点击jbj_btn时设置，当视频全屏状态点击记笔记按钮时将笔记面板放到视频播放页里面
function setNotePanel() {
let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
let NotePanel = document.querySelector("div.resizable-component.note-pc");
// 类名resizable-component note-pc
// NotePanel.style.minWidth = '455px'
NotePanel.style.width = "460px"
NotePanel.style.height = "600px"
// NotePanel.style.position = "fixed !important";//这行代码使笔记保持在固定位置,即使网页向下滚动笔记都在原来位置且可见
// NotePanel.style.zIndex = "99999"
NotePanel.style.background = "rgba(0, 0, 100, 0.1)";
let bfyRect = bfy.getBoundingClientRect();
let NotePanelRect = NotePanel.getBoundingClientRect();
let bfyCenterX = bfyRect.left + bfyRect.width / 2;
let bfyCenterY = bfyRect.top + bfyRect.height / 2;
let NotePanelWidth = NotePanelRect.width;
let NotePanelHeight = NotePanelRect.height;
let NotePanelLeft = bfyCenterX - NotePanelWidth / 2;
let NotePanelTop = bfyCenterY - NotePanelHeight / 2;
NotePanel.style.left = NotePanelLeft + 'px';
NotePanel.style.top = NotePanelTop + 'px';
bfy.appendChild(NotePanel)
NotePanel.addEventListener('click', function (event) {
event.preventDefault();
event.stopPropagation();
})
NotePanel.addEventListener('dblclick', function (event) {
event.preventDefault();
event.stopPropagation();
});
// 鼠标移到NotePanel里面设置监听事件阻止滚轮事件冒泡,防止鼠标滚轮影响视频的音量
NotePanel.addEventListener('mouseenter', () => { NotePanel.addEventListener('wheel', (e) => { e.stopPropagation(); }) })
};
// 6.弧形按钮；
function refreshBar() {
let bar = document.querySelector("#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch > div.custom-bar-class")
if (bar && bar.style.display == "none") {
// return;
bar.style.display = "block";
refreshBarListener()
} else { setbar() }
}
function refreshBarListener() {
let note_pc = document.querySelector("div.resizable-component.note-pc")
bar.addEventListener('mouseover', (e) => {
// bar.title = "鼠标移开可显示笔记"
setTimeout(() => {
let NotePanel = document.querySelector("div.resizable-component.note-pc")
// NotePanel.style.left = NotePanel_x
if (NotePanel.style.display == "none") {
NotePanel.style.display = "block"
}
}, 0)
})
bar.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (isClose) {
let newJbjBtn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.video-note-inner');
newJbjBtn.click();
}
});
}
function setbar() {
let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
// if (bfy.clientHeight < 1076) { return }
let bar0 = document.querySelector("#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch > div.custom-bar-class")
if (bar0) return;
let bar = document.createElement('div');
// 添加类名到bar元素
bar.classList.add('custom-bar-class'); // 你可以将'custom-bar-class'替换为你想要的任何类名
bar.style.cursor = 'pointer';
bar.style.borderRadius = "100% 0 0 100%";
bar.style.width = '60px';
bar.style.height = '80%';
bar.style.background = "rgba(33, 55, 61, 0.07)";
// bar.style.background = "#1C1C1C";
// bar.style.opacity = "0";
bar.style.position = 'absolute';
bar.style.right = '0';
bar.style.top = '0';
// bar.style.opacity = "0.05"
bfy.appendChild(bar);
let isBarClicked = false;
bar.addEventListener('mouseover', (e) => {
setTimeout(() => {
let NotePanel = document.querySelector("div.resizable-component.note-pc")
////////////////////////////
if (NotePanel.style.top == "0px") {
NotePanel.style.height = "600px"
NotePanel.style.width = "460px"
NotePanel.style.left = "590px"
NotePanel.style.top = "240px"
}
///////////////////////////////
if (NotePanel.style.display == "none" && IsJbjClick) {
NotePanel.style.display = "block"
NotePanel.style.height = "600px"
NotePanel.style.width = "460px"
}
}, 0)
})
bar.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (isClose) {
let newJbjBtn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.video-note-inner');
newJbjBtn.click();
}
});
}
// 7.插入标题按钮
function pasteText(text) {
let textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
range.setEndAfter(textNode);
selection.removeAllRanges();
selection.addRange(range);
}
// 复制文本到剪贴板
async function copyToClipboard() {
let title;
let multi_page = document.querySelector("#multi_page")
if (!multi_page) {
title = document.querySelector("#viewbox_report > div.video-info-title > div > h1")?.getAttribute('title').trim();
} else {
let path = 'li.on>a, li.watched.on>a'; // 修改选择器语法以正确应用"或"逻辑
// // 获取 span 元素中的文本内容
let pageNum = document.querySelector(path)?.getAttribute('href');
let newPageNumber;
let match = pageNum.match(/p=(\d+)/);
if (match) {
// match[1] 存储的是正则表达式中第一个括号内匹配的内容，即数字部分
let pageNumber = match[1];
// 将数字转换为 "P" 加上 数字，并在后面加上空格
newPageNumber = 'P' + pageNumber + ' ';
}
title = document.querySelector(path)?.getAttribute('title');
title = newPageNumber + " " + title
}
if (title) {
try {
await navigator.clipboard.writeText(title);
// console.log('文本已复制到剪贴板', title);
return title;
} catch (err) {
console.error('无法复制文本: ', err);
}
} else {
console.warn('未找到匹配的标题元素');
}
}
function editorEvent() {
const editor = document.querySelector('.ql-editor[contenteditable="true"]');
// console.log("editor", editor);
editor.addEventListener('keydown', function (event) {
if (event.key === 'Enter' || event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
// 处理回车键按下事件
selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文
range = selection.getRangeAt(0);
// console.log("enter的range", range);
}
});
editor.addEventListener("click", function () {
selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文
range = selection.getRangeAt(0);
// console.log("点击的range", range);
})
editor.addEventListener('keydown', function (event) {
if (event.ctrlKey && event.key === 'End')
selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文
range = selection.getRangeAt(0);
})
editor.addEventListener('keydown', function (event) {
if (event.ctrlKey && event.key === 'Home')
selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文
range = selection.getRangeAt(0);
})
}
function InsertBtnEvent() {
let insertBox = document.querySelector("#web-toolbar > div > div")
if (insertBox) {
insertBox.style.display = 'inline-block';
return;
}
let bcBtn = document.querySelector("span.ql-save-btn");
if (!bcBtn) return;
let bcBtnBox = document.querySelector("#web-toolbar > div")
GM_addStyle(`
.styled-button {
background-color: #007bff;
color: #393e46;
// padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08);
}
`);
let insertBtn = document.createElement('button');
// let insertBox = document.createElement('div');
insertBox = document.createElement('div');
insertBox.className = 'insert-box';
insertBtn.className = 'styled-button';
// insertBtn.id = 'insert-btn';
insertBtn.style.top = '0'
insertBtn.innerText = 'P';
// insertBtn.style.color = '#393e46'; // 设置字体颜色为黑色
insertBtn.style.fontWeight = 'bold'; // 设置字体加粗
insertBtn.style.fontSize = "20px"
insertBox.style.display = 'inline-block';
insertBox.style.position = 'relative';
// insertBtn.classList.add('custom-button-insert'); // 假设类名为 'custom-button'
insertBtn.title = "插入视频标题"
insertBox.appendChild(insertBtn);
// bcBtnBox.insertBefore(insertBox, bcBtn)
// bcBtnBox.appendChild(insertBox)
// bcBtn.parentNode.insertBefore(insertBox, bcBtn)
bcBtnBox.insertBefore(insertBox, bcBtn)
insertBtn.addEventListener('click', async function () {
function swalEvent() {
GM_addStyle(`
.swal2-popup {
font-size: 20px !important; // 改变字体大小
width: 120px !important; // 改变宽度
hight: 100px !important; // 改变高度
background-color: #f0f0f0 !important;
display: flex;
}
.swal2-styled.swal2-confirm {
border: 0;
border-radius: 5px;
background: #11999e;
background-color: #3e4149 !important; // 确认按钮颜色
color: #444f5a;
font-size: 20px;
}
`)
}
if (!range) {
let bfy = document.querySelector('div.bpx-player-video-perch');
let bfyHeight = bfy.getBoundingClientRect().height;
let wh = window.innerHeight;
if (bfyHeight == wh) {
return
}
Swal.fire({
// title: '提示',
// title: '',
text: '请选择区域',
// icon: 'info',
})
swalEvent()
return;
}
try {
let text = await copyToClipboard(); // 使用await等待Promise解析
setTimeout(() => {
pasteText(text); // 确保pasteText接收实际的文本内容
}, 0);
// pasteText(text); // 确保pasteText接收实际的文本内容
} catch (err) {
console.error('从剪贴板读取文本时出错:', err);
}
})
}
// 笔记面板鼠标监听事件
function noteEvent() {
let note_pc = document.querySelector("div.resizable-component.note-pc");
if (note_pc) {
note_pc.addEventListener("contextmenu", function (event) {
// 阻止右击冒泡
event.stopPropagation();
// 检查是否选中了文本或图片
let selection = window.getSelection().toString().trim();
let selectedImages = note_pc.querySelectorAll(".ql-image-preview.active"); // 假设图片有 selected 类表示被选中
if (selection === "" && selectedImages.length === 0) {
event.preventDefault();
// 如果没有选中文本或图片，隐藏 note_pc
note_pc.style.display = "none";
}
});
}
}
// 点进笔记列表后获取笔记列表中的所有图片元素,为每个图片元素添加点击事件
function creatNoteImageClikEvent() {
setTimeout(() => {
let imgElements
let zoomedImage = document.querySelector('.zoomed-image');
let bpx = document.querySelector('.bpx-player-container');
// bfx 非全屏 data-screen="normal" 全屏data-screen="full" 网页全屏data-screen="web"
let data_screen = bpx.getAttribute('data-screen')
function imageClickListener() {
// 获取所有图片元素
imgElements = document.querySelectorAll('.ql-image-preview .img-preview');
for (let i = 0; i < imgElements.length; i++) {
const image = imgElements[i];
image.style.cursor = 'pointer';
image.title = "弹出"
image.addEventListener('mousedown', handleImageClick);
}
let isDragging = false;
let offsetX, offsetY;
function handleImageClick(event) {
const image = event.currentTarget;
zoomedImage.src = image.src; // 动态设置 zoomedImage 的 src
const rect = image.getBoundingClientRect();
const originalWidth = image.offsetWidth;
const originalHeight = image.offsetHeight;
const offsetX = 120;
const offsetY = 300;
const x = rect.left + window.scrollX + (originalWidth / 2) + offsetX;
const y = rect.top + window.scrollY + (originalHeight / 2) - offsetY;
// 设置放大图片的位置
zoomedImage.style.left = `${x - (originalWidth * 0.5)}px`; // 根据原始图片的宽度调整位置
zoomedImage.style.top = `${y - (originalHeight * 0.5)}px`; // 根据原始图片的高度调整位置
zoomedImage.style.display = 'block';
zoomedImage.style.opacity = '1';
// 添加鼠标悬停和离开事件监听器
zoomedImage.addEventListener('mouseover', handleZoomedImageMouseOver);
zoomedImage.addEventListener('dblclick', handleZoomedImageDblclick);
// 添加拖动事件监听器
zoomedImage.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
let data_screen = bpx.getAttribute('data-screen')
if (data_screen == 'full' || data_screen == 'web') {
document.body.removeChild(zoomedImage);
bpx.appendChild(zoomedImage);
} else {
bfx.removeChild(zoomedImage);
document.body.appendChild(zoomedImage);
}
}
function handleZoomedImageMouseOver() {
zoomedImage.style.transform = 'scale(0.7)'; // 初始放大比例
// if(IsMyNote){
// zoomedImage.style.transform = 'scale(0.6)'; // 初始放大比例
// }else{
// zoomedImage.style.transform = 'scale(0.8)'; // 初始放大比例
// }
zoomedImage.title = '双击关闭';
}
function handleZoomedImageDblclick() {
zoomedImage.style.opacity = '0';
setTimeout(() => {
zoomedImage.style.display = 'none';
zoomedImage.removeEventListener('mouseover', handleZoomedImageMouseOver);
zoomedImage.removeEventListener('mouseout', handleZoomedImageDblclick);
}, 300); // 与 transition 时间一致
}
function startDrag(event) {
isDragging = true;
offsetX = event.clientX - zoomedImage.offsetLeft;
offsetY = event.clientY - zoomedImage.offsetTop;
}
function drag(event) {
if (isDragging) {
zoomedImage.style.left = `${event.clientX - offsetX}px`;
zoomedImage.style.top = `${event.clientY - offsetY}px`;
}
}
function endDrag() {
isDragging = false;
}
}
if (!zoomedImage) {
// let bfy = document.getElementsByClassName("bpx-player-video-area")[0]
// 创建一个新的图片元素，用于显示放大后的图片
zoomedImage = document.createElement('img');
zoomedImage.className = 'zoomed-image';
zoomedImage.style.position = 'absolute';
zoomedImage.style.display = 'none';
zoomedImage.style.zIndex = 1000;
zoomedImage.style.cursor = 'pointer';
zoomedImage.style.maxWidth = 'none'; // 确保图片不受容器限制
zoomedImage.style.maxHeight = 'none'; // 确保图片不受容器限制
// if(IsMyNote){
// zoomedImage.style.transform = 'scale(0.6)'; // 初始放大比例
// }else{
// zoomedImage.style.transform = 'scale(0.8)'; // 初始放大比例
// }
zoomedImage.style.transform = 'scale(0.7)'; // 初始放大比例
zoomedImage.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
// alert("首次加载图片放大插件:" + data_screen)
if (data_screen == 'full' || data_screen == 'web') {
bpx.appendChild(zoomedImage);
imageClickListener()
} else {
document.body.appendChild(zoomedImage);
imageClickListener()
}
// imageClickListener()
} else {
// alert("非首次加载图片放大插件:" + data_screen)
if (data_screen == 'full' || data_screen == 'web') {
bpx.appendChild(zoomedImage);
}
imageClickListener()
}
}, 1500);
}
}//是183行这个结束括号 if (currentUrl.indexOf('https://www.bilibili.com/video/') === 0 || currentUrl.startsWith('https://www.bilibili.com/cheese/')
// Your code here...
})();