打造开发者一站式工作台 -- 掘金Web浏览器插件评测

2,261 阅读23分钟

一、背景

掘金 是一个帮助开发者成长的社区,也是一个面向互联网技术人的内容分享平台。

掘金Web插件 是由掘金推出的专为开发者、设计师和产品经理量身定制的浏览器插件,一站式聚合优质内容、快捷工具、常用网址等。

二、安装

2.1 Edge安装

Microsoft Edge 是由微软开发的基于 Chromium 开源项目及其他开源软件的网页浏览器。

由于其本身与大名鼎鼎的Chrome功能几乎相同,并且更加轻快,自微软主推之后,大量的开发者便转移了阵地。

假如你也是用Edge的话,安装掘金插件,只需要去其插件商店(类似于Chrome网上应用商店)直接安装即可。

下载地址 👇👇👇

稀土掘金 - Microsoft Edge Addons

我们打开即可见到如下页面,在这个页面我们能看到官方的一些介绍以及用户的评价等。

image.png

安装的话只需要轻轻点一下右上角的 获取 按钮,就会弹出确认对话框,我们选择 添加扩展 即可。

image.png

接下来Edge浏览器便会自动为我们下载并安装插件。

但是第一次我们可能会遇到一丢丢小麻烦。

image.png

我们看到Edge浏览器虽然成功安装上了插件,但是他默认给我们把插件关了,其实这是因为掘金插件会修改我们的默认启动页,浏览器为了安全考虑,这类插件需要我们主动开启。

打开也很简单,我们只要进入 扩展管理页 主动打开掘金插件的开关即可。

GIF.gif

我们也可以直接在地址栏敲入 edge://extensions/,即可快速直达扩展管理界面。

打开之后,我们在插件栏就见到了一个掘金的小logo,点击的话会有一些快捷操作,下面我们会详细介绍。

2.2 Chrome安装

这个其实和Edge的安装方式算是一模一样了,只是插件的地址换成了 Chrome自己应用商店的。

下载地址 👇👇👇

稀土掘金 - Chrome 网上应用店 (google.com)

这里有个小小的问题,访问Chrome商店,需要我们有一个通畅的网络环境,那假如你网络不是太好的话,我们建议可以切换到Edge浏览器或者采用离线安装的方式。

2.3 离线安装

离线安装顾名思义就是我们手动将插件下载下来,然后手动给浏览器安装即可。

下载地址 👇👇👇

稀土掘金浏览器插件-官网 (juejin.cn)

这里有个小细节,当我们是Edge访问的时候,只会有一个在线安装的按钮,点击跳转到Edge应用商店。

image.png

但是当我们是用Chrome访问的时候,除了提供在线的安装按钮,右边还提供了一个离线下载的按钮,看来官方已经考虑到我们凄凄惨惨的上网条件了。

image.png

下面是离线安装步骤

1️⃣ 获取插件文件

我们点击 离线包下载 按钮,浏览器会自动下载一个Zip文件,比如这次我下载的就是 xitu_extension-online-v1.0.0.279.standalone.crx.zip 文件。

下载完成之后解压得到一个crx文件,比如这里是 xitu_extension-online-v1.0.0.279.standalone.crx

CRX文件是谷歌浏览器Chrome的插件文件,也就是Chrome的扩展程序,主要作用是增强Chrome浏览器的各种功能。

2️⃣ 打开浏览器开发者模式

我们在浏览器地址栏输入 chrome://extensions/ 进入到插件管理界面,开启右上角“开发者模式”开关。

image.png

3️⃣ 离线安装插件

将解压的 crx 格式文件拖动至插件管理页面即完成安装。

image.png

同样的,安装完是默认关闭的,我们找到掘金插件,手动打开即可。

三、功能介绍

我们先看一眼默认的界面长啥样。

image.png

可以看到功能还是蛮多的,界面元素很丰富,很现代化,采用了时间线和网格视图相结合的形式,能帮助我们更快速的获取到优质的内容。

我们按照标注的顺序简单介绍一下吧。

3.1 掘金主站功能导航

头部左边这一区域主要是跳转主站的,比较简单。

image.png

从左至右依次是

3.1.1 稀土掘金

跳转掘金主站的

3.1.2 掘金小册

点击跳转掘金小册,鼠标悬停会展示新上的小册,作为掘金主打功能之一,必须占个C位

image.png

3.1.3 下载掘金APP

鼠标悬停会展示一个下载掘金App的二维码

image.png

3.1.4热门活动展示

