今天试用了CSDN Chrome插件，真不错，给大家剖析剖析一下csdn插件。

目录

1.CSDN Chrome插件是什么？

2.CSDN Chrome插件定位和特点

3.安装csdn插件

4.csdn插件使用

4.1牛逼的沉浸式阅读

5.制作自己的插件

6.常见问题解决

6.1获取csdn插件提示“安装失败, 请将插件更新至最新版本“

6.2csdn插件点击后，没有反应

csdn插件官网地址：https://t.csdnimg.cn/bKUP

1.CSDN Chrome插件是什么？

        CSDN Chrome插件，是运行在Chrome浏览器中的小工具，扩展Chrome浏览器的功能，从而提升阅读体验和学习效率。

2.CSDN Chrome插件定位和特点

        定位：帮助开发者提升开发效率。

        特点：

        以搜索框为入口，集成开发者常用工具，提升开发效率。 

        提升阅读体验和学习效率。

        从浏览式阅读到沉浸式阅读，帮你告别学习困扰。

3.安装csdn插件

安装三部曲，安装csdn插件说明https://plugin.csdn.net/chrome-index-help

4.csdn插件使用

安装完成后，在浏览器任意页面，按键o (不是0)触发插件

这个输入框就是插件的主要入口了，所有功能都从这里触发

csdn插件商场首页：https://plugin.csdn.net/webstore?

安装插件后，可以很方便进行沉浸式阅读，看博客界面举例，阅读更方便，更简洁，界面如下： 

4.1牛逼的沉浸式阅读

        什么是沉浸式阅读？

        沉浸式阅读，就是聚精会神对读物逐字逐句了解和反复琢磨研究。沉浸式阅读要求沉浸其中专心致志，防止错认和漏认了解每句话的准确含义，以及语境中的意思。对文章进行深入分析和思考，准确掌握文章主题，结构和思想内容。其中态度和专注及其重要。
        网页、阅读终端上的显示上，排除其他干扰的阅读，类似于关灯看视频那种。在显示屏上只有文字，没有状态栏，更没有广告和无关链接，有很多工具声称的沉浸式阅读工具就是这种的。今天刚好也发现了一个Chrome的扩展，CSDN插件就是挺好的一个工具。

        csdn沉浸式阅读界面如下图所示，排除其他干扰的阅读，专注博客内容。

5.制作自己的插件

        看到CSDN也出插件了，浏览器又有各种插件可以用装，内心自然也是蠢蠢欲动。因此给大家分享一下，如何自己制作一个crx插件。

        一个简单的插件需要manifest.json、popup.html、popup.js、content.js、background.html、background.js、css文件。当然，这些除了manifest.json都不是必须的，可以根据自己的需要删减或增加。把这些文件都放在同一个目录下，待会生成扩展程序待用。

        最主要的就是编写manifest.json了，可以参看如下：

{

//扩展信息

"name": "Test",

"version": "1.0",

"manifest_version": 2,

"description": "The first extension that I made.",

//点击扩展，弹出窗体

"browser_action": {"default_popup": "popup.html"},

//扩展图标

"icons": {"128": "icon.png"},

//后台执行的脚本

//"background": {

//"persistent": true,

//"scripts": ["background.js"]

//},

//扩展需要用到的权限

"permissions": ["<all_urls>", "activeTab"]

}

        其中popup.html 是点击图标显示的界面，可以搭配js和css文件，如：

在Test.js中就是你想要实现的具体代码，可自行编写。

准备完后就可以打包了，进入“扩展管理”界面，先打开“开发者模式”，然后选择“打包扩展程序”，选中文件夹后打包，即可生成所需的crx文件。

6.常见问题解决

6.1获取csdn插件提示“安装失败, 请将插件更新至最新版本“

解决方法https://onefire.blog.csdn.net/article/details/120046244

6.2csdn插件点击后，没有反应

出现如下页面

或者弹框如下界面：

csdn插件官网链接 https://t.csdnimg.cn/bKUP，欢迎大家使用。

目录

安装方式

本地安装

商店安装

界面布局

个人中心

开发助手

产品建议

综上所述

今天，试用了2020年最好用的Chrome浏览器插件，把使用体验分享一下，希望对大家有帮助。

