Chrome扩展程序推荐&(伪)开发指南

chrome 作为 Google 公司研发的一款网页浏览器，其诞生之初就备受关注，从一开始的全年占有率上升幅度最大到如今的全球使用人数最多，chrome 成为了 Google 最值得骄傲的产品之一；而作为前端工程师，和浏览器打交道是最多的，所以如何用好浏览器就成为了一项潜在的技能。chrome 本身就基于其他
开源软件所撰写（WebKit、Blink），所以其丰富的扩展程序成为了另一大杀器，下面就分享一下我用的一些扩展程序（排名不分先后，如果你也有用着很爽的插件，欢迎在评论中分享哦～），同时简单的介绍一下自己如果想开发一个 Chrome 扩展程序，应该从何下手。

扩展程序推荐

Web Apps by 123apps

A set of easy-to-use web apps for audio and video editing, working with pdf, and file conversion.

Boost your productivity by adding 123apps extension to Chrome! Get instant access to a suite of useful online tools.

Automa

官网：https://www.automa.site/，Automa is a chrome extension for browser automation. From auto-fill forms, doing a repetitive task, taking a screenshot, to scraping data of the website, it’s up to you what you want to do with this extension.

Extensions Reloader

Reload all unpacked extensions using the extension’s toolbar button or by browsing to “http://reload.extensions"

这款插件可以让你在使用 GitHub 的时候，很多地方都能弹出悬浮窗，快速显示大量信息。

OctoLinker

让你看代码的时候，可以进行更高效的代码连接跳转。

Enhanced GitHub

这个插件支持在 GitHub 中显示仓库大小、每个文件的大小、显示每个文件的下载链接、直接将文件内容复制到剪贴板、在查看文件内容的同时下载文件。

Sourcegraph]

让你能在浏览 GitHub 时也能拥有智能提示、转到定义、查找参考，支持20多种语言和其他流行的代码宿主。

Git History Browser Extension

当您访问 github、gitlab、bitbucket 中的文件时，会为你的浏览器增加一个 Open in Git History 按钮。
点击按钮跳转到更清晰的 git 历史页面，展示该文件的历史变更情况。相比直接使用 git log ，这种方式更友好。

Personal Blocklist(not by Google)

此扩展程序从您的 Google 搜索结果中删除了不需要的网站。

该扩展程序的功能：

只需单击一下，即可从您的 Google 搜索结果中删除不需要的网站。
如果要显示被阻止的网站，请从阻止列表中删除被阻止的网站。
导入/导出阻止列表。

Convertio

在线将文件从一种格式转换为另一种格式. 支持超过 2500 种不同的转换。
在线将文件从一种格式转换为另一种格式。
支持超过 2500 种不同的转换:

✓ 归档转换器 (rar 到 zip, 7z 到 zip, …)
✓ 音频转换器 (wav 到 mp3, m4a 到 mp3, …)
✓ 文档转换器 (pdf 到 jpg, doc 到 jpg, …)
✓ 电子书转换器 (epub 到 pdf, epub 到 mobi, …)
✓ 图片转换器 (png 到 ico, png 到 jpg, …)
✓ 演示文稿转换器 (ppt 到 pdf, ppt 到 jpg, …)
✓ 视频转换器 (mkv 到 mp4, mov 到 mp4, …)
✓ PDF工具 (压紧pdf, 合并pdf, 解锁pdf, 网页至pdf)
✓ OCR（识别文本, 光学字符识别）工具

您可以使用 Google Drive 或 Dropbox：开始转换，退出应用，然后等待文件出现在云端存储即可。

daily.dev | The Homepage Developers Deserve

Get a feed of the hottest developer news personalized to you.
Hi there busy developer 👋

daily.dev is the fastest growing online community for developers to stay updated on the best developer news. Get all the content you love in one place – CSS-Tricks, Smashing Magazine, web.dev, and +400 sources.

In other words, stop wasting time searching for high-quality articles. Just install daily.dev, open a new tab, and you’re all set.

