快速开发一款浏览器插件
原创
背景
相信平时大家都会去刷B站，遇到有趣的但是暂时还没有时间看的就会放到稍后再看里面，久而久之稍后再看变的越来越多。今天就和我一起做一个插件，来实现这样的一个功能
目前B站的首页是下面这样的
收藏的图标上并没有提示有多少，我希望让他提示出我稍后再看的有多少个。接下来就和我一起完成这个需求吧。
思路
- 我们需要通过浏览器插件来实现
- 要让插件只操作B站
- 只要是有收藏这个图标的页面都要让他变成稍后再看的数据
- 同过js来获取具体的稍后再看的数据
- 通过js修改原有的页面样式
开始实践
首先我们在电脑的任意位置创建一个文件夹，我们暂且交通“Bilibili Support”
然后我们需要创建如下几个文件
- manifest.json：主要用了描述我们这个插件的一些配置，以及版本等信息。
- background.js：整个插件的主入口
- content.js： 我们的业务逻辑，当然你也可以将它和background.js合并再一起，但是为了后面好维护我们还是分开写。
由于我们不需要前端页面，因此有这个几个文件就可以了。
我们通过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 删除。
腾讯云开发者