友情链接：http://t.csdnimg.cn/1YBE

安装方式

CSDN浏览器插件的安装方式大致分为两种，尽管官网提供了三种版本。

本地安装

如果是本地下载的安装包，就需要我们手动进行安装，操作上会稍微复杂一些，具体安装步骤如下：

一、下载插件，友情链接：http://t.csdnimg.cn/1YBE，我下载的版本是v2.6.1（csdn_chrome_plugin_v2.6.1.crx）。

二、在chrome浏览器地址栏输入 chrome://extensions，打开插件扩展程序界面。

三、打开右上角开发者模式，再把 csdn_chrome_plugin_v2.6.1.crx 拖拽到浏览器中完成安装。

商店安装

如果到Chrome应用商店安装，就需要我们科学上网，不然的话，你连页面都打不开呦，就像下图的样子，是不是很尴尬？？？

当然正常情况，打开后是这样的，毕竟CSDN还有很多国外用户以及一些科学上网的用户。点击“添加至Chrome”按钮，即可完成插件安装，就这？是的，是不是非常方便？

界面布局

插件首页默认是“新版”界面，非常酷炫，另外还支持“旧版”、“简洁”两种模式，可以在设置中进行自由切换。

右下角有支持手动切换壁纸的图标按钮，每次点击都会切换一张新的高清壁纸。

同时，支持壁纸图片的管理，一共有四大类壁纸：“CSDN壁纸”、“必应壁纸”、“纯色壁纸”、“本地壁纸”。其中，“本地壁纸”支持自定义背景图片，非常人性，给产品经理点赞👍。

个人中心

插件主页的右上角是CSDN账户头像，鼠标悬浮或者点击会弹出“吐司”，其中包括用户ID，备份功能，登出功能。

开发助手

开发助手中也有非常多的默认项，包括热门推荐、资讯、社区、工具、文档、娱乐、系统。同时，也支持自定义扩展。随便找了找，其中，最常用可能就是JSON工具了，先来试试，解析一段JSON字符串，复制粘贴到左侧编辑框，右侧会自动生成格式化的结果。

JSON字符串实例：

{"taskId":"test/live","totalTime":88,"totalSize":1726,"files":[{"fileNamePrefix":"uuid-123456","fileIndex":0,"fileName":"resource/uuid-123456/uuid-123456_000.m3u8","replayPath":"http://172.31.102.226:8082/uuid-123456/uuid-123456_000.m3u8","fileTime":20,"fileSize":390},{"fileNamePrefix":"uuid-123456","fileIndex":1,"fileName":"resource/uuid-123456/uuid-123456_001.m3u8","replayPath":"http://172.31.102.226:8082/uuid-123456/uuid-123456_001.m3u8","fileTime":41,"fileSize":802},{"fileNamePrefix":"uuid-123456","fileIndex":2,"fileName":"resource/uuid-123456/uuid-123456_002.m3u8","replayPath":"http://172.31.102.226:8082/uuid-123456/uuid-123456_002.m3u8","fileTime":8,"fileSize":160},{"fileNamePrefix":"uuid-123456","fileIndex":3,"fileName":"resource/uuid-123456/uuid-123456_003.m3u8","replayPath":"http://172.31.102.226:8082/uuid-123456/uuid-123456_003.m3u8","fileTime":19,"fileSize":374}]}

格式化结果：

{
  "taskId": "test/live",
  "totalTime": 88,
  "totalSize": 1726,
  "files": [
    {
      "fileNamePrefix": "uuid-123456",
      "fileIndex": 0,
      "fileName": "resource/uuid-123456/uuid-123456_000.m3u8",
      "replayPath": "http://172.31.102.226:8082/uuid-123456/uuid-123456_000.m3u8",
      "fileTime": 20,
      "fileSize": 390
    },
    {
      "fileNamePrefix": "uuid-123456",
      "fileIndex": 1,
      "fileName": "resource/uuid-123456/uuid-123456_001.m3u8",
      "replayPath": "http://172.31.102.226:8082/uuid-123456/uuid-123456_001.m3u8",
      "fileTime": 41,
      "fileSize": 802
    },
    {
      "fileNamePrefix": "uuid-123456",
      "fileIndex": 2,
      "fileName": "resource/uuid-123456/uuid-123456_002.m3u8",
      "replayPath": "http://172.31.102.226:8082/uuid-123456/uuid-123456_002.m3u8",
      "fileTime": 8,
      "fileSize": 160
    },
    {
      "fileNamePrefix": "uuid-123456",
      "fileIndex": 3,
      "fileName": "resource/uuid-123456/uuid-123456_003.m3u8",
      "replayPath": "http://172.31.102.226:8082/uuid-123456/uuid-123456_003.m3u8",
      "fileTime": 19,
      "fileSize": 374
    }
  ]
}

