【工具】JS脚本｜浏览器脚本6分钟极速入门 · 开发一个限制自己刷b站的脚本_浏览器自定义编写js脚本

往期阅读：【MOOC】JS脚本｜便于复制粘贴中国大学MOOC网站的测试题和选项

这张图花里胡哨的是让AI生成的，我觉得怪可爱的，就直接作为封面了。

这篇文章中会开发一个JS脚本，这是一个用来限制b站网页版功能的脚本，避免刷b站的时间过长。功能如下：

1. 除了搜索、视频页、私信页之外的任何页都会被重定向到搜索页；
2. 视频页去掉相关推荐，并且非自己的视频去掉评论。

以下内容是视频6分钟极速入门浏览器脚本开发-Bilibili-shandianchengzi的文本。具体要结合视频阅读。

脚本下载链接：https://github.com/shandianchengzi/Bilibili-self-discipline-script/blob/main/README.md。

如果只是使用的话就不用往下看了，直接安装即可。

1 脚本创建

想要在浏览器中运行脚本，首先就要在浏览器中下载一个用于管理脚本的扩展插件。我们常用的管理脚本的浏览器插件可以在微软自带的浏览器中直接搜到，你可以在谷歌商店搜到，但是谷歌商店需要科学上网，所以不太合适。

现在微软商店中的tampermonkey被改名为篡改猴。安装好了这个插件之后，就可以看到右上角多了一个图标。如果没有多的话就需要按钉子显示出来。

随后点击这个图标的创建新脚本，他就会生成一个最简脚本模板让你填写了。

2 脚本信息

这个脚本的头部包含一些脚本信息，主要需要修改的就是脚本的介绍、作者信息。我们今天开发的脚本是一个b站自律脚本，它的功能我设计的第一是强制跳转到搜索页，这样就不会看到主页上面的相关视频。第二个功能是视频也去掉相关推荐。并且去掉底下的评论，因为我每次看评论都会看非常久。

可以看到这两个功能都是非常简单的，所以这也是我想把这个脚本作为一个教学脚本的原因。

一个额外需要关注的信息是match，这是指你的脚本在哪一些网页中会加载。比如我们这里是在b站中，所以match就b站就可以。

作为小白需要重点知道的就是通配符*，这个经常写代码的人都知道，意思是后面加任何东西都当作被匹配。

icon就是脚本的图标，随便找张无版权的图片，复制图片链接即可，也可以不修改。

3 脚本仓库

创建好脚本之后，再点开能匹配脚本的页面，就可以看到右上角有小红点，这代表脚本被加载过。

然后继续进一步完善脚本的内容。
我的建议是新建一个github仓库，这样能对脚本进行版本控制，并且开源了别人也能一起帮忙完善。
新建仓库，需要填写名字以及描述，比较特殊的是协议，新人往往不注重协议，但是实际上协议是非常重要的，它直接声明了你的仓库是否对你来说有版权。

比较常用的三种协议有Apache，MIT和GNU。其中阿帕奇允许衍生的产品商用或专有，Mit只保留作者版权，其他的任何使用都不做限制。Gnu就是不允许商用。它做出来的衍生代码必须是继续使用gnu协议、并开源的。

我这里使用的是我比较喜欢的GNU协议，因为我并不希望我这种小破脚本都被拿去商用。对于这种纯粹为了开源和使用而分享出来的脚本被拿去商用对分享者来说是一种非常大的伤害。

创建好仓库之后，把它克隆到本地，再用VScode打开就可以开始我们的编写了。

4 脚本基本开发

对于这种常规脚本，最快的方式还是结合AI，Vscode里有微软开发的Github Copilot，对于学生和老师，只需要在Github上申请即可开通使用，具体申请方式去看Github官网。

装好插件之后，我们输入一些注释，让人工智能自动生成部分代码。它选择先解析网址，我们可以去b站上查找一下这些网址的特征，然后在注释里提供给它，这样它就不会胡乱生成一些解析代码了。

比较容易实现的功能是非视频页重定向，这里强制使窗口链接等于搜索页即可。不过在写的时候会遇到浏览器脚本老生常谈的一个问题，就是脚本加载次数过多。

通过分析浏览器控制台的输出信息，可以知道在每次收到新的xhr请求的时候，都会重新加载一次，说明它主要的加载可能是在子页面。前端的开发者会知道，为了不重复开发一些边框组件，往往开发的时候先做一个框，框里面嵌套子页面，也就是嵌套别的网页文件。

搜索解决办法找到了仅允许顶端加载。这一个设置必须在脚本管理插件中手动添加，脚本的开发开发添加这个设置非常麻烦。你如果你要使用或者自己编写脚本的话，你最好也把这个设置开开，而不是寄希望于开发者。

再次运行的时候现它只加载了一次了。
视频到这里，我们已经完成了最简单的脚本开发，在接下来的视频中，我们会进一步完善整个脚本的功能。

5 脚本功能完善

现在已经完成了功能一，即点击其他页面就重定向到搜索页。功能二稍微复杂一点，需要去掉视频页上的网页元素，并且检验当前视频是否是自己的视频。

首先我们需要先打开一个视频页，方便之后做测试。按F12打开调试工具之后，点击源代码，然后查看我们想删掉的部分的元素信息。

id通常是每个元素的唯一标识符。Class是元素的类，它不是唯一的。如果你要删掉的元素有ID，那么直接使用ID是最简单的，如果是class，你可以找特别一点的class，保证这一种class对应的元素只有一个。

b站这个页面很明显只有这几种元素，所以这个功能很好写，找class还是id都行。

第一，对于右侧的视频推荐，能找到id是reco_list。复制xpath，作为注释，AI就自动生成了代码。
但是使用后发现视频推荐没了，但直播被推送上来了，非常影响观感。所以将display:none改成visibility:hidden，这样只是看不到视频推荐，但是视频推荐仍然会占位置，就不会有直播被推上来了。

第二，对于评论，能找到id是comment，同样，复制xpath作为注释，AI就自动生成了移除代码。

第三，查询当前页面是否是自己的视频。我一开始是使用当前up主的头像链接与右上角的头像链接是否一致，来判断是否是自己。但是发现右上角的头像需要较长的时间才会渲染出来，每次刚点开时，这个元素都是空的，会导致报错。
所以后来改为使用up主头像链接的uid与cookie中保存的DedeUserID作匹配，这样就能检测到是否是自己的视频了。

到这一步，整个脚本就初步编写完成了！
可以看到在自己的视频下有评论区，在别人的视频下没有评论区。并且随便点开一个页面都会自动跳转搜索页。
感谢观看！

完成之后我发布到了 Greasy Fork 中并设置了同步，可点此直达直装。

本账号所有文章均为原创，欢迎转载，请注明文章出处：https://blog.csdn.net/qq_46106285/article/details/134913502。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。