您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
此脚本是用于b站看视频同时在视频全屏页面记录笔记,同时增加了一些便利的功能
当前为
// ==UserScript== // @name b站笔记 // @namespace http://tampermonkey.net/ // @version 1.3.1 // @description 此脚本是用于b站看视频同时在视频全屏页面记录笔记,同时增加了一些便利的功能 // @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; ///////////////////////////////////// // 创建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 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'); const 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") const wyqp_btn = document.querySelector("div.bpx-player-ctrl-btn.bpx-player-ctrl-web") if (jbj_btn && qxd_btn && full_btn && wyqp_btn) { 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) { // 直接修改style属性来应用样式 newJbjBtn.style.marginRight = '25px'; newJbjBtn.style.cursor = 'pointer'; // 注意:颜色需要确保与CSS中定义的一致,这里直接应用白色 newJbjBtn.style.color = 'white'; newJbjBtn.addEventListener("click", (e) => { setTimeout(() => { jbjBtnOnclickEvent() }, 0); // 这里应该是具体的点击事件处理逻辑 // jbjBtnOnclickEvent() }); } 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); } } // 创建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节点") } } } 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节点") } } } } //////////////////////////////////////////// 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 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() // let NotePanel = document.querySelector("body > div.resizable-component.note-pc") // if (NotePanel) { // NotePanel.style.width = '450px' // } refreshScrollbar() // refreshWidthDivBox() // refreshOpacity() // refreshBtn() setTimeout(() => { refreshBtn() }, 0); back_note_btn_event() editorEvent() setTimeout(() => { InsertBtnEvent() }, 0); // refreshScrollbar() }) } } // 从笔记页面后退按钮的事件 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%' } // if (note_pc.style.width != "405px") { // note_pc.style.width = "405px" // } 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() console.log("1 if (jbj_btn_title == 记笔记)执行") // 笔记透明度 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.minWidth = "300px" 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("在代码416行没有找到note_pc") } if (note_pc.style.opacity != 1) { note_pc.style.opacity = 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() // refreshWidthDivBox() // refreshOpacity() refreshBtn() back_note_btn_event() } else { OnNoteListWheel() MyNoteBtnClick() scrollbarDisplay("hide") BtnDisplay("hide") // console.log("2:jbjBtnOnclickEvent()执行-按钮隐藏和滚动条隐藏已经执行") ckbj_btn_event() } 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") //使笔记始终保持在网页中固定位置,即使网页上下滚动,笔记始终都可见 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.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 = '300'; widthSlider.max = '1912'; widthSlider.step = '1'; widthSlider.value = note_pc.offsetWidth.toString(); // 初始值为当前宽度 // 设置宽度滑块样式 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'; } }); }); // 观察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); let note_content = document.querySelector("div.note-content") if (note_content) { note_content.parentNode.insertBefore(widthDivBox, note_content); } else { console.error("note_content元素不存在") } } // 2.笔记内容高度控制条 // 刷新笔记面板内容高度控制条 function refreshScrollbar() { // 类名:ZDscrollbar if (isFirefox()) { console.log('这是火狐浏览器'); return; } else { console.log('这不是火狐浏览器'); } 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("在633行未找到 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 element not found."); 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); alteration() 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); }); } 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"; //////////////////////////////////////////////// // // 共享的样式设置 // const sharedStyles = { // marginLeft: "4.2px", // // marginRight: "5px", // width: "37px", // height: "26px", // // backgroundColor: "#6CA0DC",//蓝 // backgroundColor: "#996699",//深紫色 // color: "white", // // color: "#333333", // // color: "#FFA500",//橙色 // // color: "#000000", //黑色 // // color: "#FFFF00", //黄色 // // color: "#F5F5DC", //米黄色 // borderRadius: "4px", // cursor: "pointer", // border: "none", // boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)", // // left: "6px" // }; // // 应用共享样式 // Object.assign(toTopBtn.style, sharedStyles); // Object.assign(toBottomBtn.style, sharedStyles); // Object.assign(hideBtn.style, sharedStyles); // 将按钮添加到容器中 btnContainer.appendChild(toTopBtn); btnContainer.appendChild(toBottomBtn); btnContainer.appendChild(hideBtn); 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 { alert('没找到公开笔记按钮') } // 设置事件监听器 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(); }); 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 = "800px" 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 = "405px" NotePanel.style.left = "590px" NotePanel.style.top = "240px" } /////////////////////////////// if (NotePanel.style.display == "none" && IsJbjClick) { 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(); } }); } // 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) 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); } } // Your code here... })();