掘金主站最近的热门活动会在此展示,比如现在年底火热的 年度人气作者榜 活动,杀疯了都。

3.2 设置区

image.png

头部右边这一区域我把它称之为设置区。

主要就是用来设置展示的内容,展示的UI,展示的布局等等。

3.2.1 兴趣选择

这个会影响我们下面内容展示的来源,比如选 前端,页面中间默认会展示 Github 的相关资讯,如果我改到 产品,页面中间展示内容则会相应的编程与产品相关的 PMCAFF 的内容。

GIF.gif

3.2.2 暗黑模式切换

护眼必备,希望掘金主站早日跟进,这里有个小细节,当我们是日间主题的时候,在设置的最下面会有主题色的选择,内置了7种颜色,一天一个心情☀。

GIF.gif

3.2.3 布局切换

Animation.gif

他有三种模式,分别是经典模式,浏览模式,工具模式。

  • 经典模式就是搜索栏会内嵌到在工具栏那一行,然后网格区域只有掘金主站相关内容已经外部相关资讯
  • 浏览模式就是会多一个沸点板块,方便掘友们摸鱼~
  • 工具模式,会在搜索框的下面多出一些快捷导航网站,以及多出一个快捷工具的版块,里面默认集成了好几个实用小工具

3.2.4 设置

image.png

设置界面,上半部分是关于插件的一些开关,都很简单。

  • 设置为浏览器标签页 -> 打开的话会占用我们浏览器的新建标签页,这样我们新建标签页的时候默认就是打开掘金插件,如果关闭此功能,下次访问掘金插件界面我们需要点击插件栏的掘金小图标才可以

  • 自动切换深色模式 -> 根据当前时间自动切换主题

  • 新标签页打开链接 -> 用于决定我们在打开文章资讯的时候是否在新标签页打开

  • 开始超级搜索 -> 打开掘金插件的重磅功能之一

  • 启用划词创建笔记 -> 掘金插件的主打功能之一,打开可以快速创建笔记

image.png

下半部分是快捷键和热词的设置

热词是用于在搜索框中的,当我们呼出搜索框之后,敲入热词,就会打开对应的功能。

112111.gif

假如我们使用的工具模式,我们会看到掘金插件默认提供了这5个小功能,设置里的热词也正是与之对应的。具体的功能后面会说到。

image.png

3.2.5 签到/抽奖界面

当我们当日没有签到的时候,跳转的是 每日签到 界面,如果已经签到

则是跳转到掘金主站的 幸运抽奖 界面,拼RP的时候到了。

3.2.6 个人主页

点击头像会方便跳转到掘金的个人主页,当我们有新消息的之后,这里还会有小红点提示。

3.3 搜索栏及快捷入口

第一行是一个搜索框,内置了主流的搜索引擎,我们可以手动切换或者按Tab切换。

image.png

image.png

第二行则是一个快捷导肮,支持我们自定义,比如我就添加了我们早上打开电脑必逛的Medium,Reddit等等

image.png

3.4 掘金站内信息流

这一块主要就是展示掘金站内的网站,内容和我们在功能区选择的兴趣相关。

3.5 友商站内信息流

image.png

这里我们看到可以直接切换博客园,Gitee等,掘金大气!

3.6 快捷工具栏

掘金提供了 IP查询 时间戳 二维码 翻译 笔记五个快捷工具,当我们点击的时候会从右边拉出一个抽屉,比如 笔记 功能,这算是这个插件的一个重磅功能了,这个下面我们会有详细介绍。

image.png

3.7 摸鱼板块

哈哈,其实就是掘金的 沸点 板块了,掘友们快乐的源泉!

四、主要功能

4.1 搜索功能

这个首先我们只能通过上面设置里说的快捷键来呼起搜索框,比如默认就是jj,其次这个设置是全局的,也就是在其他网页,我们也能直接按下jj,呼起掘金插件搜索框。

GIF1.gif

4.2 笔记功能

首先笔记功能有好几个入口,比如我们点击浏览器插件栏的掘金logo,弹出的小窗口里就有 记个笔记我的笔记

image.png

然后我们还可以在插件页面点击工具栏里的 笔记 按钮进入。

image.png

我们还可以通过jj呼起搜索框后输入笔记的热词note

假如我们在设置里启用了划词创建笔记的话,我们在浏览网页的时候滑动选中文字,页面会出现一个笔记本的图标,点击即可快速创建笔记。

我们看下笔记的界面

image.png

布局就是常规笔记的布局,顶部有个搜索功能,搜索完会在列表中显示含有关键字的笔记,并且关键字会高亮。

