Tampermonkey 脚本编写之初试

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


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

调整前效果

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

原字体样式

    个人表示很不喜欢“微软雅黑”字体及 600 的 "font-weght", 既然不喜欢, 那么就让我们用“程序猿”的方法来改变它。
    首先, 我们要通过 Chrome 的应用商店安装好 Tampermonkey 插件。安装好后, 我们可以在工具栏上看到一个这样的图标Tampermonkey ico
    然后, 我们点击 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");
保存之后,刷新页面, 大功告成,效果如下(^_^ 清爽多了):

调整后效果


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页