从零开始写一个 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

本文完.

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180504G1X2MS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券