然后左边就是导航区,分别是查看全部笔记,查看星标笔记,查看标签,以及最近删除的笔记。

右边的话就是笔记的展示了,按照修改时间排序,最新修改的会到最上面。

单条笔记的话,默认会展示 是否是Markdown文档,是否是星标笔记,笔记标题,内容摘要,以及所属标签。

image.png

记笔记界面也比较简洁

image.png

大大的内容书写区域,最下面会有一个添加阅读的提醒,右边有个展开按钮,点击会跳转到新页面,新页面会支持富文本编辑和Markdown支持。

当我们提醒时间到了之后如果我们没有阅读文章的话,在插件按钮上会有数字提示。

image.png

笔记有个最重要的功能就是同步,这个同样也有,在顶部的设置按钮里,切换到 我的界面可以备份,他可以备份我们添加的导航,笔记等。

image.png

五、优化建议

5.1 插件层面

希望插件默认不占用标签页,这样安装完就不会默认被浏览器关闭,增加用户初步上手成本,应该靠优内容去引导用户主动打开设置。

其次考虑到很多人其实都安装过别的标签页扩展插件,比如大名鼎鼎的Infinity,这样容易冲突。

5.2 UI层面

5.2.1 布局优化

首先就是这个那个插件的主页面,虽然说我们采用了网格视图这种的布局,但是一眼看过去,真的是满满当当,有种眼花缭乱的感觉。

其实时间长了,用户的关注点会越来越聚焦,比如有人喜欢看掘金的文章流,有的人就喜欢看沸点,但是很不幸,这2个模块给的空间都比较局促,这会使用户觉得很难受,我常用的模块,就占一点点,但是我不想看的内容却可能占据着大多数的页面。

所以建议是用户可以自由配置这些网格,包括网格的删减,网格的位置,网格的大小等,把主动权给到用户。

5.2.2 主题色优化

首先第一个,我觉得顶部那个暗黑模式切换的没必要单独给个按钮,我觉得放这里的按钮应该会是一些高频的(比如签到消息处理)或者很重要的功能(比如设置),暗黑模式使用的频率权重应该不会有那么高。

其次,如果是暗黑模式,在设置里就不会有主题色的选择了,其实暗黑模式的黑也可以是五彩斑斓的。然后暗黑模式和日间模式下的主题色其实可以合一起,暗黑模式可以简单理解为黑色的主题色嘛。

最后就是主题色的适配,我尝试切换了一个紫色,结果我看了半天,除了搜索框背景色改成了紫色,其他地方我愣是找了半天没找到哪里适配了,而且这个配色看起来很怪异。

image.png

这一点建议就是希望官方把内置的几个主题色再打磨打磨,现在绝对不是一个完整的主题切换功能。

第二个就是丰富主题的选择性,比如设置背景图片等。

第三个就是提供对外的文档或接口,让用户可以参与到主题色的配置中来,比如掘金就有用户贡献 Markdwon主题代码高亮样式,如果做到这一点,我相信将会诞生很多不错的主题,同时减轻掘金开发压力,哈哈。

5.3 功能层面

5.3.1 掘金内容展示

首先先说掘金主站的主站的展示。

image.png

比如我关注了 Android模块,但是插件给我推的这个列表我有点疑惑,主要就是内容上,我对比了下主站的Android模块下的 热门热榜 标签,发现内容都不一样,这也不知道是什么原因。

第二个就是在主站,我们还可以选择Android下的某个二级标签的,比如我最近对compose很感兴趣,我经常会再筛选一下,但是在掘金插件这个需求就满足不了。

第三个还是内容展示,可能是为了排版,把文章摘要去掉了,其实我觉得文章摘要还是很重要的,希望产品在UI和功能上再思考下怎么做个权衡,其实后面的赞和评论 完全就是个展示,点击会在新页面打开此文章,对于点赞来说,这个流程比较难受。

5.3.2 三方网站内容展示

首先肯定的是掘金插件允许展示其他竞品网站内容,这一点是非常值得敬佩的。

但是既然功能做了,希望这个功能能更丰富和健壮一些。

GI222.gif

看上面的Gif,提几个小小的建议。

希望三方网站可以支持自定义,比如很多人都很反感C**N,那我就希望可以去掉这个网站的内容。

其次可以看到当我们切到Github的时候会有内容分类,时间和语言的选择,切换到Gitee的时候就只剩语言选择了,再切换到博客园的时候就是一个内容展示,而且这个展示的内容看起来还毫无头绪,很乱,甚至有很多完全和我选择的兴趣不搭的内容,比如我选择的是Android,结果打开博客园,里面一堆CSS之类的文章。

