相信平时大家都会去刷B站,遇到有趣的但是暂时还没有时间看的就会放到稍后再看里面,久而久之稍后再看变的越来越多。今天就和我一起做一个插件,来实现这样的一个功能
目前B站的首页是下面这样的
收藏的图标上并没有提示有多少,我希望让他提示出我稍后再看的有多少个。接下来就和我一起完成这个需求吧。
首先我们在电脑的任意位置创建一个文件夹,我们暂且交通“Bilibili Support”
然后我们需要创建如下几个文件
由于我们不需要前端页面,因此有这个几个文件就可以了。
我们通过VSCode打开这个目录,看一下目录结构
我们接下来一次编写这三个文件,我会先把编写好的代码写出来,然后把重要的地方讲解一下。
manifest.json
文件
{
"manifest_version": 3,
"name": "Bilibili Support",
"version": "1.0",
"permissions": [
"scripting",
"activeTab"
],
"host_permissions": [
"*://*.bilibili.com/*"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["*://*.bilibili.com/*"],
"js": ["content.js"]
}
],
"action": {}
}
manifest_version: 目前好像最低要求是3了。
name:给这个插件起一个名字
version: 开发的版本
permissions:我们需要的权限,由于我们需要操作打开的网站,和执行JavaScript,因此添加了这两个权限
host_permissions:专门用于设置扩展程序可以去访问哪些主机的权限,包含一系列用于匹配 url 的正则表达式
background: 指定background.js文件的位置
content_scripts:我们要执行的内容
matches: 匹配需要操作的网站 js:我们要运行的js的位置
background.js
文件
chrome.runtime.onInstalled.addListener(() => {
chrome.action.onClicked.addListener((tab) => {
if (tab.url && tab.url.includes('bilibili.com')) {
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['content.js']
});
}
});
});
当我我们新打开一个页面,并且包含我们的目标网站时,将我们的content.js注入进去。
content.js
文件
setTimeout(() => {
const xpath1 = "//*[@title='稍后再看']/following-sibling::*";
const xpath2 = "//li[contains(string(), '收藏')]";
const elem1 = document.evaluate(xpath1, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
let new_html = `<div class="red-num--message">`+elem1.textContent+`+</div>`;
const elem2 = document.evaluate(xpath2, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
if (elem1 && elem2) {
elem2.prepend(new_html);
}
}, 3000); // 等待3000毫秒
我们首先要获取稍后再看的数据
这里我们可以通过下面的xpath来获取到这个数值
"//*[@title='稍后再看']/following-sibling::*"
我们获取到数据后,接下来就是修改页面上的内容了。
我们可以仿照“消息”的做法,添加如下代码即可
<div class="red-num--message">99+</div>
我们可以看到,添加了这个代码后页面就有效果了,虽然位置不太统一但问题不大,有时间可以慢慢优化。
if (elem1 && elem2) {
elem2.prepend(new_html);
}
当两个元素都存在时,我们将新创建的html添加进去即可。
在浏览器中输入edge://extensions
并打开开发人员模式
我们选择上面的加载压缩的扩展,并选择我们之前创建的目录
这是已经可以看到了,如果有错误,这里也会提示。
接下来就是见证奇迹的时刻了,我进入到B站看看效果。
这里暂时有点问题,就是下拉框的数据有的时候取不到,我们需要再考虑用其他方式,比如get请求。相信这篇文章能给你带来思路,后面的发挥就看你的了。
我是Tango,一个热爱分享技术的程序猿,我们下期见。
我正在参与2024腾讯技术创作特训营第五期有奖征文,快来和我瓜分大奖!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。