火狐扩展：CSDN 博客页面自动 “阅读全文”

2024-05-23 13:31:44

简介
实现
- 确定思路
- 编写扩展
链接

简介

经常浏览 CSDN 博客的朋友可能会发现，篇幅较长且皮肤为“大白”的 CSDN 博客并不会自动显示全部文章内容，而是必须由读者手动点击 “阅读全文” 按钮后才会显示全文，如下所示：

本文介绍一个火狐扩展 CSDN_AutoReadMore，该扩展能够在相应页面自动触发“阅读全文”按钮的单击响应事件，继而自动显示全文。

实现

确定思路

在“阅读全文”按钮上“查看元素”（火狐浏览器），如下：

<a class="btn btn-large btn-gray-fred read_more_btn" target="_self">阅读全文</a>

可见其并不是按钮，而是一个链接，并且类名为 btn btn-large btn-gray-fred read_more_btn 。并且火狐浏览器提示其有单击事件，猜测单击事件就是显示全文。

因此思路就确定了，通过类名找到节点，然后调用该节点的 click() 方法即可。

编写扩展

扩展实现起来十分简单，一共就只包括 manifest.json 以及 AutoReadMore.js 两个文件。在 manifest.json 中编写扩展的基本配置信息，在 AutoReadMore.js 中编写单击响应事件的触发代码。

manifest.json 文件如下：

{"manifest_version": 2,"name": "CSDN_AutoReadMore","version": "1.0","description": "Auto read more article in CSDN blog.","content_scripts": [{"matches": ["*://blog.csdn.net/*"],"js": ["AutoReadMore.js"]}]
}

其中 content_scripts 键值对指明当加载的 url 匹配 *://blog.csdn.net/* ，即 CSDN 博客页面时，将 AutoReadMore.js 文件注入到页面中。

AutoReadMore.js 文件如下：


var btn = document.getElementsByClassName("btn btn-large btn-gray-fred read_more_btn");if (btn && btn.length == 1)
{btn[0].click();
}

通过上面确定的类名找到“阅读全文”节点，判断其存在并且只有一个，然后调用其 click() 方法即可。

链接

火狐扩展主页

Github仓库

火狐扩展：CSDN 博客页面自动 “阅读全文”相关推荐

怎么禁止/开启Ubuntu自动更新升级_豆豆技术派的博客-CSDN博客_ubuntu 自动更新
怎么禁止/开启Ubuntu自动更新升级_豆豆技术派的博客-CSDN博客_ubuntu 自动更新
csdn博客页面内任意自动跳转（附编写截图），自动目录，超链接跳转，MarkDown编辑器（默认编辑器）
文章目录 1.跳转方式 1.1 使用自动目录跳转 1.2 使用超链接跳转 1.2.1 跳转站外网址 1.2.2 跳转本页面任意地方 1.3使用html方式跳转(只能实现预览页跳转,实际跳转会失败) 1 ...
selenium爬虫笔记——csdn博客页面登录弹窗问题解决
1.问题情景使用selenium + python爬取csdn博客,其中一个步骤为点击博客详情页面的各级目录的链接,但是当鼠标点击目录链接时,页面会弹出一个登录窗口,要求登录. 如果是真实用户访问的 ...
Python3 获取CSDN博客文章的阅读数和评论量
阅读量上万以后,就看不到自己博客的精确访问量了.写了一个利用urllib加上正则匹配的Python3脚本来获取阅读数和评论量. [原理] 1. 页面标签内容获取通过搜索含有 span和对应class ...
CSDN博客如何自动生成文章目录？
文章目录一.如何添加目录? 二.注意事项三.输出结果一.如何添加目录? 在文章开头添加@[TOC] 二.注意事项 "[]"必须在英文状态下输入,TOC需要大写. 标题前添加& ...
CSDN博客转载攻略
1.在需要转载的CSDN博客页面右键,点击[检查] 谷歌浏览器F12 2.点击检查后,页面右侧出现html代码,如下图 3. 如果需要转载全文,则在html代码下侧点击选中article_conten ...
CSDN博客如何转载
在参考"如何快速转载CSDN中的博客"后,由于自己不懂html以及markdown相关知识,所以花了一些时间来弄明白怎么转载博客,以下为转载CSDN博客步骤和一些知识小笔记. 参考 ...
转载CSDN博客步骤
在参考"如何快速转载CSDN中的博客"后,由于自己不懂html以及markdown相关知识,所以花了一些时间来弄明白怎么转载博客,以下为转载CSDN博客步骤和一些知识小笔记. 参考 ...
如何在CSDN博客左侧添加微博关注
对于在CSDN中写博客是一件很开心的事情,我们可以对于自己的博客界面进行自定义,添加博客栏目.目前比较受大家喜欢的就是在博客左侧添加微博关注,这样在别人看你的博客的同时也可以看到你的微博的实时动态,并 ...

最新文章

热门文章