插件地址：https://greasyfork.org/zh-CN/scripts/380667-csdn%E5%8D%9A%E5%AE%A2%E9%98%85%E8%AF%BB%E6%A8%A1%E5%BC%8F%E5%88%87%E6%8D%A2%E6%8F%92%E4%BB%B6

插件安裝使用說明請參閱：https://greasyfork.org/zh-CN

?

瀏覽器（正常）模式效果：

?

閱讀模式效果：

?

提供下源代碼，有興趣可以互相學習：

// ==UserScript== // @name CSDN博客閱讀模式切換插件 // @version 1.4 // @description CSDN 閱讀模式和瀏覽模式切換，完美支持傲游、360、Chrome等瀏覽器 // @author By Jackie http://csdn.admans.cn/ // @match *://blog.csdn.net/*/article/details/* // @grant GM_addStyle // @namespace https://greasyfork.org/users/164689 // ==/UserScript==GM_addStyle("#ReadBtn{position: relative;float: right;width: auto;background: #0f962191;z-index: 99;color: white;text-align: center;margin: 5px;padding: 5px;border-radius: 5px;cursor: pointer;}"); GM_addStyle(".html_body_readmodel{overflow: hidden;}"); GM_addStyle(".article_content_readmodel{position: fixed !important;top: 0px;left: 0px;width: 100%;z-index: 999;overflow: auto;height: 100%;background: white;padding: 20px;border:10px solid #bce4cba8;}"); GM_addStyle(".readBtn_float{position: fixed !important;right: 40px;}"); (function(){'use strict';var divView = document.createElement("div");divView.setAttribute("id", "ReadBtn");divView.innerHTML ='閱讀模式'; var article=document.getElementsByClassName('article_content')[0];article.insertBefore(divView,article.childNodes[0]); //自動展開文章內容var readMoreBtn=document.getElementById('btn-readmore')if(readMoreBtn){readMoreBtn.click(); }divView.onclick=function(){if(divView.innerHTML=='閱讀模式'){divView.innerHTML ='瀏覽模式';addClass(article,"article_content_readmodel");addClass(document.body,"html_body_readmodel");addClass(divView,"readBtn_float"); }else{ divView.innerHTML ='閱讀模式'; removeClass(article,"article_content_readmodel");removeClass(document.body,"html_body_readmodel");removeClass(divView,"readBtn_float"); }}//檢測樣式function hasClass(ele, cls) {return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));}//添加樣式function addClass(ele, cls) {if (!hasClass(ele, cls)) ele.className += " " + cls;}//刪除樣式function removeClass(ele, cls) {if (hasClass(ele, cls)) {var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");ele.className = ele.className.replace(reg, " ");}} })();

?

?

總結

以上是生活随笔為你收集整理的CSDN博客文章阅读模式插件(附源码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。