The Marvellous Suspender

Make your computer run smoothly by suspending the tabs you aren’t using

浏览器经常会打开很多标签页，如果这些标签页不再活跃就会停止进程，节省内存，提升浏览器响应速度

Screenity - 屏幕录像和标注工具

Github 地址：https://github.com/alyssaxuu/screenity，Chrome 最强大的屏幕录像机。捕获，注释，编辑等。
借助 Screenity，您可以前所未有地录制和标注屏幕, 更好地录制工作、教育等内容，为学生提供情景反馈、详细的解释，或者只是向潜在客户展示您的产品。

股票基金助手 - 盯盘助手

支持自选A股、港股、美股、基金等产品、实时显示股票基金等数据
显示自选股票、基金、债券等行情等信息，数据实时准确，并且可以实时查看自选实时价格走势及收益情况；

自选基金助手 - 实时查看基金涨跌幅

一款开源的插件，可以用来查看您的自选基金的实时估值情况，可以自由的增减自选基金。您的自选基金数据会跟随账号同步。

Library Detector For Chrome

Github 地址：https://github.com/johnmichel/Library-Detector-for-Chrome

The Library Detector extension discovers which JavaScript libraries are being utilized on webpages that you visit and displays their icons on the Chrome Menu.

划词翻译

划词翻译是一款能用于 Chrome、Firefox 和 Microsoft Egde 浏览器的扩展程序，划词翻译的目标是让浏览任意语言的网站都能变得无比轻松：

Chrome 扩展，如果打不开 Chrome 扩展商店，可以下载离线安装包手动安装
Firefox 扩展
Edge 扩展

ModHeader

用来修改请求 Header 的浏览器插件，支持 Chrome、Firefox、Opera 和 Edge，可以非常方便的开启/关闭以及导入/导出配置文件

DuckDuckGo Privacy Essentials

官网：https://duckduckgo.com/，旨在保护个人隐私的搜索引擎，安装之后使用即可，号称不存储任何个人信息、没有广告、从不追踪

Screencastify

可以用来录制桌面以及当前浏览器标签页，同时录制完成之后可以进行分享，操作简单

百度大牛顾轶灵开发的一个 github 浏览辅助插件，用于在浏览 github 官网时能够实时查看相关 repo 以及用户的信息，非常方便，不过缺点就是接口有点慢

bypass-paywalls

可以免费看一些英文报刊的网站，ft foreign policy wapo多家外媒都可以

同时还有 firefox 版

为什么你们就是不能加个空格呢？

自动在网页中所有的中文字和半形的英文、数字、符号之间插入空白。虽然有部分人反馈网页会变卡顿，但是仍值得一试

Markdown Here

有个它再也不用担心编辑器不支持markdown语法了，写好以后直接一键转换。而且也是一个跨平台神器，比如我们可以把简书写好的文章（带md语法）直接复制到微信公众号，然后一键转换，格式几乎无变化！

离线版下载地址：https://u14797164.pipipan.com/fs/14797164-237430000

捕捉网页截图 - FireShot

捕捉网页截图，编辑并将它们保存为PDF，JPEG，GIF，PNG或BMP；不过有用户评论反馈“页面一大就崩溃”

Chrome Regex Search

相比传统的 Command+F 搜索，正则表达式进行搜索能够满足更多场景下的搜索需求，用户评价：

真的太棒了,对比同类应用,最值得称赞的是能实时搜索以及记录搜索历史.希望作者能开通支付宝,不捐赠说不过去啊

cookie快速模拟

方便地管理你的cookie，开发人员必备，快速查看，修改，删除。

JSON-handle

对 JSON 格式的内容进行浏览和编辑，以树形图样式展现JSON文档，并可实时编辑。用户评价：

目前为止，体验最好的chrome中json 解析扩展，希望更加强大

SimpleUndoClose

