// ==UserScript== // @name b站笔记 // @namespace https://bbs.tampermonkey.net.cn/ // @version 3.0.1 // @description 实现功能：：1、当视频全屏时让笔记面板嵌入视频页面内，不需要退出全屏，即可进行笔记记录，当视频是非全屏时让笔记面板出现在视频页面外边。2、笔记内容滚动定位：在笔记面板增加顶部直达、底部跳转及滚动条功能。3、笔记面板隐藏，隐藏后只需要将鼠标移到视频页面右侧，笔记面板便会自动显示。4、笔记截图弹出放大与面板宽度调整。5、笔记面板透明度调节。6、插入视频标题到笔记。7、截屏带时间标记。8、笔记列表快捷访问：在网页头部点击我的笔记按钮，会弹出一个面板可查看所有视频的笔记，再按钮可以关掉面板。9、将笔记以pdf导出到本地。10、电脑ctrl键快捷打开、隐藏、显示笔记面板，实现一步到位进入编辑状态。11、打开笔记后自动滚动到上次编辑位置并获取光标焦点。12、其他快捷键操作包括：调节透明度、插入当前字幕、插入当前视频标题、插入当前时间标记与视频截图、视频全屏界面调整笔记面板的位置、让笔记编辑区获取光标焦点。13、点击弹幕的复制按钮,将对应弹幕自动粘贴到笔记中。 // @author 繁星1678 // @match https://www.bilibili.com/video/* // @match https://www.bilibili.com/* // @icon https://static.hdslb.com/images/favicon.ico // @grant GM_addStyle // @license MIT // @require https://cdn.jsdelivr.net/npm/sweetalert2@11 // ==/UserScript== (function () { 'use strict'; let IsJbjClick = false; let bar; let selection; let range; let IsMyNote = false; let IsInsert = false; let isTmAddLisner=false let IsNotePcHightChange = false; let isClose = true; const currentUrl = window.location.href; let isCloseNoteList = false; let noteOpen=false let scrollH=null//前一次隐藏笔记面板前的滚动条高度 let position=null let targetNode=null let inputNumber = ''; // 用于存储输入的数字，调整透明度使用 let isBold = false//插入视频标题或字幕到笔记时是否加粗 let isCtrlPressed = false; // 记录Ctrl键是否按下 let otherKeyPressed = false; // 记录是否按下了其他键 let isZoomed = false; let imgloadedCount = 0;//pdf新窗口图片加载个数 let isdanmu = false; let iszimu = 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 () { initDraggable(iframe) // 移除 onload 处理函数，避免重复执行 iframe.onload = null; // 初始化拖动功能 }; ////////// } } function initDraggable(element) { let isDragging = false; let offsetX = 0; let offsetY = 0; element.addEventListener('mousedown', (e) => { // 修改为在 element 上添加监听器 isDragging = true; offsetX = e.clientX - element.offsetLeft; offsetY = e.clientY - element.offsetTop; }); document.addEventListener('mousemove', (e) => { if (isDragging) { element.style.left = (e.clientX - offsetX) + 'px'; element.style.top = (e.clientY - offsetY) + 'px'; } }); document.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 = `我的笔记`; 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 = `我的笔记`; } else { createIframeAndIsertDocument() // 笔记列表被打开，换成关闭笔记的图标 noteListsBtn.innerHTML = `关闭笔记` } 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/')) { 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.log('无法找到视频标题'); } 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); setTimeout(() => { let ckbj_btn = document.querySelector('div.list-note-operation'); if (ckbj_btn) { ckbj_btn.addEventListener("click", function (event) { setTimeout(() => { const ql_save_btn = document.querySelector('.ql-save-btn'); if (ql_save_btn) { ql_save_btn.parentNode.appendChild(saveBtn); } }, 5); }) } 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) { setTimeout(() => { 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); } }, 60); setTimeout(() => { let ckbj_btn = document.querySelector('div.list-note-operation'); if (ckbj_btn) { ckbj_btn.addEventListener("click", function (event) { setTimeout(() => { const ql_save_btn = document.querySelector('.ql-save-btn'); if (ql_save_btn) { ql_save_btn.parentNode.appendChild(saveBtn); } }, 5); }) } 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) { setTimeout(() => { const ql_save_btn = document.querySelector('.ql-save-btn'); if (ql_save_btn) { ql_save_btn.parentNode.appendChild(saveBtn); } }, 5); }) } else { console.log("586 没有找到ckbij按钮") } }, 800); }) } function saveAsPDF() { // let imgWidth = 1920; let imgWidth = screen.width; imgWidth = imgWidth * 0.7+'px'; let screenWidth = window.screen.width; let screenHeight = window.screen.height let newWidth = Math.floor(screenWidth * 0.46); let newHeight = screenHeight; const content = document.querySelector(".ql-editor"); if (!content) { console.error('无法找到编辑器内容'); return; } // 创建一个新的窗口，并设置位置 // const printWindow = window.open('', 'Print', 'width=500,height=400,left=350,top=330'); const printWindow = window.open('', 'Print', `width=${newWidth},height=${newHeight},left=0,top=0`); // 将内容复制到新窗口中 printWindow.document.open(); printWindow.document.write(` ${title}
正在加载笔记中的图片,请稍等... 0%
打开视频


