Tampermonkey 脚本编写之初试

    以前上网阅读遇到样式不合自己心意的网站时， 一般是使用 Chrome 的开发者工具临时改变一下 CSS，但在小说网站进行上百章的阅读时这个方法就显得太蠢了。那么，有木有一劳永逸的方法呢？ 嗯， 这个可以有， 下面我们就介绍下如何使用 Chrome 插件 Tampermonkey 简单调整网页样式。

    下面是某小说网站阅读页面的部分截图：

上面这个页面的字体大小有大、中、小三个选项可选， 但字体不可变更，在开发者工具中看到的样式是这样的：

    个人表示很不喜欢“微软雅黑”字体及 600 的 "font-weght"， 既然不喜欢， 那么就让我们用“程序猿”的方法来改变它。

    首先， 我们要通过 Chrome 的应用商店安装好 Tampermonkey 插件。安装好后， 我们可以在工具栏上看到一个这样的图标。

    然后， 我们点击 Tampermonkey 图标， 选择 “添加新脚本”， 生成脚本模板如下：

// ==UserScript==// @name         My Fancy New Userscript// @namespace    http://your.homepage/// @version      0.1// @description  enter something useful// @author       You// @match        http://www.2kxs.com/xiaoshuo/22/22283/6619373.html// @grant        none// ==/UserScript==

    生成的代码当中， @match 默认带出的是你当前页面的网址，代表此脚本只对当前页面有效， 为使脚本针对整个网站通用， 我们需要使用通配符修改此句代码如下：

// @match        http://www.2kxs.com/xiaoshuo/*

    这样， 脚本就能对此网站上的所有章节阅读页面起作用了。 

    为了方便操作页面元素，我们先引用 jQuery 框架，添加代码如下：

// @require    http://code.jquery.com/jquery-1.11.0.min.js

    通过开发者工具可以看到章节主体标识是这样的：

    那么我们就可以通过 jQuery 来选择章节主体元素来修改样式了， 代码如下：

$("p.Text").css("font-family","宋体").css("font-size","16px").css("font-style","normal").css("font-weight","normal");

同上， 我们可以对其它不合自己心意的样式进行调整， 最后代码如下：

// ==UserScript==// @name         2k小说阅读界面调整// @namespace    http://your.homepage/// @version      0.1// @description  enter something useful// @author       earthcto// @match        http://www.2kxs.com/xiaoshuo/*// @grant        none// @require    http://code.jquery.com/jquery-1.11.0.min.js// ==/UserScript==$("strong.top_book").remove();$("p.Text font").remove();$(".book dd.newbook").remove();$("p.Text").css("font-family","宋体").css("font-size","16px").css("font-style","normal").css("font-weight","normal");

保存之后，刷新页面， 大功告成，效果如下（^_^ 清爽多了）：