火狐扩展：自动移除CSDN博客页面的登录/注册提示框

最新推荐文章于 2022-12-19 15:20:02 发布

加号减减号

最新推荐文章于 2022-12-19 15:20:02 发布

阅读量494

点赞数

分类专栏：工具文章标签：火狐浏览器 CSDN 博客扩展

本文链接：https://blog.csdn.net/plus_re/article/details/79160222

版权

工具专栏收录该内容

3 篇文章 1 订阅

订阅专栏

经常浏览 CSDN 博客的朋友会发现，经常会有一个占用空间很大的登录/注册提示框显示在博客页面底部，如下图红框所示：

要去掉的话必须手动叉掉。分析后发现只有在满足以下两个条件的时候才会出现这个提示框：

1、未登录CSDN账号

2、博客皮肤为「大白」

其中第一点是我们可以控制的，第二点我们控制不了。无论如何，在未登录CSDN账号的情况下查看CSDN博客的情况还是很经常出现的，这就导致我们需要经常面对这个提示框。

本文介绍一个火狐浏览器扩展 Remove_pulllog-box，该扩展能够自动移除相应页面的登录/注册提示框。这是我编写的第一个火狐扩展，下面简单介绍一下。

首先查看该提示框的源代码，如下：

可见类名为 pulllog-box。查看该类选择器的定义如下：

由这些属性可以判断，该博客页面就只有提示框这一个节点使用了这个类选择器。那么移除这个提示框的工作就很清晰了，首先判断当前页面是否为CSDN博客页面，如果是，则在页面中寻找使用了 pulllog-box 类选择器的节点，如果找到，移除即可。

明白了怎么做，还得明白火狐浏览器的扩展怎么编写。这类文章网络上有很多人做了分享，不过都不够好，因为似乎火狐浏览器的扩展编写规范更新得很快，最好的选择还是直接看官方文档。

我并没有完整地看完了整个官方文档，因为我的扩展的功能比较简单。写这个扩展完全是兴趣驱动的，看太深入很有可能会打消我的兴趣，够用即可。

下图是扩展的目录概览，只有 manifest.json 和 Remove_pulllog-box.js 两个文件：

以下是 manifest.json 文件，这是每一个扩展都必须要有的文件，它包含着扩展的基本配置信息。这里值的注意的是 content_scripts 这个键值对，它告诉浏览器，当打开的 url 满足 *://blog.csdn.net/*（即CSDN博客）时，将 Remove_pulllog-box.js 注入到页面中。：

{
	"manifest_version": 2,
	"name": "Remove_pulllog-box",
	"version": "1.0",
	
	"description": "Remove pulllog-box in CSDN blog.",
	
	"content_scripts": [
		{
			"matches": ["*://blog.csdn.net/*"],
			"js": ["Remove_pulllog-box.js"]
		}
	]
}

以下是 Remove_pulllog-box.js，十分简单，在这里移除 pulllog-box：

var box = document.getElementsByClassName("pulllog-box");

if (box && box.length == 1)
{
	// 只能有一个 div 使用了 pulllog-box 类选择器
	box[0].parentNode.removeChild(box[0]);
}

编写完成之后，可以在火狐浏览器地址栏输入 about:debugging，然后选择“临时载入附加组件”以测试和调试扩展。