${transformContent(content.innerHTML)} `); printWindow.document.close(); let tooltip = printWindow.document.querySelector('.tooltip') // 加载图片时显示进度百分数 let imgs = printWindow.document.querySelectorAll('.img-preview'); if (imgs.length > 0) { let timeoutId; function onTimeout() { tooltip.textContent = '图片加载超时,请重试'; setTimeout(() => { printWindow.close(); }, 1500); } imgs.forEach(img => { img.onload = () => { imgloadedCount++; const progress = Math.floor((imgloadedCount / imgs.length) * 100); tooltip.querySelector('#progress').textContent = `${progress}%`; if (imgloadedCount === imgs.length) { imgloadedCount = 0; clearTimeout(timeoutId); tooltip.querySelector('#progress').textContent = "100%"; setTimeout(() => { tooltip.remove(); printWindow.print(); setTimeout(() => { // console.log('打印完成或取消，开始调整窗口') const adjustedBody = printWindow.document.body; adjustedBody.classList.add('adjusted'); // 添加class以调整模版样式 // return; }, 1100); }, 50); return; } } }) timeoutId = setTimeout(onTimeout, 45000); // 45秒后超时,关闭窗口 }else{ tooltip.remove(); printWindow.print(); } } 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 = `${tag.textContent}`; tag.outerHTML = newLink; } }); // 处理p标签文字样式 let pElements = doc.querySelectorAll('p'); pElements.forEach(pElement => { const spans = pElement.querySelectorAll('span, strong, u, s'); spans.forEach(span => { // 获取颜色和背景色的匹配结果 let colorMatch = span.classList.value.match(/ql-color-#([a-fA-F0-9]{6})/); let 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]}`; } if(bgMatch){ span.style.background = `#${bgMatch[1]}`; } }); }); // 处理ul,ol标签中的文字样式 let liElements = doc.querySelectorAll('li'); liElements.forEach(liElement => { const lis = liElement.querySelectorAll('span, strong, u, s'); const lis1 = liElement.querySelectorAll('li'); lis.forEach(li => { let colorMatch = li.classList.value.match(/ql-color-#([a-fA-F0-9]{6})/); let bgMatch = li.classList.value.match(/ql-bg-#([a-fA-F0-9]{6})/); // console.log('li colorMatch:' + colorMatch); // console.log('li bgMatch:' + bgMatch); if (colorMatch) { li.style.color = `#${colorMatch[1]}`; } if(bgMatch){ li.style.background = `#${bgMatch[1]}`; } }) // const cb = span.classList.value.match(/ql-color-(#[0-9a-fA-F]{6})\s+ql-bg-(#[0-9a-fA-F]{6})/); }) 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'); let jbj_btn = document.querySelector('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 qxd_btn = document.querySelector('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 full_btn = document.querySelector("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) { // 防止当笔记面板在视频页面后需要两次右键才能打开右键菜单 // note_pc.addEventListener('contextmenu', event => { // event.stopPropagation() // }) close_btn_event() //使笔记始终保持在网页中固定位置,即使网页上下滚动,笔记始终都可见 GM_addStyle(` .fixed-position { position: fixed !important; min-width: 460px !important; } `); note_pc.classList.add('fixed-position'); 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'); const newJbjBtn = document.querySelector('div.video-note-inner'); if (newJbjBtn) { // 直接修改style属性来应用样式 newJbjBtn.style.marginRight = '25px'; newJbjBtn.style.cursor = 'pointer'; // 注意：颜色需要确保与CSS中定义的一致，这里直接应用白色 newJbjBtn.style.color = 'white'; newJbjBtn.addEventListener("click", (e) => { // jbjBtnOnclickEvent() setTimeout(() => { jbjBtnOnclickEvent() }, 50); }); // noteEvent() setWidthDivBox() // refreshOpacity() setOpacity() // setBtn() ckbj_btn_event() // saveNoteAsPdf() setTimeout(() => { noteEvent() 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){ Screenshot() IsJbjClick=true if(note_pc.style.display != 'none'){ editorScrollToBottom() } setbar() // setScrollbar() refreshScrollbar() setBtn() setTimeout(() => { InsertBtnEvent() editorEvent() editorScrollToLastY() let editor = document.querySelector("div.note-editor") if(editor){ creatNoteImageClikEvent() }else{ console.log('没有找到编辑器,无法添加图片点击事件') } }, 1200); } }, 200); setBtn() saveNoteAsPdf() }, 200); 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() }, 60); // full_btn_event() }) wyqp_btn.addEventListener("click", function () { setTimeout(() => { wyqpBtnEvent() }, 60); }) // ctrl打开、隐藏、显示笔记 document.addEventListener('keydown', function (event) { // 检查是否按下Ctrl键 if (event.key === 'Control') { isCtrlPressed = true; // 标记Ctrl键已按下 otherKeyPressed = false; // 重置其他键的状态 // if(!otherKeyPressed){ // isCtrlPressed = true; // 标记Ctrl键已按下 // otherKeyPressed = false; // 重置其他键的状态 // }//ctrl打开笔记后记录后，需要按两次ctrl才能关闭笔记板 } else{ isCtrlPressed = false; // 如果Ctrl键已按下，并且按下了其他键 otherKeyPressed = true; // 标记按下了其他键 } document.addEventListener('keydown', function (event) { // 检查是否按下Ctrl键 if (event.key != 'Control') { isCtrlPressed = false; // 标记Ctrl键已按下 otherKeyPressed = true; // 重置其他键的状态 } }); }); document.addEventListener('keyup', function (event) { if(event.key != 'Control'){ isCtrlPressed = false; } // 检查是否释放了Ctrl键 if (event.key === 'Control') { // isCtrlPressed = false; if (!otherKeyPressed&&isCtrlPressed) { console.log('单独按下Ctrl键并释放，执行逻辑'); let note_pc = document.querySelector("div.resizable-component.note-pc") let jbj_btn = document.querySelector('div.video-note-inner'); let jbj_btn_title = newJbjBtn.innerText.trim() if (jbj_btn) { if (note_pc && note_pc.style.display === 'none' && !IsJbjClick) { jbj_btn.click() setTimeout(() => { let ckbj_btn = document.querySelector('div.list-note-operation'); let editor = document.querySelector("div.note-editor") if (ckbj_btn && !editor) { ckbj_btn.click() } }, 50); } else if (note_pc && note_pc.style.display === 'none' && IsJbjClick) { // console.log('按下了菜单键,笔记被显示') note_pc.style.display = 'block' setTimeout(() => { editorScrollToLastY() setTimeout(() => { let editor=document.querySelector('.ql-editor') if(editor){ // if(editor.scrollTop<=300||editor.scrollHeight-editor.scrollTop<=500){ // editor.scrollTop = editor.scrollHeight // } if(scrollH<=300||editor.scrollHeight-scrollH<=700){ editor.scrollTop = editor.scrollHeight } } }, 5); }, 500); let bfy = document.querySelector('div.bpx-player-video-perch'); let bfyHeight = bfy.getBoundingClientRect().height; let wh = window.innerHeight; // 全屏时bfyHeight>=1080，网页全屏时bfyHeight=wh let isqp = bfyHeight === wh || bfyHeight >= 1080; if (isqp) { // 如果是全屏，将笔记显示在页面中间 // note_pc.style.left = "780px"; // note_pc.style.top = "180px"; if (note_pc.style.left != 0 && note_pc.style.right != 0||note_pc.style.left>=1487) { note_pc.style.left = "1006px" } note_pc.style.top = "139px" note_pc.style.width = "460px" note_pc.style.height = "600px" } else { note_pc.style.top = '120px' note_pc.style.left = '855px' note_pc.style.width = "460px" note_pc.style.height = "600px" } } else if (note_pc && note_pc.style.display != 'none') { // console.log('按下了菜单键,笔记被隐藏') let editor = document.querySelector('.ql-editor'); selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文 if(selection){ range = selection.getRangeAt(0); } // console.log("点击的range", range); // scrollH = document.querySelector('.ql-editor').scrollTop if(editor.scrollTop>=200){ scrollH = editor.scrollTop } getCursorPositionInEditor(editor) note_pc.style.display = 'none' } } else { console.log('未找到jbj_btn') } } // 重置状态 isCtrlPressed = false; // 标记Ctrl键已释放 otherKeyPressed = false; // 重置其他键按下状态 } }); // ctrl+左/下/右键移动笔记面板左、中、右 document.addEventListener('keydown', function (event) { if (event.ctrlKey) { let bfy = document.querySelector('div.bpx-player-video-perch'); let bfyHeight = bfy.getBoundingClientRect().height; let wh = window.innerHeight; let isqp = bfyHeight === wh || bfyHeight >= 1080; let note_pc = document.querySelector("div.resizable-component.note-pc"); if (event.key === 'ArrowLeft') { event.preventDefault(); if (!note_pc || note_pc.style.display === 'none') return; // 如果找不到或隐藏，直接返回 note_pc.style.left = '0'; // 或者根据实际需要调整 note_pc.style.right = ''; // 清除 right 属性 note_pc.style.width = "460px" note_pc.style.height = "600px" } else if (event.key === 'ArrowRight') { event.preventDefault(); if (!note_pc || note_pc.style.display === 'none') return; // 如果找不到或隐藏，直接返回 note_pc.style.right = '0'; // 或者根据实际需要调整 note_pc.style.left = ''; // 清除 left 属性 note_pc.style.width = "460px" note_pc.style.height = "600px" }else if(event.key === 'ArrowDown'){ event.preventDefault(); if (!note_pc || note_pc.style.display === 'none') return; // 如果找不到或隐藏，直接返回 note_pc.style.left = "1006px" note_pc.style.top = "139px" note_pc.style.width = "460px" note_pc.style.height = "600px" } } }); // ctrl+上键插入当前字幕 document.addEventListener('keydown', async function (event) { if (event.ctrlKey && event.key == "ArrowUp") { isBold = false event.preventDefault(); try { let subtitle = document.querySelector('.bpx-player-subtitle-panel-text')?.textContent if(!subtitle){return} // subtitle = '字幕: '+ subtitle iszimu=true if (subtitle) { pasteTextToEditor(subtitle) } } catch (err) { console.error('从剪贴板读取文本时出错:', err); } } }) // ctrl+c键插入当前视频标题 document.addEventListener('keydown', function (event) { if (event.ctrlKey && (event.key === 'c'||event.key === 'C')) { let editor = document.querySelector('.ql-editor'); // 替换为实际的编辑器元素 // if(editor){ // editor.focus(); // } // 检查是否选中了文本或图片 let selection1 = editor.ownerDocument.defaultView.getSelection().toString().trim(); let selectedImages = note_pc.querySelectorAll(".ql-image-preview.active"); // 如果图片有 selected 类，那么该图片是被选中状态 if (selection1 === "" && selectedImages.length === 0) { event.preventDefault(); let text = copyVideoTitleToClipboard(); // 使用await等待Promise解析 pasteTextToEditor(text) } // 获取当前的选择对象 let selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection if (selection && selection.rangeCount > 0) { range = selection.getRangeAt(0); } } }); // ctrl+x快捷键插入截图 document.addEventListener('keydown', function (event) { if (event.ctrlKey && (event.key === 'x'||event.key === 'X')) { let editor = document.querySelector('.ql-editor'); // 替换为实际的编辑器元素 // 检查是否选中了文本或图片 // selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文 selection = window.getSelection().toString().trim(); // 更安全地获取selection，考虑editor所在的文档上下文 let selectedImages = note_pc.querySelectorAll(".ql-image-preview.active"); // 假设图片有 selected 类表示被选中 if (selection === "" && selectedImages.length === 0) { event.preventDefault(); let tp = document.querySelector("span.ql-capture-btn.ql-bar"); if (tp) { if (selection != undefined && selection > 0 && editor.contains(range.startContainer) || editor.contains(range.endContainer)) { tp.click(); }else{ setCursorAtBottom(editor) tp.click(); } // tp.click(); setTimeout(() => { creatNoteImageClikEvent() // scrollH = editor.scrollTop getCursorPositionInEditor(editor) // editor.scrollTo(0, scrollH); }, 50); } selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文 if(selection){ range = selection.getRangeAt(0); } } // scrollH = document.querySelector('.ql-editor').scrollTop } }); // 点击弹幕的复制按钮后，自动粘贴到笔记中 // let bfy = document.querySelector('div.bpx-player-video-perch'); document.addEventListener('copy', async (event) => { // console.log('弹幕被复制') let copyEl = event.target; if (copyEl.parentNode.classList.contains("bpx-player-container")) { isBold = false // let textNode let dmText // let editor = document.querySelector('.ql-editor'); try { dmText = await navigator.clipboard.readText(); // 从剪贴板读取文本 if(!dmText){return} isdanmu=true // dmText = "弹幕:" + dmText pasteTextToEditor(dmText) // console.log('已复制-', dmText) } catch (err) { console.error('读取剪贴板内容失败:', err); } } }) // 分p视频播放另一个视频时，将笔记面宽高和位置调整为默认状态 let videoEl = document.querySelector("div.bpx-player-video-wrap > video"); videoEl.addEventListener('loadeddata', function () { setTimeout(() => { let note_pc = document.querySelector("div.resizable-component.note-pc") if(note_pc){ note_pc.style.left = "1006px" note_pc.style.top = "139px" note_pc.style.width = "460px" note_pc.style.height = "600px" } },500) }) } observer.disconnect(); } } // 创建MutationObserver实例 const observer = new MutationObserver(moveButtonWhenDetected); // 配置观察选项：子节点变化 const config = { childList: true, subtree: true }; // 开始观察body（或其它合适的容器） observer.observe(document.body, config); // 确保DOMContentLoaded后也尝试执行一次，以防元素一开始就存在 window.addEventListener('DOMContentLoaded', moveButtonWhenDetected); // 获取视频帧地址 function getVideoFrameUrl() { let videoEl = document.querySelector('video'); let currentPlayUrl; let pUrl = window.location.href; let currentTime = videoEl.currentTime; // 四舍五入，小数点保留一位 currentTime = Math.round(currentTime * 10) / 10; // console.log('当前时间:' + currentTime); // 计算小时、分钟、秒 let hours = Math.floor(currentTime / 3600); // 小时 let minutes = Math.floor((currentTime % 3600) / 60); // 分钟 let seconds = Math.floor(currentTime % 60); // 秒 // 创建一个 URL 对象 let url = new URL(pUrl); // 获取基础URL（不包括查询参数） let baseUrl = url.origin + url.pathname; // https://www.bilibili.com/video/BV1RL411T7Ai // console.log('baseUrl:' + baseUrl); // 获取查询参数中的 p 值 let pValue = url.searchParams.get('p'); // '2' if(pValue!=null&&pValue!=undefined){ if (pValue > 1) { currentPlayUrl = baseUrl + '?' + 't=' + currentTime + '&p=' + pValue; } else { currentPlayUrl = baseUrl + '?' + 't=' + currentTime; } }else{ currentPlayUrl = baseUrl + '?' + 't=' + currentTime; } // console.log('951currentPlayUrl:' + currentPlayUrl); // 返回当前播放URL和格式化时间 return { url: currentPlayUrl, time: hours > 0 ? `${hours}:${minutes}:${seconds}` : `${minutes}:${seconds}`, p: pValue!=null&&pValue!=undefined?'P'+pValue:'' }; } // 删除时间戳与图片之间的空格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') { // 检查当前

