chrome扩展开发（1）- 简介

本文目标

让你对chrome扩展有基本的认识，知道chrome扩展能帮助你做些什么，难度大不大，有哪些可用的参考资料。当你在工作生活中出现相关需求时，可以想到这项技术，并且有信心通过这项技术尝试解决自己的需求。

适合的读者

1. 希望不断提高生活效率的人
   本文不会给你的生活带来很大的改变，但如果你是一个注重生活品质的人，你应该会认同：每一个小的提升积累起来，就会带来明显的改变。如果你不认同这一点，那么这篇文章不适合你，因为掌握新技能肯定是需要花费精力的。

2. 拥有一定web前端编程基础的人

   chrome扩展使用的完全是web前端技术（js/dom/html/css/json）。你需要对web前端技术有基本的了解，但不需要太深入，你在平时使用网站时的自动化需求往往并不复杂，比如自动填充用户名密码、跳过毫无意义的垃圾页面。

应用场景举例

1. 自动登录网站
   目前最常见的登录方式是账号密码登录和微信扫码登录。现在微信扫码登录已经比较普遍了，这种方式免去了注册的过程（联动微信直接获取相关信息），但是每次登录的过程我觉得并不舒服，因为必须打开手机微信，扫码后还会在微信中出现一条“登录操作通知”的未读消息，比较烦人。两种登录方式的对比如下：

账号密码登录	微信登录
缺点：需要记忆用户名密码	缺点：需要依赖手机微信

对于一个追求高效率的人来说，每次打开手机扫码登录的代价是比较高的。生活中的分心物（有兴趣的读者可以参考克里斯·贝利的《专注力-心流的惊人力量》，这是一本对我影响非常大的书）有很多，比如各种骚扰电话和垃圾短信、不在意的人或微信群发来的微信消息，打开一次手机就意味着要被这些可能出现的分心物所干扰。对于一个高效的人来说，不应该被迫去看手机，而是在自己想看的时候去看手机。
因此，如果可以选择，我会优先选择账号密码登录，而不是微信扫码登录。随之而来的问题就是记忆用户名密码的苦恼，这个就不用多说了。而如果能通过chrome扩展程序自动填充用户名密码，就同时解决了两种方式的缺点，是最理想的选择。
当然，有的浏览器是会记录表单信息的（用户名密码），但这一功能的稳定性似乎不太可靠（个人体会），通过chrome扩展程序可以检测表单信息是否已经自动填充，如果没有，则进行填充，是最靠谱的方式。

2.自动跳过毫无意义的页面
举个简单的例子，我们公司每个季度要求在某学习平台上学习n个学分（我改变不了政策，只能让自己尽可能少浪费一点时间），而且系统做得比较烂，比如，登录时会跳出下面这个页面：

需要点击红框位置的“进入学习平台”，真是废话，如果我不想进入，我登录了干嘛？！
针对这种垃圾网页，我果断选择编写一个简单的chrome扩展脚本来解决它。当这个页面出现时，自动点击“进入学习平台”，不然每次手动点击都觉得是一种受辱（这种受辱的次数多了，感觉人生一片灰暗）。

开发一个chrome扩展的基本流程

• 建一个空文件夹
  文件夹的名字随意（保险起见，不要含有中文及特殊符号，全用英文字母和下划线“_”、中划线“-”肯定是没有问题的）。文件夹的位置随意。对，就是这么随意，只要文件夹里的代码没有问题就行。等文件夹里的代码都准备好了，通过chrome浏览器的扩展程序加载功能直接在电脑上选择这个文件夹即可，如下图所示（我建的文件夹叫做google-extension）：
  

• 文件夹中的文件结构
  注意：本文只是chrome扩展的简介，不会给出真正能运行的源码。
  1）必须要有一个manifest.json文件
  manifest是“证明”的意思，json是一种文件格式（其内容遵循某种规定的写法，并不算是一门需要研究的技术，了解其规范即可）。所以，manifest.json就相当于一个扩展程序的身份证。浏览器会通过这个文件来识别扩展程序的名字（name）、版本（version）、显示图标（icon）等等信息，并且赋予扩展程序所需的权限（permission）等等。关于manifest.json文件的详细内容，会在后续的博客中介绍。
  2） 其他任何文件都不是必须的，而是根据你的具体需要去添加的
  我这么说是为了让初学者更有信心掌握chrome扩展这门技术。在IT技术中，我们经常会提到“轻量级”、“渐进式”这样的词汇，就是为了说明某种技术是比较容易上手的。你的扩展程序当然可以只拥有一个manifest.json文件，只要其内容符合规范，chrome浏览器也能接纳它，但它没什么实际功能。
  至于如何根据需求添加其他文件，本文不进行详细介绍，这里给大家看一下我的扩展程序的文件结构（看看而已，产生一个直观的感受，我想表达的是：一个扩展程序的文件结构很灵活，没有繁琐的条条框框）
  

• 把你的扩展程序（实际上就是一个文件夹）加载到chrome浏览器中。
  详细步骤本文也不介绍。

参考资料

• 《chrome扩展及应用开发》
  这是引领我入门chrome扩展开发的书，也是我至今发现的唯一一本专门讲解chrome扩展的书。个人觉得，书本上的信息经过出版流程的重重把关，比网上的各类信息要全面严谨得多，因此，我觉得初学者还是要尽量看相关书籍，入门之后，才有能力评判地吸收网上的各种信息。
  这本书在网上有免费的pdf影印版下载（后续我会提供资源的免费下载），但是pdf文件不可以进行灵活的搜索和标记，会让阅读效果大打折扣，如果你有兴趣，建议到孔夫子旧书网上看看有没有价格合适的卖家（本书原价49元，如果价格飙到一两百的我觉得就别买了，看看pdf吧）。

• 360浏览器扩展官方文档
  网址：http://open.se.360.cn/open/extension_dev/getstarted.html
  也许你要问，不是在讲chrome扩展吗，为什么要去看360浏览器扩展的文档。这里解释一下，360浏览器使用chrome和IE双内核（直白点说，就是可以选择“极速模式”或者“兼容模式”，极速模式使用的是chrome内核，因此360极速模式的扩展和chrome浏览器的扩展开发知识基本上是一致的，chrome浏览器的扩展程序似乎可以直接在360浏览器极速模式中正常使用。兼容模式主要是为了兼容那些只支持IE浏览器的网站，比如我们银行的指纹管理系统，只有IE内核的浏览器才能识别插在USB口上的指纹仪）。
  360浏览器扩展官方文档没有chrome扩展官方文档全面，但是有两个优点：1.全中文，这个优势是巨大的，特别是对于初学者而言；2.国内的网站速度快，这也不需要多解释。

• chrome扩展官方文档
  网址：https://developer.chrome.com/extensions/api_index
  官方出品，当然最全面最靠谱，但这是全英文文档，读起来是有难度的（我在后续的博客中会逐步讲解）。
  说明：虽然google的一些网站在国内无法访问，但**.chrome.com的应该没问题，我一开始以为chrome是google的产品因此无法访问该网站。当然，通过一个chrome扩展程序就能轻松访问受限的google搜索、google地图等网站，后续我也会提供相应资源和操作指南。

结束语

这是我的第一篇技术博客，因为还没有适应csdn的博客编辑工具，展示效果肯定不会太好。我个人对技术科普很感兴趣，如果有什么疑问，可以和我交流，我对于表达得比较清晰的问题（如果语焉不详，我会认为是态度不端，我也没兴趣解答，我写博客主要出于个人喜好，而不是讨好别人），都会尽力解答。