油猴注入jquery 油猴编写

转载

fjfdh 2024-01-10 12:58:16

文章标签 油猴注入jquery 前端 javascript 开发语言知乎 文章分类 jQuery 前端开发

1. 需求

知乎上面有一些文章写的不错，但计算机技术日新月异，对于技术文章的价值而言，发表时间是个很重要的参考因素。而知乎专栏、问答，均将发表时间放在文章最后，极为不便。
因此，我需要修改页面元素，将文章发布日期弄到标题下方，正文前方。

2. 实战

对于修改网页，直接想到的就是浏览器扩展篡改猴Tampermonkey了，当然还有个类似的扩展软件暴力猴violentmonkey，使用起来差别不大，只是支持的浏览器不太一样，根据实际选一个即可。

安装Tampermonkey的浏览器扩展（我用的是 Edge）。
展示扩展图标。为方便使用，将 Tampermonkey 的图标展示出来。点击 Edge 上方地址栏右侧的扩展，点击 Tampermonkey 旁边的三个点，选择“在工具栏中显示”。
新建工程项目。点击浏览器上的 Tampermonkey 图标，选择“添加新脚本…”，此时会在浏览器上新开一个 tab 页面，展示出油猴脚本的初始状态，如下图。

油猴注入jquery 油猴编写_开发语言

确认需修改元素。打开一个知乎专栏页面，按下 F12，查找文章标题、文章日期这两处关键点的页面元素代码，分别如下图所示。

油猴注入jquery 油猴编写_开发语言_02

油猴注入jquery 油猴编写_开发语言_03

开始编写 Tampermonkey 脚本。
1）使用 document.getElementsByClassName() 函数，获取页面元素
2）使用 Node.appendChild() 函数，插入元素
3）修改脚本相关信息，比如图标改为知乎图标。盲猜其图标为 zhihu.com/favicon.ico，然后在浏览器上试一下，果然成功。

3. 最终代码

最后的代码如下：

// ==UserScript==
// @name         上移知乎文章发表日期到标题
// @namespace    https:///goocheez/GreasyFork/zhihu_timestamp_to_the_top
// @version      0.1
// @description  将知乎专栏的文章发表日期移动到标题下方
// @author       Goocheez
// @match        https://zhuanlan.zhihu.com/*
// @icon         https://static.zhihu.com/heifetz/favicon.ico
// @grant        none
// @license      MIT
// ==/UserScript==
 
function move_zhihu_timestamp_to_the_top(){
    var title = document.getElementsByClassName('Post-Header');
    var time_stamp = document.getElementsByClassName('ContentItem-time');
    if(title.length>0 && time_stamp.length>0){ // 添加条件语句，避免 js 出错
        title[0].appendChild(time_stamp[0]);
    }
}
 
(function() {
    'use strict';
    move_zhihu_timestamp_to_the_top();
})();