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

简介

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

本文介绍一个火狐扩展 优快云_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": "优快云_AutoReadMore",
    "version": "1.0",

    "description": "Auto read more article in 优快云 blog.",

    "content_scripts": [
        {
            "matches": ["*://blog.youkuaiyun.com/*"],
            "js": ["AutoReadMore.js"]
        }
    ]
}

其中 content_scripts 键值对指明当加载的 url 匹配 *://blog.youkuaiyun.com/* ，即 优快云 博客页面时，将 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仓库