非常简洁的界面，可以让你轻而易举的撤销关闭的标签！虽然可以 Command+Shift+T 打开最近关闭的标签页，但是这个 Chrome 插件还提供了搜索的功能，非常实用。

Stylish

利用用户样式管理器Stylish来重新编辑网站的样式。您可利用Stylish为许多网站安装主题和皮肤，也可创建自己的主题和皮肤。

React Developer Tools

这款插件是 facebook 官方推荐的（Github 地址），目前已经有 64W 用户下载使用，所以其性能方面是不容置疑的，不过由于我目前还没有更深入的接触 react，所以这款插件自从下载之后就没有实际用过，具体怎样就没办法描述了。。

JSONView

这款插件其实功能很简单，就是能够让你在浏览器中更方便地看 JSON 类型的数据，我们前端工程师常会有这样的困扰：后台提供了一个接口，返回的是 JSON 数据，但是我们通过 URL 直接在浏览器中打开的话，中文会显示乱码，而且如果其中有类似 URL 这种格式的数据，也没有办法点击跳转；此时，这款插件就派上了用场，虽然其提供的功能很简单，但是 105W+ 的用户量已经说明了一切，截图神马的最有说服力了：

JSONView之前

JSONView之后

Set Character Encoding

这款插件的功能也很简单，就像它的名字一样，是用来改变网页编码格式的，相信用最新版本 Chrome 的童鞋会发现，右键改编码格式的日子一去不复返了，甚至连高级设置中都没有办法改编码格式了，那么如何修改万恶的编码格式呢？这款插件就派上了用场，使用很简单：安装之后在你想要改变编码格式的网页右键，就会出现下面这个东东：

使用起来就是如此的简单，还在担心乱码吗？赶紧安装一下试试吧！

印象笔记·剪藏

印象笔记作为一款最受欢迎的笔记类应用之一，其本身提供的功能已经足够惊艳了，但是它的这款 chrome 插件更是好用到爆，安装之后在浏览网页时点击它的大象 logo 就会在你的网页右上角弹出如下弹框：

该弹框基本上涵盖了你所需要的所有功能，包括命名、内容选择、存储位置、标签、注释等等，可以让你很方便的保存你所浏览的任何内容（可以点击这里查看这款插件的玩法介绍），如果你是印象笔记的用户或潜在用户，一定要安装试一下，童叟无欺哦～

YSlow

YSlow（why slow）是雅虎基于网站优化规则推出的工具，帮助你分析并优化网站性能。说到雅虎，就不得不提一下雅虎军规了，雅虎军规在十几个方面给你的网站提出优化建议，YSlow 会根据这些规则分析你的网站，并给出评级。雅虎作为一家对前端性能追求卓越的公司，虽然已光辉不再，但是 YSlow 这款插件（Firefox 也有相应插件）对于前端开发者来说还是能提供很多思路的，官方网站：http://developer.yahoo.com/yslow/ 我的个人博客用YSlow的评分结果。。：

花瓣网页收藏工具

这是花瓣网官方提供的扩展，这个扩展程序可以让你方便地从任意网站上采集喜欢的图片、视频或者网页截图，并且可以全部保存下来，甚至可以追溯到这张图片的源网页继续查看。从某种角度而言，是一款不仅仅适合设计师的插件

Check my links

该插件会检查当前页面中链接的有效性，会告诉你哪些地方的链接已经是死链等等，对 SEO 很有帮助，下图是这个插件的主界面：

Host Switch Plus

快速切换 Domain-IP 配置而不需要编辑 Hosts 文件，并方便的添加、修改、分组（批量开关）。对于程序员来说也是一大神器啊！其实有一个软件也是用来切换 hosts 的，叫做 SwitchHosts ，感兴趣的话可以试用一下，同样很简洁。

Fatkun图片批量下载

就像名字一样，它的功能是找出当前页面的所有图片并下载，提供按分辨率、链接等筛选图片，是一款十分简洁但又功能强大的扩展程序。可能更适合设计师吧？！

Extension Source Locator

