Tampermonkey还你一个干净整洁的上网体验

2019-04-20 08:54:53来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

作为一个前端开发,平时难免要经常浏览一些博客、技术网站,学习新的技术或者寻找解决方案,可能更多是ctrl+c和ctrl+v(^_^|||),但是目前很多网站的布局以及广告对于我们阅读文章造成了很多的障碍,很是烦躁啊。于是才有了这篇文章,我们借助chrome的Tampermonkey插件来改造自己感兴趣的网址,让浏览内容更纯粹。

在我之前的随笔中已经对Tampermonkey 做了介绍,它是一个chrome插件,是一款免费的浏览器扩展和最为流行的用户脚本管理器。简单来说就是可以指定进入某些页面的时候调用指定的JS代码,这样我们就可以将页面中的某些元素删除,或者更改样式。

Tampermonkey的安装需要FQ,网址是https://tampermonkey.net/。

下面是我常用的几个网站的处理代码:

CSDN

// ==UserScript==
// @name         CSDN
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://blog.csdn.net/*/article/details/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    $('aside').remove()
    $('.recommend-right').remove()
    $('.fourth_column').remove()
    $('.pulllog-box').remove()
    $('.indexSuperise').remove()
    $('#btn-readmore').click();

    $('main').css('width','auto')
    // Your code here...
})();

 

原网页

处理后

 

简书

 

// ==UserScript==
// @name         JianShu
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.jianshu.com/p/*
// @require      https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var $navbar = document.querySelector('.navbar');
    $navbar.style.display = 'none';
    var $ads = document.querySelector('#web-note-ad-fixed');
    $ads.style.display = 'none';
    var $ele = document.querySelector('.note .post');
    $ele.style.width = '1400px' 
})();

 

原网页

处理后

掘金

// ==UserScript==
// @name         JueJin-post
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://juejin.im/post/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var $container = null;
    function findContainer(){
        $container = document.querySelector('.main-container');
        if(!$container){
            setTimeout(function(){
                findContainer();
            },500)
        }else {
            $container.style.maxWidth = '1100px';
            var $article = document.querySelector('.article-area');
            $article.style.width = '100%'
        }
    }
    var $sidebar = null;
    function findSidebar(){
        $sidebar = document.querySelector('.sidebar');
        console.log($sidebar)
        if(!$sidebar){
            setTimeout(function(){
                findSidebar();
            },500)
        }else {
            $sidebar.style.display= 'none';
        }
    }

    setTimeout(function(){
        findContainer();
        findSidebar()
    },1000)
})();

 

原网页

处理后

只要会一点前端开发技术,你就可以随意改造你想看到的网站的内容了,是不是感觉一下子清爽了很多,发挥你的创意吧


原文链接:https://www.cnblogs.com/dahe1989/p/10734749.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue-router 页面布局

下一篇:前端笔记之NodeJS(二)路由&REPL&模块系统&npm