元素的子元素 if (currentImage.children.length === 1 && currentImage.children[0].tagName === 'BR') { currentImage.parentNode.removeChild(currentImage); } else { console.log('当前

元素中有其他子元素，不会移除'); } } else { console.log('没有找到匹配的元素'); } } // 插入截屏的同时也插入时间标记 function Screenshot() { // 插入截屏按钮 setTimeout(() => { 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.removeEventListener("click", (e) => { tm.click() creatNoteImageClikEvent(); // tm.click() setTimeout(() => { deleteBr() }, 2500) }) tp.addEventListener("click", (e) => { tm.click() creatNoteImageClikEvent(); // tm.click() setTimeout(() => { deleteBr() }, 2500) }); 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(); setTimeout(() => { let editor=document.querySelector('.ql-editor') if(editor){ if(editor.scrollHeight-editor.scrollTop<=900){ // editor.scrollTo(0, editor.scrollHeight); editor.scrollTop = editor.scrollHeight scrollH = editor.scrollHeight } selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文 if(selection){ range = selection.getRangeAt(0); }else{ console.log('无法获取选择区') } // 获取当前光标位置并存储在变量中,下次打开笔记同步光标位置 getCursorPositionInEditor(editor) } }, 700); observer.disconnect(); observerActive = false; } }; const observer = new MutationObserver(insert); const config = { childList: true, subtree: true }; observer.observe(note_editor, config); observerActive = true; }); } else { console.log("无法找到截屏按钮或时间标记按钮"); } }, 1000); } 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 bfy = document.querySelector('div.bpx-player-video-perch'); // 防止按菜单键时,焦点在电脑任务栏上取用默认操作 // bfy.focus() 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节点") } setTimeout(() => { note_pc.style.left = "1006px" note_pc.style.top = "139px" }, 10); } setTimeout(() => { let editor = document.querySelector('.ql-editor'); if(editor&&editor.style.display!="none"){ editorScrollToLastY() } }, 1); } // 滚动到原来位置函数 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") // 防止按菜单键时,焦点在电脑任务栏上取用默认操作 // bfy.focus() 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节点") } setTimeout(() => { note_pc.style.left = "1006px" note_pc.style.top = "139px" }, 10); } } setTimeout(() => { let editor = document.querySelector('.ql-editor'); if(editor&&editor.style.display!="none"){ editorScrollToLastY() } }, 1); } //////////////////////////////////////////// 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 setTimeout(() => { 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 = "97.5%" setTimeout(() => { editorScrollToBottom() }, 50); // editorScrollToBottom() creatNoteImageClikEvent()//点击笔记中图片触发事件 Screenshot() isTmAddLisner = true InsertBtnEvent() refreshScrollbar() back_note_btn_event() editorEvent() setTimeout(() => { InsertBtnEvent() editorScrollToBottom() }, 65); }, 5); }) } } // 从笔记页面后退按钮的事件 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" } if(!isClose){ let note_pc = document.querySelector("div.resizable-component.note-pc") if(note_pc&¬e_pc.style.display==='none'){ note_pc.style.display = 'block' } } 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 = '97.5%'; } 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.style.height = '600px' 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 isTmAddLisner = true setTimeout(() => { let note_editor = document.querySelector("div.note-editor") if(note_editor){ note_editor.style.height = "97.5%" editorEvent() back_note_btn_event() // 给笔记中图片添加点击事件,点击图片弹出 creatNoteImageClikEvent() // 插入截屏的同时插入时间标记 Screenshot() // editorEvent() InsertBtnEvent() editorScrollToBottom() refreshScrollbar() } }, 100); } else { OnNoteListWheel() MyNoteBtnClick() scrollbarDisplay("hide") } 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" } } // 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(); }) setTimeout(() => { // 添加事件监听器来响应滑块的变化 // 笔记中有图片时,图片宽度也需要单独调节 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'; }); }, 50); // 将元素添加到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.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) { if (isFirefox()) { // console.log('这是火狐浏览器'); return; } if(isEdge()){ // console.log('这是Edge浏览器'); return; } 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() { if (isFirefox()) { // console.log('这是火狐浏览器'); return; } if(isEdge()){ // console.log('这是Edge浏览器'); return; } 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); // 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() { if (isFirefox()) { // console.log('这是火狐浏览器'); return; } if(isEdge()){ // console.log('这是Edge浏览器'); return; } 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 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('label');////// 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"; let lab2 = document.createElement('label'); 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 = '0.99'; opacitySlider.step = '0.01'; 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) { e.preventDefault(); e.stopPropagation(); let value = opacitySlider.value; note_pc.style.opacity = 1 - value; // 调整透明度 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); } // 监听键盘事件 document.addEventListener('keydown', function (event) { if (event.altKey && (event.key >= '0' && event.key <= '9')) { event.preventDefault(); // 阻止在其他输入区域的默认行为 event.stopPropagation(); let note_pc = document.querySelector("div.resizable-component.note-pc") let opacitySlider = document.querySelector('.opacitySlider') let editor = document.querySelector("div.ql-editor") if(editor){ editor.blur() } // 添加输入的数字 inputNumber += event.key; // 如果输入的第一个数字是 0，直接设置透明度为 0 if (inputNumber.length === 1 && inputNumber[0] === '0') { note_pc.style.opacity = 1; // 设置为 0% 透明度 document.querySelector('.sliderLabel2').textContent = '0%'; // 更新显示 opacitySlider.value=0 inputNumber = ''; // 重置输入 return; // 结束事件处理 } // 限制输入为两位数字 if (inputNumber.length === 2) { // 让笔记面板失去焦点，避免调整透明度时在笔记面板输入字符 // if(editor){ // editor.blur() // } inputNumber = inputNumber.slice(-2); // 保留最后两位 let opacityValue = parseFloat(inputNumber) / 100; // 将输入值转换为 0-1 范围的透明度 if (opacityValue >= 0 && opacityValue <= 1) { note_pc.style.opacity = 1 - opacityValue; // 设置透明度 document.querySelector('.sliderLabel2').textContent = inputNumber + '%'; // 更新显示 opacitySlider.value = opacityValue; // 同步更新滑块的值 inputNumber = ''; } } } }); //静态 仅适用于笔记面板未隐藏状态，按alr键设置editor光标焦点 function setEditorFocus(editor){ if(editor){ if(!isEditorFocused(editor)){ if(targetNode!=null&&targetNode!=undefined&&position!=null&&position!=undefined&&position!=-1){ if(editor.scrollHeight-editor.scrollTop<=900){ setCursorAtBottom(editor) editor.scrollTop=editor.scrollHeight }else{ setCursorAtNodePosition(editor, targetNode, position) } }else{ editor.scrollTop=editor.scrollHeight // setCursorAtBottom(editor) } }else{ let bfy = document.querySelector('div.bpx-player-video-perch'); scrollH = editor.scrollTop editor.blur() bfy.focus() } // editor.focus() scrollH = editor.scrollTop getCursorPositionInEditor(editor) } } // 清空输入状态 document.addEventListener('keyup', function (event) { if (event.key === 'Alt') { // 清空输入数字 let editor = document.querySelector("div.ql-editor") inputNumber = ''; setTimeout(() => { setEditorFocus(editor) setTimeout(() => { if(editor.scrollTop<=300||editor.scrollHeight-editor.scrollTop<=700){ editor.scrollTop=editor.scrollHeight } }, 0); }, 50) } }); /////////////////////////////////测试线//////////////////////////////////// // 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) => { setTimeout(() => { 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('没找到公开笔记按钮') } }, 100); }) } else { newJbjBtn.addEventListener("click", (e) => { let ckbj_btn = document.querySelector('div.list-note-operation'); if (ckbj_btn) { ckbj_btn.addEventListener("click", (e) => { setTimeout(() => { 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('没找到公开笔记按钮') } }, 5); }) } 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); // scrollH = document.querySelector('.ql-editor').scrollTop // scrollH = document.querySelector('.ql-editor').scrollTop 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) } setCursorAtBottom(editor) e.stopPropagation(); }); toTopBtn.addEventListener("click", (e) => { editor.scrollTo(0, 0); // scrollH = document.querySelector('.ql-editor').scrollTop 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) } setCursorAtTop(editor) e.stopPropagation(); }); hideBtn.addEventListener('click', (e) => { let editor = document.querySelector('.ql-editor'); if (editor) { scrollH = editor.scrollTop getCursorPositionInEditor(editor) } // 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") // scrollH = document.querySelector('.ql-editor').scrollTop 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); // scrollH = document.querySelector('.ql-editor').scrollTop let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar") if (scrollbar) { // refreshScrollBarListener(scrollbar) } editor.stopPropagation(); }); toTopBtn.addEventListener("click", (e) => { editor.scrollTo(0, 0); // scrollH = document.querySelector('.ql-editor').scrollTop 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 editor = document.querySelector('.ql-editor'); if(editor){ scrollH = editor.scrollTop getCursorPositionInEditor(editor) } // scrollH = document.querySelector('.ql-editor').scrollTop 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"); NotePanel.style.background = "rgba(0, 0, 100, 0.1)"; NotePanel.style.left = "1006px" NotePanel.style.top = "139px" NotePanel.style.width = "460px" NotePanel.style.height = "600px" bfy.appendChild(NotePanel) NotePanel.addEventListener('click', function (event) { // event.preventDefault(); event.stopPropagation(); }) NotePanel.addEventListener('dblclick', function (event) { // event.preventDefault(); event.stopPropagation(); }); // editorScrollToBottom() // 鼠标移到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 editorScrollToBottom() { setTimeout(() => { let ql_editor = document.querySelector(".ql-editor"); if (ql_editor) { // 将滚动位置设置为内容的底部 // ql_editor.scrollTo(0, ql_editor.scrollHeight); ql_editor.scrollTop = ql_editor.scrollHeight // 将焦点设置到 ql_editor // 创建一个范围并将光标移动到末尾 setTimeout(() => { setCursorAtBottom(ql_editor) }, 5); // getCursorPositionInEditor(ql_editor) } else { console.log("没有找到 ql_editor"); } }, 180); } //滚动到上次编辑时的位置函数 function editorScrollToLastY() { // console.log("2262:scrollH:",scrollH) if(scrollH!=null&&scrollH!=undefined){ let editor=document.querySelector('.ql-editor') // document.querySelector('.ql-editor').focus() // console.log("editorScrollToLastY 上中scrollH:",scrollH) if(!editor){ return } if(editor.scrollHeight-scrollH<=200){ // editor.scrollTop=editor.scrollHeight-900 editorScrollToBottom() // setTimeout(() => { // editorScrollToBottom() // }, 100); // editorScrollToBottom() }else if(scrollH<=200){ editorScrollToBottom() // editorScrollToTop() }else{ editor.scrollTop = scrollH setTimeout(() => { setCursorAtNodePosition(editor, targetNode, position) }, 5); // editor.focus() } }else{ editorScrollToBottom() } } 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.display == "none" && IsJbjClick) { NotePanel.style.display = "block" bar.title ='' editorScrollToLastY() setTimeout(() => { let editor = document.querySelector('.ql-editor') if (editor) { if (editor.scrollTop <= 300 || editor.scrollHeight - editor.scrollTop <= 700) { editor.scrollTop = editor.scrollHeight } } }, 5); // 滚动到上一次隐藏笔记面板时的位置 let bfy = document.querySelector('div.bpx-player-video-perch'); let bfyHeight = bfy.getBoundingClientRect().height; let wh = window.innerHeight; // 全屏时bfyHeight>=1080，网页全屏时bfyHeight=wh let isqp = bfyHeight === wh || bfyHeight >= 1080; if (isqp) { // 如果是全屏，将笔记显示在页面中间 // NotePanel.style.left = "780px"; // NotePanel.style.top = "180px"; if (NotePanel.style.left != 0 && NotePanel.style.right != 0 || NotePanel.style.left >= 1487) { NotePanel.style.left = "1006px" } NotePanel.style.top = "139px" NotePanel.style.width = "460px" NotePanel.style.height = "600px" } else { NotePanel.style.top = '120px' NotePanel.style.left = '855px' NotePanel.style.height = "600px" NotePanel.style.width = "460px" } } if(!IsJbjClick){ bar.title = "点击打开笔记" } }, 0) }) //////////////////////////////////// ////////////////////////////////////// bar.addEventListener('click', (e) => { 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(); // } if (isClose) { let jbj_btn = document.querySelector('div.video-note-inner'); if (jbj_btn) { jbj_btn.click() setTimeout(() => { let ckbj_btn = document.querySelector('div.list-note-operation'); let editor = document.querySelector("div.note-editor") if (ckbj_btn && !editor) { ckbj_btn.click() } }, 50); } } }); }// function setbar() { // 7.插入标题按钮及相关事件 // 粘贴标题文本到笔记编辑指定区 function pasteTextToEditor(text) { if(text==null||text==undefined){ return } let editor = document.querySelector('.ql-editor'); // 替换为实际的编辑器元素 let textNode let strongNode // 创建一个 元素，并将文本设置为加粗内容 if (isBold) { // 创建一个 元素，视频标题专用 let pUrl = window.location.href strongNode = document.createElement('strong') let aEl = document.createElement('a'); aEl.className = 'video-title-link' // aEl.href = '#'; aEl.href = pUrl aEl.textContent = text aEl.target = '_self' strongNode.appendChild(aEl); textNode = strongNode } else { // 创建一个普通的文本节点 字幕、弹幕专用的 let aEl1 = document.createElement('a'); // let currentPlayUrl,time = getVideoFrameUrl() let { p,url: currentPlayUrl, time } = getVideoFrameUrl() // console.log('粘贴函数currentPlayUrl:',currentPlayUrl) aEl1.href = currentPlayUrl if(isdanmu){ p!=''&&p!=null&&p!=undefined?aEl1.textContent = text+'('+'弹幕:'+p+'-'+time+')':aEl1.textContent = text+'('+'弹幕:'+time+')' isdanmu=false }else if(iszimu){ p!=''&&p!=null&&p!=undefined?aEl1.textContent = text+'('+'字幕:'+p+'-'+time+')':aEl1.textContent = text+'('+'字幕:'+time+')' iszimu=false } // p!=''&&p!=null&&p!=undefined?aEl1.textContent = text+'('+p+'-'+time+')':aEl1.textContent = text+'('+time+')' // aEl1.textContent = p+'-'+time+'-'+text aEl1.target = '_self' aEl1.className = 'zdm-link' textNode = aEl1 } // 插入该节点到范围中 if (selection != undefined && selection > 0 && editor.contains(range.startContainer) || editor.contains(range.endContainer)) { range.insertNode(textNode); // 调整范围的位置 setTimeout(() => { // 直接将光标移到新插入内容的末尾 range.setStartAfter(textNode); range.setEndAfter(textNode); // 清除之前的选择，并重新设置选择范围 selection.removeAllRanges(); selection.addRange(range); }, 50); } else { // setCursorAtBottom(editor) setTimeout(() => { editor.appendChild(textNode); // 尝试设置光标到末尾 const lastChild = editor.lastChild; if (lastChild) { const lastRange = document.createRange(); lastRange.setStartAfter(lastChild); lastRange.collapse(true); selection.removeAllRanges(); selection.addRange(lastRange); } }, 150); } // setCursorAtBottom(editor) // 确保编辑器有焦点 // 异步操作以确保 DOM 更新完成 setTimeout(() => { if(editor.scrollHeight-editor.scrollTop<=600){ // editor.scrollTo(0, editor.scrollHeight); editor.scrollTop = editor.scrollHeight scrollH = editor.scrollHeight } // selection = window.getSelection(); setTimeout(() => { // 获取当前光标位置并存储在变量中 // scrollH = editor.scrollTop; getCursorPositionInEditor(editor); // 假设这是自定义函数 }, 0); }, 50); } // 复制视频标题文本到剪贴板 // async function copyVideoTitleToClipboard() function copyVideoTitleToClipboard() { let title=''; isBold=true 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 } return title } // 设置插入标题按钮 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) insertBtn.removeEventListener('click', insertTitleInEditor); insertBtn.addEventListener('click', async function () { insertTitleInEditor() }); async function insertTitleInEditor(){ try { let text = await copyVideoTitleToClipboard(); // 使用await等待Promise解析 setTimeout(() => { pasteTextToEditor(text); // 确保pasteTextToEditor接收实际的文本内容 }, 0); // pasteTextToEditor(text); // 确保pasteTextToEditor接收实际的文本内容 } catch (err) { console.error('从剪贴板读取文本时出错:', err); } } } // 获取光标在editor的位置 function getCursorPositionInEditor(editor) { let selection = window.getSelection(); // 检查是否有选中内容 if (selection.rangeCount > 0) { let range = selection.getRangeAt(0); // 获取起始节点 let startNode = range.startContainer; let startOffset = range.startOffset; // 如果光标在editor内部 if (editor.contains(startNode)) { // let position = 0; position = 0; // 计算光标相对于editor开头的位置 if (startNode.nodeType === Node.TEXT_NODE) { position = Array.from(startNode.parentNode.childNodes).slice(0, Array.prototype.indexOf.call(startNode, startNode)).reduce((acc, node) => acc + (node.nodeType === Node.TEXT_NODE ? node.length : 0), 0) + startOffset; } targetNode = startNode return { position: position, node: startNode // 返回光标所在的节点 }; } } return { position: -1, // 如果没有选中内容或光标不在editor中，返回-1 node: null // 如果光标不在editor中，返回null }; } // 将光标设置到 editor 的指定位置 function setCursorAtNodePosition(editor, targetNode, offset) { // let range = document.createRange(); // let selection = window.getSelection(); // // 清空当前选择 // selection.removeAllRanges(); // 确保目标节点存在，并且偏移量在该节点的有效范围内 if (targetNode!=null&&targetNode!=undefined&&offset!=null&&offset!=undefined&&offset!=-1) { // editor.focus(); // 将焦点设置到编辑器 // 设置光标位置 range.setStart(targetNode, offset); // 设置光标起始位置 if(editor.scrollHeight-scrollH<=700){ range.collapse(false); // 将光标设在末尾 } selection.addRange(range); // 添加新的光标位置 editor.focus(); } else { console.log("无法设置光标位置：目标节点不存在或偏移量无效。"); setCursorAtBottom(editor); } } // 判断editor是否失去焦点 function isEditorFocused(editor) { return editor === document.activeElement; } // 将光标设置到 editor 底部 function setCursorAtBottom(editor) { // let range1 = editor.createRange(); let range1 = document.createRange(); // let selection1 = window.getSelection(); let selection1 = editor.ownerDocument.defaultView.getSelection() // let range1 = selection.getRangeAt(0);; // 选择 editor 内容的开始位置 range1.selectNodeContents(editor); range1.collapse(false); // 设为 false，光标移到底部 selection1.removeAllRanges(); // 移除当前选择 selection1.addRange(range1); // 添加新的光标位置 editor.focus(); // 将焦点设置到编辑器 getCursorPositionInEditor(editor) } // 将光标设置到 editor 顶部 function setCursorAtTop(editor) { let range1 = document.createRange(); // let selection1 = window.getSelection(); let selection1 = editor.ownerDocument.defaultView.getSelection() // 选择 editor 内容的开始位置 range1.selectNodeContents(editor); range1.collapse(true); // 设为 false，光标移到顶部 selection1.removeAllRanges(); // 移除当前选择 selection1.addRange(range1); // 添加新的光标位置 editor.focus(); // 将焦点设置到编辑器 getCursorPositionInEditor(editor) } // 在笔记编辑器中添加滚动监听器,鼠标事件，鼠标滚轮滚动，键盘按下事件 function editorEvent() { // let editor = document.querySelector('.ql-editor[contenteditable="true"]'); let editor = document.querySelector('.ql-editor'); let note_pc = document.querySelector("div.resizable-component.note-pc") // console.log("editor", editor); if (!editor) { console.log("editorEvent没有找到 editor"); return } // 如果粘贴内容是图片,设置图片点击事件 editor.addEventListener("paste", async (event) => { // event.preventDefault(); // 阻止默认的粘贴行为 const clipboardItems = event.clipboardData.items; for (const item of clipboardItems) { // 检查是否为文件类型且为图片 if (item.kind === "file" && item.type.startsWith("image/")) { // const file = item.getAsFile(); // 获取文件对象 // 当粘贴内容,设置点击事件 setTimeout(() => { creatNoteImageClikEvent() }, 100); } } }); // 当editor失去焦点时,鼠标移入后自动获取焦点，并设置光标到之前的位置 editor.addEventListener('mouseenter', function (event) { if(!isEditorFocused(editor)){ if(targetNode!=null&&targetNode!=undefined&&position!=null&&position!=undefined&&position!=-1){ if(editor.scrollHeight-editor.scrollTop<=700){ setCursorAtBottom(editor) editor.scrollTop=editor.scrollHeight }else{ setCursorAtNodePosition(editor, targetNode, position) } }else{ editor.scrollTop=editor.scrollHeight // setCursorAtBottom(editor) } } // setTimeout(() => { // if(editor.scrollTop<=300||editor.scrollHeight-editor.scrollTop<=700){ // editor.scrollTop=editor.scrollHeight // } // }, 0); }) editor.addEventListener('mouseleave', function (event) { scrollH = editor.scrollTop selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文 if(selection){ range = selection.getRangeAt(0); } // console.log("document被点击", scrollH) getCursorPositionInEditor(editor) }) editor.addEventListener('scroll', function () { getCursorPositionInEditor(editor) if (editor.scrollTop + editor.clientHeight >= editor.scrollHeight) { // 在内容到底部时设置光标在底 setCursorAtBottom(editor); } else if (editor.scrollTop === 0) { setCursorAtTop(editor) } if (editor.scrollTop != 0) { scrollH = editor.scrollTop } selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文 if (selection) { range = selection.getRangeAt(0); } }); editor.addEventListener("click", function (event) { event.stopPropagation() // selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文 // if(selection){ // range = selection.getRangeAt(0); // } // console.log("点击的range", range); // scrollH = document.querySelector('.ql-editor').scrollTop if(editor.scrollTop>=200){ scrollH = editor.scrollTop } getCursorPositionInEditor(editor) // editor.scrollTo(0, scrollH); }) document.addEventListener("click", function (event) { event.stopPropagation() scrollH = editor.scrollTop }); editor.addEventListener('keydown', function (event) { if(!event.altKey){ // setTimeout(() => { // scrollH = editor.scrollTop // editor.scrollTo(0, scrollH); // selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文 // if(selection){ // range = selection.getRangeAt(0); // } // getCursorPositionInEditor(editor) // }, 50); scrollH = editor.scrollTop editor.scrollTo(0, scrollH); selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文 if(selection){ range = selection.getRangeAt(0); } getCursorPositionInEditor(editor) } }) } // 笔记面板鼠标监听事件双击隐藏 function noteEvent() { let note_pc = document.querySelector("div.resizable-component.note-pc"); if (note_pc) { // 左键双击隐藏 function hideNote(){ note_pc.addEventListener("dblclick", function (event) { // 阻止冒泡 isClose=false event.stopPropagation(); event.preventDefault(); // 检查是否选中了文本或图片 let selection = window.getSelection().toString().trim(); let selectedImages = note_pc.querySelectorAll(".ql-image-preview.active"); // 假设图片有 selected 类表示被选中 if (selection === "" && selectedImages.length === 0) { // 如果没有选中文本或图片，隐藏 note_pc note_pc.style.display = "none"; } }); } hideNote() } } // 点进笔记列表后获取笔记列表中的所有图片元素,为每个图片元素添加点击事件 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 if(parseInt(image.style.height) <= 720){ zoomedImage.style.height = '720px' zoomedImage.style.width = 'auto' // isZoomed=true } 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.left = '-380'; // 根据原始图片的宽度调整位置 // zoomedImage.style.top = '80px'; // 根据原始图片的高度调整位置 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(1.5)'; // 初始放大比例 zoomedImage.title = '双击关闭'; setTimeout(() => { let zoomedImage = document.querySelector('.zoomed-image'); if(zoomedImage&&parseInt(zoomedImage.style.height) <= 750){ zoomedImage.style.transform = 'scale(1.5)' } }, 50); } 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 = 'fixed'; zoomedImage.style.left='40px'; zoomedImage.style.top='20px'; zoomedImage.style.display = 'none'; zoomedImage.style.zIndex = 1000; zoomedImage.style.cursor = 'pointer'; zoomedImage.style.maxWidth = 'none'; // 确保图片不受容器限制 zoomedImage.style.maxHeight = 'none'; // 确保图片不受容器限制 zoomedImage.style.minWidth = '385px'; // zoomedImage.style.minHeight = '210px'; // // if(parseInt(zoomedImage.style.height) <= 205){ // zoomedImage.style.transform = 'scale(1.5)' // }else{ // zoomedImage.style.transform = 'scale(0.7)'; // 初始放大比例 // } 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() } setTimeout(() => { let zoomedImage = document.querySelector('.zoomed-image'); if(zoomedImage&&parseInt(zoomedImage.style.height) <= 750){ zoomedImage.style.transform = 'scale(1.5)' // zoomedImage.style.height='750px' // zoomedImage.style.width='auto' } }, 2000); // imageClickListener() } else { // alert("非首次加载图片放大插件:" + data_screen) if (data_screen == 'full' || data_screen == 'web') { bpx.appendChild(zoomedImage); } imageClickListener() } }, 1800); } }//是183行这个结束括号 if (currentUrl.indexOf('https://www.bilibili.com/video/') === 0 || currentUrl.startsWith('https://www.bilibili.com/cheese/') // Your code here... })();