Tampermonkey還你一個乾凈整潔的上網體驗

作為一個前端開發，平時難免要經常瀏覽一些博客、技術網站，學習新的技術或者尋找解決方案，可能更多是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)
})();

原網頁

處理後

只要會一點前端開發技術，你就可以隨意改造你想看到的網站的內容了，是不是感覺一下子清爽了很多，發揮你的創意吧