从零开始写一个 Chrome 扩展

题图：By neosiam from pexels

Google Chrome是由Google开发的一款设计简单、高效的浏览器。Chrome凭借其不凡的势力现在已经成了浏览器中的霸主占据了半壁江山。Chrome更是程序员的标配。如果你在用360浏览器什么的，对不起，我们不能做朋友。

本文将带你了解开发一个Chrome扩展。Chrome扩展主要用于对浏览器功能的增强，强调与浏览器相结合。比如Chrome扩展可以在浏览器的工具栏和地址栏中显示图标。Chrome插件提供了很多实用API供我们使，如书签控制、网络请求控制、窗口控制…… Chrome浏览器扩展开发相当简单，只要掌握HTML、CSS、Javascript（JS大法好啊），即可快速开发一个属于你的Chrome插件！

初识Chrome 扩展

Chrome 扩展除了HTML、CSS、HTML外还有个重要的一个配置（入口）文件 manifest.json。Chrome扩展都包含一个Manifest文件——manifest.json，这个文件可以告诉Chrome关于这个扩展的相关信息，它是整个扩展的入口，也是Chrome扩展必不可少的部分。定义了 扩展的名称（name）、版本（version）、描述（description）、图标位置（icons）和 Manifest 版本（manifest_version）等信息。

下面是我们本次演示生成二维码扩展的入口文件

详细的配置参见官方文档：https://developer.chrome.com/extensions/manifest

该项目的目录结构

popup.html

很简单对吧，其实 之类的标签没什么用。

现在打开Chrome的更多工具 > 扩展程序（或直接输入chrome://extensions/） ，开启开发者模式后 点击加载已解压的扩展程序，选择该项目。点击导航栏上我们的应用图标将得到如下结果（植入了个小广告 哈哈哈）

实现生成二维码扩展

现在我们来实现个生成二维码的Chrome 扩展。主要功能有：自动生成当前页面的二维码、输入URL生成二维码。

GitHub：https://github.com/liuxing/Ext-QRCode

我们可以发现要实现这样一个功能，重点在于生成二维码以及获取当前页面的URL地址。

我们可以使用QRCode.js 来生成二维码。

编写页面及样式

在开始之前先来整理下页面结构

改变了目录结构，对应的路径也别忘了改下，出于安全考虑，入口html文件中的JS代码只能通过script标签引用外部脚本文件，内嵌的JS代码会失效的。

popup.html

此时在Chrome中打开该扩展，应该可以看到和上图一样的结果了。

为了获取当前标签页的URL，需要申请 权限，在manifest.json中添加如下内容

扩展用到的权限都需要声明在permissions中，Chrome通过 方法提供了管理标签的方法与监听标签行为的事件，有关标签的 、 和 的操作（包括读取），需要声明 权限。现在来看看获取到的标签页的信息

如何调试

右键Chrome工具栏你的扩展会弹出一个窗口，选择审查弹出内容即可调试，但是这种方法比较低效。我们可以找到扩展的ID，然后直接访问

获取URL并生成二维码

先来写个封装下生成二维码的方法

获取URL生成二维码

这儿用到setTimeout(fn, 0)，其作用是将相关处理函数添加到运行队列的队尾，并保证在浏览器处理完其他事件之后再运行该函数。更多请搜索了解相关内容

从输入的URL生成二维码

到此，我们的Chrome 扩展就开发完了。接下来就是应用发布了，但是开发者验证需要5美元而且有点麻烦。

源码地址：https://github.com/liuxing/Ext-QRCode

一些资料

Chrome 扩展及应用开发：来自图灵社区的免费电子书

http://www.ituring.com.cn/book/1421

Chrome扩展开发文档：来自360极速浏览器翻译的官方文档。

http://open.chrome.360.cn/extension_dev/overview.html

Chrome 插件开发官方文档：

https://developer.chrome.com/extensions

本文完.