这是一款神奇的扩展程序，翻译成中文就是“扩展程序源码定位器”，它是干什么的呢，根据被翻译过来的不太准确的大中华语可以大概知道这玩意儿可以定位到一个你已经在谷歌浏览器上安装了的扩展程序的源码，或者说源文件，在你电脑磁盘的哪个地方。更重要的是它让我们可以修改一些自己喜欢的扩展程序，让其更加适合自己的使用。具体参见这篇介绍文章

Vimium

用惯 vim 的人可能习惯用键盘操控一切了，那么这款插件一定能够满足你，它让你能够通过键盘控制浏览器，包括跳转，点击某个按钮，翻页以及所有你能想到的浏览器功能，实在是佩服这款插件的开发者，可以先看一下它的宣传视频（来自油管，需要翻墙~）压压惊

一键管理所有扩展

名字已经说明了一切，当我们安装了很多扩展程序的时候，一键管理就派上用场了，快速激活、禁用插件。可以安装多个插件，切换使用，缓解 Chrome 的吃内存问题

Adblock Plus

去除广告的插件，满天飞的弹窗广告相当烦人啊。具体效果还没有试验，但是看到“去除广告”这四个字的时候，我就决定要安装一下了

WEB 前端助手(FeHelper)

提供了很多前端开发者经常用到的功能，包括字符串编解码、图片 base64 编码、代码压缩、时间戳转换、二维码生成、页面性能检测等等功能，具体看下图吧：

新浪微博图床

简单好用的图片上传工具，支持选择、拖拽、粘贴、上传图片，并且生成图片地址、HTML、UBB 和 Markdown 等格式，同时还支持批量上传等功能，很适合那些需要把图片放网上供其他人浏览的场景

惠惠购物助手

剁手党的神器！虽然名字起得像一个垃圾广告，但是功能还是蛮实用的。。可以自动显示淘宝、京东、当当等各大网上商城的报价（安装它之后，必须要进入扩展选项设置，不然这货会弹出广告！）

更新自2017-9-10：突然发现，这个插件会在后来运行，然后在有优惠信息时，会在右上角弹出推送消息（和 service worker 类似），如下图：

Octotree

这是一款非常方便的 github 扩展，安装了这款插件之后，你可以在 Github 项目页面的左侧看到相应项目树状结构图，对于项目管理以及具体的文件跳转来说非常方便（同时还可以一键下载某文件，这个功能我最喜欢了！）：

BuiltWith Technology Profiler

这款插件很适合充满好奇心的“极客”，它可以帮你探测出当前网站所用的技术栈并按类型分类，从此再也不用去看代码推测技术栈了！

User-Agent Switcher for Chrome

有时候我们需要同时在不同设备上测试网页的自适应情况，而有了这款插件，你可以随时更换 UA，节省了“检查元素”窗口的空间，同时还显得自己是一个很厉害的“前端工程师”~

更新自2017-09-11：偶然间发现一篇文章：大家注意了 Chrome 的插件 User-Agent Switcher 是个木马，但是这篇文章里面说的插件是 User-Agent Switcher for Google Chrome，所以大家安装插件的时候一定要擦亮眼睛啊~

Always Clear Downloads

自动清理下载记录和关闭令人厌烦的必须手动关闭的下载栏；但是我安装之后发现没有什么变化，是我的姿势不对吗？

Imagus

鼠标停在小图片上即可显示出原图大小的图片，从此刷微博不必点击展开图片，刷淘宝、京东不必点击到商品页面细看，但是我安装之后还是看不了，难道我的姿势又不对了吗？

更新于2017-09-07：我发现有的图片它不会放大，可能没有压缩过的图片它不会显示原图吧，不过用过之后感觉还是蛮好用的。

主题创建者

为谷歌浏览器创建自定义主题。可以为每个区域选择颜色和背景。追求个性化浏览器的童鞋可以尝试一下。

Proxy SwitchyOmega

