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

做爲一個前端開發，平時不免要常常瀏覽一些博客、技術網站，學習新的技術或者尋找解決方案，可能更可能是ctrl+c和ctrl+v（^_^|||），可是目前不少網站的佈局以及廣告對於咱們閱讀文章形成了不少的障礙，非常煩躁啊。因而纔有了這篇文章，咱們藉助chrome的Tampermonkey插件來改造本身感興趣的網址，讓瀏覽內容更純粹。

在我以前的隨筆中已經對Tampermonkey 作了介紹，它是一個chrome插件，是一款免費的瀏覽器擴展和最爲流行的用戶腳本管理器。簡單來講就是能夠指定進入某些頁面的時候調用指定的JS代碼，這樣咱們就能夠將頁面中的某些元素刪除，或者更改樣式。

Tampermonkey的安裝須要FQ，網址是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)
})();複製代碼

原網頁

處理後

只要會一點前端開發技術，你就能夠隨意改造你想看到的網站的內容了，是否是感受一會兒清爽了不少，發揮你的創意吧