这一块占据了整个插件页面绝对的C位,但是展示的内容却有点差强人意,这里希望产品可以考虑下怎么和这些平台打通,如果不打通,呈现出来的内容肯定是没有多大价值的,他不像资讯类的内容面向的对象是所有大众,程序员不通工种之间信息流差别肯定是非常大的。

5.3.3 其他内容展示

就目前来看,掘金插件展示的内容是固定的,希望后面可以多提供一些模块,让用户可以自由选择组合呈现。

比如与主站打通的话,可以搞个专栏模块,也可以将创作者中心的数据可以做个可视化视图,甚至用户在掘金整个主站的信息可以搞个展示,比如大帅老猿搞的掘金城市这种。

那如果是站外信息的话,我的建议是要做账号的打通,内置支持的网站,比如博客园,用户录入博客园信息就会展示他自己的个性化信息流,这样内容会更贴切一些。

其次站外信息的话还有个很好的Idea,那就是RSS,这个东西虽然不好做(强如Google Reader都做到关闭了),但是一旦有这个功能的话,那绝对是掘金插件的亮点功能之一,也是增加用户黏性的主打功能之一。

另外还有个比较小众的功能-播客,也可以考虑一下。

其实说完上面关于内容的建议后,我发现,插件可能去做一些数据流的展示,比如创作者中心数据,比如一些看板,比如播客会更合适一些,如果去做技术文章的展示的话,感觉会与主站功能有部分重合,其次三方网站的内容展示比较难以控制,容易适得其反。

当然了,这只是我轻浮的想法,可能涉及到插件本身的产品定位问题了,产品考虑考虑下。

5.3.4 搜索功能

首先第一个就是搜索引擎不支持修改或排序,要做好一站式工作台,那工具本身一定要称手,有的人不要这么多搜索引擎,有的人这几个不够或者有特殊的搜索引擎,这里如果支持自定义删减就好了,其实浏览器本身的搜索引擎也是内置+自定义的,这一点插件完全可以借鉴一下。

第二个就是快捷键容易冲突,比如程序员的话很多人都会装vim流的插件,那j肯定就会冲突了,希望插件安装完可以做到快捷键冲突检测就更友好了。

第三个就是现在的搜索完全就是和浏览器的行为一致,主要流程大概就是将用户的关键词通过参数携带出去,在新页面打开对应的搜索引擎搜索,这其实没做什么,插件就是做个关键词的传递而已,那如果这是这样的话,系统级别的工具不是更香吗,比如Mac上的神器Alfred,我想google搜索某个东西,我直接 alt+空格,呼起搜索框,输入 g+关键词,就会自动打开浏览器打开google进行搜索,使用百度搜索的话就是换个关键词 b+关键词,对比下来,插件完全没有任何优势。

提这点主要是因为整个掘金插件体验下来,感觉搜索是在当一个重磅功能在开发,毕竟还内部集成了热词等,但是显然目前这个功能还有很多的挑战要面对。

这里结合我多年的Chrome使用经验,我给产品大大提个建议。

假如要把搜索功能做大做强,可以参考下油猴里很出名的searchEngineJump 搜索引擎快捷跳转

大概长这样

image.png

可以看到在搜索界面它可以让我们再去切换搜索引擎,这是一个非常好用的功能,希望产品可以考虑下,将这个功能内置,这样在搜索这个大功能上就又有很多可以做的事了,也绝对会成为掘金插件的亮点功能之一。

5.3.5 快捷导航功能

首先是链接添加不方便,我添加一个网址的时候,完全就是2个文本框,没有联动,我输入网址的时候,并不能自动抓取网站名称,不过这是小问题,属于优化项。

建议产品对这个功能可以去体验下 Infinity 这个插件。

它里面添加导航的时候,有一个内置的数据库,我们键入关键词就能筛选出相关的网站信息。

image.png

数据库为官方内置以及用户自定义上传,这样我们能高度自定义的同时,还能通过这里去发现一些同类优质网站。

这个其实还是看产品对导航的定位,就目前来看,UI上应该是就给了那么一行,所以添加的时候标题限制了5个字,个数限制了10个。

但我真心建议这个功能产品可以再考虑下它的定位,就给这一行最多是10个的话,这功能在我看来就比较鸡肋了,首先程序员最多的就是书签了,第二我们可能还会有其他的兴趣爱好比如摄影,硬件等,这些随随便便加一下就超过10个了,既然我们要打造成一站式工作台,那快捷导航绝对是一个很重要的功能,插件作为我们打开浏览器的门户入口,我感兴趣的网站如果都能从这里分发,那肯定是一个非常好的功能,也是增加用户黏性的一个好途径。