轻松快捷地管理和切换多个代理设置。很适合程序猿的一款扩展，不仅可以全局代理，还可以通过正则或其他规则进行局部代理，除此之外还可以加载 PAC 脚本，翻墙神器，你不可错过。

Video DownloadHelper

通过名字就可以看出来，这是一款用来下载视频的扩展，可以下载多种格式的视频，同时其提供了多种额外的功能，有兴趣的童鞋可以自行了解。

Smart TOC

Add a table of contents for web article or documentation

这个插件的作用很难用语言来描述。。大致的作用就是给当前网页生成一个“目录”，同时支持锚链接，当我们再看那种“老太太裹脚布”的文章的时候，这个扩展就可以大展身手了，类似下图：

斗鱼HTML5播放器

替换斗鱼TV的 Flash 播放器, 并支持弹幕, 送礼等功能. 目前是测试版本, 可能无法播放部分直播间. 基于 flv.js(https://github.com/Bilibili/flv.js)(感谢谦谦)

Tampermonkey

这个插件属于必装的插件之一，大家通常称其为“油猴脚本”，有了这个，你会发现新世界大门向你打开，里面有各种秀出天际的脚本：百度网盘直接下载助手、VIP 视频破解、解决百度云大文件下载限制等等，安装脚本很简单，第一次安装该插件时会有一个简单的教程，还可以去greasyfork.org下载更多更厉害的脚本，从此上网之路会变得异常酷爽！

Onetab

用电脑经常用着用着就不知觉地打开了很多页面，用了多年的扎扎电脑很容易就出现浏览器崩溃的状况。装上这个 onetab 插件后，点击一下就可以把当前浏览器打开的所有标签页集中到一个页面，又可以开始愉快地浏览了，然后可以单独或全部恢复这些标签页。或者可以打开一组相关的页面，点击后作为一个合集分享出去，工作上分享资料可以用到。最重要的是能够节省高达95％的内存：

Infinity新标签页(Pro)

这个自定义的标签页颜值颇高，同时还提供了谷歌邮件自动提醒功能，还有精美天气，待办事项，印象笔记一样的记事应用，高清壁纸，必应，百度，谷歌搜索，让你的使用更加简单方便快捷。还有高清壁纸库，从 3 万多张超清壁纸中一张一张搭配图标，精心挑选出 365 张，形成每日一图，当然你也可以从你自己电脑上选择图片作为壁纸。这是它的官网，可以说是居家必备良品了。

Copyfish

一款免费的 OCR文字识别插件，可以帮助我们快速地从网页中进行区域选定识别文字。Copyfish 可以从图像，PDF甚至是视频中识别提取文本，使用方法也很简便。非常适合用于那些不能复制文字的网页，选定后则会自动进行识别，弹出识别结果。还可以在设置中进行翻译语言设置等，识别后一键翻译。

掘金

可以让你的新标签页变成掘金文章列表，包含 Android、前端、产品、设计、iOS、后端六大频道，每个频道内都有一到多个为你精心准备的优质内容源。同时还可以添加 Github、Dribbble 的内容，为设计师、程序员、产品经理每日发现优质内容。当然，如果你不想作为新标签页使用的话，还可以使用其网页版，其功能和新标签页是一模一样的，可以说是十分贴心了。

Momentum

这也是一款改造新标签页的扩展程序，从下面的截图中可以看到，改造之后非常的炫酷，关键是每一天的壁纸都不一样，而且还可以添加 todoList 等更多功能，如果感兴趣的话可以自行探索。

New Tab Dribbble

这个就更厉害了，可以说是设计师的必备，你每次打开新的标签页都会第一时间把每日精品设计作品展示出来，你每天都能看到来自大神的作品，简直是灵感的源泉，作品都来自 Dribbble。

Isometric Contributions

这个应该是程序员专属，它可以让我们 Github 的贡献图变成 3D 效果，非常适合用来装逼有没有，是不是很高大上：

GitHub Repository Size

这款插件也是 Github 相关的一款辅助工具，它可以直接将仓库的大小以及仓库中各个文件的大小显示出来：

Darkness

Darkness为热门网站提供精美的深色主题，可以显著减轻由明亮的电脑屏幕引起的眼睛负担和疲劳：

云盘万能钥匙

官网地址：https://ypsuperkey.meek.com.cn/，这款插件可以自动识别百度网盘提取密码，标识已失效的网盘链接，网盘分享从此更加简单。不过这款插件之所以会有如此能力，是因为它会在你提交百度网盘分享链接提取密码时收集提取密码信息，可能会涉及到隐私问题。除了 Chrome 浏览器，它还支持其他大部分浏览器，包括火狐、360、QQ、搜狗、UC 等等。

沙拉查词

涵盖所有主流词典，多重划词模式，极致交互体验，灵活导出生词本，高度可配置，支持 PDF，兼容 Vimium 全键盘操作。对于想学英语的童鞋来说是一个很好的工具。

GayHub

首先，请忽略这个扩展的名字。。它的主要功能是优化 Github 的阅读体验：

文件目录树：把 Vscode 的精美的侧边栏完美移植到 github 上
TOC导航：能完美解析当前内容的所有嵌套标题，性能优越，滑动起来如丝滑般流畅。
夜间暗色主题
图片全屏预览
一键复制代码

Lighthouse

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。当为 Lighthouse 提供一个要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。可以参考失败的测试，看看可以采取哪些措施来改进应用。

运行 Lighthouse 的方式有两种：作为 Chrome 扩展程序运行，或作为命令行工具运行。

Wayback Machine

这是一个国外的网站，它是互联网的一个备份工具，被称为互联网时光机。自从 1996 年以来，Wayback Machine 已经累计备份了超过 4350 亿个网页。你只要在它的网站上输入一个网站地址，就能看到这个网站在过去的不同时期分别长什么样。

Wayback Machine 网站有相应的同名插件，支持主流浏览器，只要点击插件，然后点击 Save Page Now，可以手动保存当前网站到这个互联网档案库里。N 年后再来会看今天的你，那感觉挺棒！

其他人推荐的扩展程序

以上是我自己使用过或在使用的一些扩展程序，还有一些扩展程序可能我自己并没有使用但是其他人推荐了，我也列举在下方，方便大家查看和选择：

如果因为某些显而易见的问题，无法从应用商店安装插件的话，可以尝试到扩展迷官网下载。

开发指南

其实 Chrome 扩展程序的开发并不是很难，只要你有前端的一些基础知识（HTML、CSS、JavaScript）就足够了，剩下的一些就是按照官方的文档或其他教程一步一步的编写+理解就可以了，下面是一些推荐的教程，相信看过之后你一定可以开发出一个类似天气、股票、PM2.5 这样的扩展程序：

Chrome 扩展及应用开发 -> 来自图灵社区的免费电子书，适合入门。
Chrome扩展开发文档 -> 来自 360 极速浏览器翻译的官方文档（比较老了，不是很推荐）。
Chrome 插件开发官方文档(英文) -> 前两个适合入门，实际开发的时候还是推荐官方的，查API啥的都很方便，况且这篇文档写的很赞，也简单易懂，强烈推荐。
ChokCoco-手把手教你开发扩展程序 -> ChokCoco 老师的扩展程序开发教程，讲的挺好的，五星推荐！
Publish in the Chrome Web Store -> Chrome官方出的发布自己的扩展程序的教程
Chrome插件开发全攻略 -> 作者花了将近一个多月的时间断断续续写下这篇博文，并精心写下了这个完整 demo，里面包含的内容很多，包括了大部分的配置项，同时还附有源码，是一篇很不错的入门文章。
一篇文章教你顺利入门和开发chrome扩展程序（插件） -> 前面部分大多数是一些基础介绍，和别人的资料大同小异，但是用的是通俗的语言或者作者自己理解来描述的，不是拷贝官方的描述，更方便读者理解；后面部分多为一些作者在项目中总结的方法。