效果图：

产品建议

问题1

安装方式中的“beta版下载”功能需要明确，前两个选项“本地下载”、“Chrome商店下载”，鼠标悬停都有focus效果，但是“beta版下载”却没有（不确定是不是和背景色重叠了）。而且下载后，压缩包自动解压如下图所示：

作为一个曾经开发过chrome插件的我来说，都不知道怎么使用，更不用说是一般用户了。

建议: beta版下载时，建议有一个对话框提示或者悬停提示，暗示用户功底太浅的话，可以忽略该选项。

问题2

Chrome商店下载时，因为没有科学上网，一般都是联网失败，不知道的用户会等很久，还以为服务器响应慢呢。

建议: 在插件下载页面进行代理校验，如果没有VPN或者非科学上网用户，“Chrome商店下载”选项就直接不可用，避免用户没有意义的等待。

问题3

通过右上角头像进入个人中心，但是总感觉内容有些空，信息量太少。

建议：适当增加一些常用选项，增加一些交互跳转，比如点击头像可以跳转到个人博客主页等。

综上所述

整体使用上还是非常满意的，希望CSDN浏览器助手继续优化进步，如果十分是满分的话，我给打九分。保留一分是为了不让产品同学骄傲。

为何有这款插件

相信你在 CSDN 检索资料的时候，一定碰到过【关注博主阅读全文】。

明明只是检索一个资料，为何非要关注他的博客呢？

况且如果你没有 CSDN 账号怎么办？

当访问一篇博客，出现下图时，你一定产生过被这个按钮支配的愤怒。

有吐槽的地方，就有需求，“就不关注” 这款插件应运而生，而且本款插件发布在 CSDN 开发者助手商店哦~ 妥妥的带上 “官方出版” 的帽子。

插件制作流程

在使用本插件之前，需要提前安装 CSDN 开发者助手，具体安装方法，查看官方说明即可。

插件官方下载地址

通过 https://plugin.csdn.net/webstore?type=&sort=&name=&sType=name 创建插件，选择脚本插件进行后续开发。

配置插件

在插件配置页面，对插件进行基本设置，该内容主要展示在商店中，最后一项外部资源依据需要进行添加，实测后发现尽量不添加与 CSS 样式相关的外部资源，例如 less，bootstrap ，易造成原页面排版出现问题。

配置规则表示在哪些页面插件起作用。由于目标删除数据在博客详情页，本插件该配置如下所示：

https://*.blog.csdn.net/article/details/*
https://blog.csdn.net/*/article/details/*

脚本执行时机选择 document_end，即页面全部加载完毕执行。

编写代码

去除关注博客可预览全文功能比较简单，只需要在上图顶部的 JS 选项卡中，添加如下代码即可。

(function () {
  // Your code here...
  // 使用 Jquery 选择器，也可以直接使用原生的 JS
  $("#article_content").removeAttr("style");
  $(".hide-article-box").remove();
})();

使用两行代码即可去除关注按钮，并查看全文。

第一行代码为删除 DIV 高度，并取消 overflow 属性，第二行代码为去除关注博主按钮区域。

插件后续

插件下载地址：https://plugin.csdn.net/plugin?pluginId=CSDNPlugin-33818859-1626222802872-65436331

欢迎大家体验橡皮擦研发的其它几款小工具， https://plugin.csdn.net/webstore?type=&sort=&name=hihell&sType=author

今天是持续写作的第 183 / 200 天。
可以关注我，点赞我、评论我、收藏我啦。

更多精彩

• Python 爬虫 100 例教程导航帖（已完结）

请把保护打在评论区