5.3.6 快捷工具

这个目前体验下来,技术实现应该是类似于iframe包裹一下三方网站。

这个体验其实非常不好。

就以ip为例子吧。

image.png

我现在的网其实是挺好的,夜深人静,但是不知道为什么我打开,等了一会,一直是黑的,这里会暴露出几个问题。

第一服务不可靠,不可控,万一这个网址服务器出问题,间接导致的就是使用掘金插件的用户会觉得这个小工具不好用。

第二就是内容,我明明是查ip的,但是我打开之后,他会提供一大堆其他的功能,知道这是三方网站的还能理解,不知道的就会很困惑,这到底是个什么功能。

image.png

可以看到我顺利打开后,里面居然又有个万能翻译。

其次还有几个问题就是他的网站主题色为白色,而我插件现在是深色模式,整体看上去这一块会很不协调,也很刺眼。

一般这类网站还会接广告养活自己,连带的就会在掘金插件里看到广告,这绝对是一个无法容忍的行为啊,掘金是一个多么纯粹的网站。

image.png

所以这一整个模块,我建议是两步走。

第一步,三方网址改为自己造轮子,控制权就掌握在自己手里,可以从经典的小工具(json/编解码等)内置起,可以造的慢,造的少,慢慢来就好,但一定要自己控制好。

第二步,开放接口,让掘友有机会参与轮子的建造,这样不仅减少了掘金开发的压力,也能丰富掘金插件的小工具。

这一点可以参考下经典的FeHelper - Awesome (baidufe.com),它内置了很多实在的功能,同时又提供用户集成自己插件的能力,做到无限可能。

为什么IDEA能成为开发工具的天花板,不仅仅是他实实在在开箱即用的功能,更强大的是他的插件机制,使得它在每个人的手中都能成为一个特殊的神兵利器。

5.3.7 沸点模块

虽然沸点是掘友们快乐的源泉,但是沸点毕竟还是偏娱乐一点,在掘金主站里分为2个模块还能接受,但是在插件下都在一个页面展示会显得很奇怪,虽然经典模式能不展示沸点,但这里我还是建议可以让用户自由搭配模式,这样就比较完美了。

5.3.8 笔记功能

经过体验,看得出来,笔记应该算是目前掘金插件主打的一个功能,但是实际体验下来还有很多的细节可以打磨。

比如

  1. 笔记的标签只能添加一个,这个限制着实有点为难了。
  2. 新建笔记的时候,在没有展开编辑的时候,即使是手写的Markdown语法也不能识别。
  3. 不能添加图片。

希望后面慢慢迭代都能优化掉这些小问题。

5.4 功能建议

5.4.1 优质内容聚合

比起我在一个页面能看掘金,能看Github,能看Gitee,我更希望的是能在一个界面聚合看到我感兴趣的内容,这些内容来自各大技术网站,比如我在掘金看到了新热点compose,我在Medium上又去阅读了一些相关内容,我希望这些来自不同平台的相关文章能聚合在一起,方便我稍后整理,学习,搜索,就类似于Pocket一样的。希望产品可以加上这个功能。

5.4.2 Todo

清单对程序员来说也是非常重要的功能,如果有集成就更好了。

5.5 优化总结

其实上面说了一堆,总结下来就是要想做一个一站式工作台,单靠内置功能是永远不可能满足所有人的,应该要参考其他的产品的插件机制,掘金插件本身开箱集成一些基础经典的功能,同时提供扩展,让用户一起参与插件建设,这样才会越来越强大。

六、祝福

作为一个资深掘友,本人自2015年12月入驻掘金,现在已经整整陪伴了6个年头,可谓是一路见证了掘金的成长。

在国内,掘金已经是首屈一指的技术开发者社区,站内聚合了大量的优质内容,插件的诞生,不仅能让开发者快速获取掘金的优质内容,同时支持聚合国内外的优秀网站内容,比如Medium ,大大降低了信息获取的成本。

同时作为一个至少十年的资深重度Chrome用户,本人对于市面上热门的插件几乎都体验过,现在的状态就是保持这么多年筛选下来常用的插件,很少有增加的,阈值已经被拔高不少了,不吹不黑,掘金插件要真正成长为一个开发者的一站式解决平台,未来还有很长很长的路要走。加油!

最后,祝掘金越来越好!