diff --git a/css/BVCard.css b/css/BVCard.css index 96618cd..34428c4 100644 --- a/css/BVCard.css +++ b/css/BVCard.css @@ -8,7 +8,9 @@ box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.221); pointer-events: none; transform: translate(-50%, -50%); - transition: 0.3s ease; + + transition: all 0.3s ease; + animation: fadeIn 0.5s ease-in-out 1; /* 使用动画 */ } #biliVideoCard #video-card { @@ -99,4 +101,23 @@ padding: 3px; box-sizing: border-box; text-align: center; +} + +.none-display { + display: none; +} +.flex-display { + display: flex; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 20% { + opacity: 0.3; + } + 100% { + opacity: 1; + } } \ No newline at end of file diff --git a/css/BiliSimpleShare.css b/css/BiliSimpleShare.css index e86c837..ff3e649 100644 --- a/css/BiliSimpleShare.css +++ b/css/BiliSimpleShare.css @@ -1,22 +1,35 @@ #biliSimple-share-button { + position: absolute; + width: 1.5vw; + height: 1.5vw; + left: -1.5vw; + top: 18vh; + font-size: 13px; + font-weight: bold; margin: 0px 0px 0px 8px; padding: 3px; - color: #fb7299; - background-color: #fafafa; - border-radius: 5px; + color: #ffd9e4; + background-color: #ffd9e4; + border-radius: 50%; - border-style: none; + border: none; transition: all 0.3s ease-in-out; } #biliSimple-share-button:hover { + transform: translateX(30%); + width: 3vw; + height: 3vw; + + border-radius: 30%; background-color: #fb7299; color: white; } + #biliSimple-share-pop { font-size: 20px; @@ -48,7 +61,7 @@ 20% { opacity: 1; } - 50% { + 60% { opacity: 1; } 100% { diff --git a/manifest.json b/manifest.json index a2df182..16cfed5 100644 --- a/manifest.json +++ b/manifest.json @@ -1,8 +1,8 @@ { "manifest_version": 3, "name": "B站视频信息", - "version": "0.3.0", - "description": "可以预览B站视频信息, 播放量、点赞、投币、收藏、转发、等。\n\n还可以将视频信息和链接通过具体的视频页面的视频标题处的分享按钮复制到剪切板，方便分享。", + "version": "0.4.0", + "description": "可以预览B站视频信息, 播放量、点赞、投币、收藏、转发、等。\n\n还可以将视频信息和链接通过具体的视频页面的左侧边缘处的分享按钮复制到剪切板，方便分享。", "default_locale": "zh_CN", "icons": { "128": "img/logo.png" diff --git a/packagerInfo.json b/packagerInfo.json index 9dd8629..f61b2a4 100644 --- a/packagerInfo.json +++ b/packagerInfo.json @@ -1,7 +1,11 @@ { "package_name": "BiliVideoInfo", - "description": "可以预览B站视频信息, 播放量、点赞、投币、收藏、转发、等。\n\n还可以将视频信息和链接通过具体的视频页面的视频标题处的分享按钮复制到剪切板，方便分享。", + "description": "可以预览B站视频信息, 播放量、点赞、投币、收藏、转发、等。\n\n还可以将视频信息和链接通过具体的视频页面的左侧边缘处的分享按钮复制到剪切板，方便分享。", "changelog": [ + { + "description": "修复了鼠标移开视频视频卡片无法消失的bug; 将视频卡片的弹出更加丝滑; 修复了部分其他BUG;尝试修复分享按钮有时没有出现的BUG,现在将按钮放置屏幕左侧边缘的淡粉色半圆,鼠标悬浮将显示按钮.", + "version": "0.4.0" + }, { "description": "合并[简单分享]插件的功能，现在可以在具体的视频页面的视频标题处看到一个分享按钮,该按钮可以将视频信息和链接复制到剪切板方便分享。", "version": "0.3.0" diff --git a/scripts/content.js b/scripts/content.js index 34f4f87..7c80c6c 100644 --- a/scripts/content.js +++ b/scripts/content.js @@ -38,61 +38,64 @@ async function handleInfoWithWbi(targetInfo, toWhat = "") { bvid: (toWhat == 'share') ? targetInfo : targetInfo.videoId // 或者 aid: 1234567 }; + try { + // 从 Chrome Storage 中获取数据 + chrome.storage.sync.get(['wbi_keys'], async result => { + const wbiKeys = result.wbi_keys; + //console.log(wbiKeys); // 确认获取到数据 - // 从 Chrome Storage 中获取数据 - chrome.storage.sync.get(['wbi_keys'], async result => { - const wbiKeys = result.wbi_keys; - //console.log(wbiKeys); // 确认获取到数据 - - // 为参数进行 Wbi 签名 - const signedParams = encWbi(params, wbiKeys.img_key, wbiKeys.sub_key); + // 为参数进行 Wbi 签名 + const signedParams = encWbi(params, wbiKeys.img_key, wbiKeys.sub_key); - // 构建请求 URL - const requestURL = `https://api.bilibili.com/x/web-interface/view/detail?${signedParams}`; + // 构建请求 URL + const requestURL = `https://api.bilibili.com/x/web-interface/view/detail?${signedParams}`; - // 发送请求 - const response = await fetch(requestURL, { - method: 'GET', - credentials: 'include', // 认证方式：Cookie(SESSDATA) - }); + // 发送请求 + const response = await fetch(requestURL, { + method: 'GET', + credentials: 'include', // 认证方式：Cookie(SESSDATA) + }); - if (!response.ok) { - throw new Error(`请求失败：${response.status}`); - } + if (!response.ok) { + throw new Error(`请求失败：${response.status}`); + } - const videoInfo = await response.json(); - // 视频信息处理: - const videoCardInfo = { - url: `www.bilibili.com/video/${params.bvid}`,//链接 - title: videoInfo.data.View.title,//标题 - desc: videoInfo.data.View.desc,//简介 - tags: videoInfo.data.Tags.map(item => - item.tag_name),//标签 - viewCount: videoInfo.data.View.stat.view,//播放量 - danmakuCount: videoInfo.data.View.stat.danmaku,//弹幕数 - likeCount: videoInfo.data.View.stat.like,//点赞量 - coinCount: videoInfo.data.View.stat.coin,//硬币数 - favCount: videoInfo.data.View.stat.favorite,//收藏量 - shareCount: videoInfo.data.View.stat.share,//分享量 - type: VIDEO_TYPE_MAP[`${videoInfo.data.View.tid}`]//视频类型 - } - if (toWhat == '') { - const dataObj = { - videoCardInfo: videoCardInfo, - targetDOMRect: targetInfo.targetDOMRect + const videoInfo = await response.json(); + // 视频信息处理: + const videoCardInfo = { + url: `www.bilibili.com/video/${params.bvid}`,//链接 + title: videoInfo.data.View.title,//标题 + desc: videoInfo.data.View.desc,//简介 + tags: videoInfo.data.Tags.map(item => + item.tag_name),//标签 + viewCount: videoInfo.data.View.stat.view,//播放量 + danmakuCount: videoInfo.data.View.stat.danmaku,//弹幕数 + likeCount: videoInfo.data.View.stat.like,//点赞量 + coinCount: videoInfo.data.View.stat.coin,//硬币数 + favCount: videoInfo.data.View.stat.favorite,//收藏量 + shareCount: videoInfo.data.View.stat.share,//分享量 + type: VIDEO_TYPE_MAP[`${videoInfo.data.View.tid}`]//视频类型 } - //videoProfileCard. - if (videoProfileCard) { - console.log(videoProfileCard) - videoProfileCard.upDate(dataObj) + if (toWhat == '') { + //videoProfileCard. + if (videoProfileCard) { + const dataObj = { + videoCardInfo: videoCardInfo, + targetDOMRect: targetInfo.targetDOMRect + } + console.log(videoProfileCard) + videoProfileCard.upDate(dataObj) + } } - } - //分享按钮更新 - if (shareButton && toWhat == 'share') { - shareButton.Update(videoCardInfo); - } - }); + //分享按钮更新 + if (shareButton && toWhat == 'share') { + shareButton.Update(videoCardInfo); + } + }); + } catch (error) { + console.log('发生错误:', error); + } } @@ -101,12 +104,12 @@ function getVideoUrl() { return currentURL.split('?')[0]; } -function callShareButton() { +async function callShareButton() { if (shareButton) { let currentURL = getVideoUrl(); let bvid = getVideoIdFromLink(currentURL); - handleInfoWithWbi(bvid, "share"); + await handleInfoWithWbi(bvid, "share"); } } /** @@ -156,9 +159,9 @@ function showVideoInfo(event) { } //对target注册鼠标离开事 - target.addEventListener("mouseleave", function () { + target.addEventListener("mouseout", function () { // 取消注册事件 - target.removeEventListener("mouseleave", arguments.callee); + target.removeEventListener("mouseout", arguments.callee); // 调用禁用函数 videoProfileCard.disable(); }); @@ -172,7 +175,7 @@ function showVideoInfo(event) { // 加载网站脚本来为用户链接添加标签 window.addEventListener("load", function () { //向ShareButton发送消息 - setTimeout(callShareButton, 4000) + //setTimeout(callShareButton, 4000) // 当鼠标悬停在文档上时，调用showVideoInfo函数 document.addEventListener("mouseover", showVideoInfo); diff --git a/scripts/ui.js b/scripts/ui.js index 4c0aa6f..e46767d 100644 --- a/scripts/ui.js +++ b/scripts/ui.js @@ -51,9 +51,10 @@ class VideoProfileCard { this.el = document.createElement("div"); this.el.style.position = "absolute"; - this.el.style.display = "none"; this.el.style.zIndex = 1013 + this.el.classList.add('none-display') + document.body.appendChild(this.el); this.disable(); @@ -62,14 +63,17 @@ class VideoProfileCard { disable() { this.enabled = false; if (this.el) { - this.el.style.display = "none"; + this.enabled = false; + this.el.classList.remove('flex-display') + this.el.classList.add('none-display') } } enable() { if (!this.enabled) { this.enabled = true; - this.el.style.display = "flex"; + this.el.classList.remove('none-display') + this.el.classList.add('flex-display') } } diff --git a/scripts/uiForShare.js b/scripts/uiForShare.js index 91c5578..69ffd43 100644 --- a/scripts/uiForShare.js +++ b/scripts/uiForShare.js @@ -1,28 +1,61 @@ var shareButton = null; +var titleObserver = null; + class ShareButton { - constructor(videoInfoDetail) { + constructor() { + this.getCount = 0; + this.data = {}; + this.target = document.body; + this.shareText = ''; this.el = document.createElement("button"); this.el.id = 'biliSimple-share-button'; this.el.type = 'button'; this.el.innerText = '分享'; - this.el.onclick = () => { - shareButton.Click(); + this.el.onclick = async () => { + await this.Click(); } //let videoInfoDetail = document.getElementById("arc_toolbar_report"); - videoInfoDetail[0].appendChild(this.el); + //this.addShareButton(); + } + + addShareButton() { + this.target.appendChild(this.el); } Update(data) { this.data = data; + this.formatVideoData(); + this.shareText = + `${this.data.title}\n类型：${this.data.type}\n简介：${this.data.desc}\n标签: ${this.getTagsText()} +\n播放量：${this.data.viewCount} 硬币数：${this.data.coinCount}\n弹幕数：${this.data.danmakuCount} 收藏数：${this.data.favCount}\n点赞数：${this.data.likeCount} 分享量：${this.data.shareCount} +\n分享链接：${this.data.url}`; + } + + upDataTarget = () => { + this.getCount++; + let videoInfoDetail = document.getElementById("viewbox_report"); + + if (videoInfoDetail) { + videoInfoDetail = videoInfoDetail.getElementsByClassName('video-title'); + if (videoInfoDetail.length > 0) { + this.target = videoInfoDetail[0]; + this.addShareButton(); + //callShareButton(); + } + } + if (videoInfoDetail || this.getCount >= 10) { + this.getCount = 0; + + clearInterval(intervalId); + } } getTagsText() { let tags = this.data.tags; - console.log(this.data); let tagsText = ""; for (let i = 0; i < tags.length; i++) { tagsText += tags[i] + " "; @@ -31,45 +64,36 @@ class ShareButton { } async Click() { - this.formatVideoData(); - let shareText = `${this.data.title} -类型：${this.data.type} -简介：${this.data.desc} -标签: ${this.getTagsText()} -播放量：${this.data.viewCount} 硬币数：${this.data.coinCount} -弹幕数：${this.data.danmakuCount} 收藏数：${this.data.favCount} -点赞数：${this.data.likeCount} 分享量：${this.data.shareCount} -分享链接：${this.data.url}`; - try { - await navigator.clipboard.writeText(shareText); - this.popUps('文本已成功复制到剪贴板'); + await callShareButton(); + await navigator.clipboard.writeText(this.shareText); + this.popUps('文本已成功复制到剪贴板', 2000); } catch (err) { - this.popUps(`复制到剪贴板时出错${err}`); + await navigator.clipboard.writeText(`uiForShare.js => Click() => ${err}\nhttps://github.com/iceriny/BiliVideoInfo/issues`); + this.popUps(`复制到剪贴板时出错${err}\n请联系作者，联系地址与错误信息已经已复制到剪切板`, 2000); } } formatVideoData() { const videoDataKeys = ['viewCount', 'danmakuCount', 'likeCount', 'coinCount', 'favCount', 'shareCount']; - + let maxLength = 0; for (const key of videoDataKeys) { - console.log(this.data) const stringValue = this.data[key].toString(); maxLength = Math.max(maxLength, stringValue.length); } - + for (const key of videoDataKeys) { this.data[key] = this.data[key].toString().padStart(maxLength, " "); } } - popUps(text) { + popUps(text, delay) { const showPopup = () => { pop.style.display = "flex"; setTimeout(() => { pop.style.display = "none"; - }, 2000); + }, delay); }; let pop = document.getElementById("biliSimple-share-button-pop"); @@ -82,16 +106,29 @@ class ShareButton { showPopup(); } +} -} +function setTitleObserver() { + // 创建一个MutationObserver对象，用于观察DOM的变化 + titleObserver = new MutationObserver((mutationList, observer) => { + // 调用labelLinks函数对标签链接进行处理 + shareButton.upDataTarget(); + }); -window.addEventListener("load", function () { + // 监听document.body元素及其子元素的变化 + titleObserver.observe(document.body, { + childList: true, + subtree: true, + }) +} - let hoverTimer = setTimeout(() => { - let videoInfoDetail = document.getElementById("viewbox_report").getElementsByClassName('video-title'); - shareButton = new ShareButton(videoInfoDetail); - console.log("\n创建按钮\n") - }, 3000); // 设置1秒延迟 -}); +let intervalId = null; +window.addEventListener("load", function () { + shareButton = new ShareButton(); + if (shareButton) { + //shareButton.upDataTarget(); + shareButton.addShareButton(); + } +}); \ No newline at end of file