现在网上的教程,还有某些国产书,讲个东西恨不得从一粒沙子开始讲起。教个chrome扩展,他从JS开始讲,学JS需要买你这种垃圾书?要么就是上来就给你个Hello World或者什么别的例子让你跟着做,拜托我们不是第一次学写程序好不?我一上来就把他们批判一番,就是为了说,本文适用于有点想法想快速做点东西的不了解Chrome扩展的暂时不求甚解的程序员,带你提纲挈领的了解他是什么样的然后可以通过查阅API进行开发。并不是专业前端,不足请大神指正。

前序知识

JavaScript,HTML

手册也放到前面,随时查阅:Chrome JavaScript APIs官方英文版入门指南

另外还有国内套壳浏览器的山寨手册,其实就是翻译了官方手册,中文版不过旧了点,鉴于Chrome的更新速度,这个仅供参考:百度浏览器APIs。360也有个类似的,但是那个实在太旧了不推荐。

他是什么样的?

我们这里说的扩展可以显示在右上角的图标(Browser Actions)、地址栏右边的图标(Page Actions)那些能实现某些功能的扩展,相信各位都用过。

Chrome扩展文件,后缀.crx,类似与apk他就是个压缩文件。可以把代码的文件夹或者crx文件拖入Chrome扩展界面进行安装。

扩展的构成就是一些网页、JS加上一个Manifest描述文件罢了,写一个简单的扩展基本还是写网页中的JS加调用一些Chrome提供的API。

几大部分

这几个部分是我理解的,知道这几个就知道扩展是怎么工作的。分别有

  • Manifest文件,JSON描述文件,必须
  • Popup页面,点击图标弹出来的那个,就是个网页
  • Background,运行在后台的网页/纯JS
  • Content Scripts,可以运行在你浏览的网页上的JS脚本
  • Options Pages,配置页面,一个用来配置的网页

他们之间通过Chrome定义的通讯相关的API可以联系起来一同工作,或者单独工作。

1、Manifest文件

是个JSON文件,文件名manifest.json,描述了扩展名字、版本、browser_action(图标点击出来的网页)等等所有信息,下面是个例子。(暂时不解释,随意理解下)

2、Popup页面

是一个HTML网页,Manifest中定义在browser_action项中。上面的browser_action配置展示了右上角的这个按钮的图标、标题和弹出页面的地址。

你可以在这里随意写一个网页并通过点击按钮打开它。可以通过点击按钮的右键选择[审查弹出内容]可以看到这个网页的Developer Tools,由此可知此页面的运行环境是独立的,跟你访问的页面不同,是无法对其进行操作的。

3、Background脚本

是一个或者多个JS脚本或网页。在扩展运行的时候会自动在后台运行这个脚本,运行的环境也是一个单独的网页。当然Chrome默认是不会让你一直在后台占用资源的,一些策略下会被“回收”。这个页面的Developer Tools在管理扩展程序页面的扩展的[检查视图:背景页]。

Background现在貌似是不推荐了,转而由Event Pages代替。其实是一码事,配置一样,只不过代码的内容让你使用事件而不是在后台“无限循环”。

4、Content Scripts

这就是允许你在别人的网页中插入自己的JS、CSS,插入的JS可以获取页面的DOM元素,与background脚本通讯。注意这里的JS运行环境并不在访问的网页的JS容器中,也就是虽然可以获取页面DOM元素,但是并不能调用页面环境中的JS函数。Manifest中定义在content_scripts下,配置项的意思看看也就能明白。

5、Options Pages

这个就是通过Chrome进入的扩展的配置页面,也是一个普通的HTML网页,可以在其中使用JS本地储存接口储存配置,或者接入Google的配置同步等等,都需要通过JS实现。

接下来

应该怎么开始

如果看完前面还不知道扩展是什么东西的话,我想你应该去搜索“手把手教你Chrome扩展”或“从零开始扩展开发”等关键字。如果看明白了,也就知道怎么开始写你的扩展了。

比如想通过点击图标做一些事,步骤大概是下面这样:

  1. 写一个适配小窗口的HTML网页,用于Popup页面
  2. 写这个页面中的JS以完成你想要的工作

其他的类似。

另一个重要的操作就是不同页面间的通讯。比如点击按钮,在页面上操作个开关,后台脚本就做一件事。

发送消息

这两个函数分别可以发送消息和接受消息,见文档。大致就是在一个页面上通过某种条件触发发送消息,并注册消息返回来时的回调函数。另外一个页面事先注册了消息接收的监听器,当接收到消息后就会执行你的回调函数。

其他功能

Chrome平台当然提供了非常多的API以供扩展中的JS调用,其中包括但不限于以下一些。大多数功能需要你在Manifest文件的permissions项中配置,也就是向Chrome申请相应的权限(怎么能允许你扩展随便乱搞?),有些权限是需要用户同意的。另外单独说明下网络访问虽然API不是Chrome平台提供的,但是权限也是需要设置的,见permissions文档以及上面的Manifest例子中前两个权限。

这些API其官方文档说明非常清楚,可以直接看文档。

  • alarms,时钟,Chrome中不允许使用setInterval进行定时操作(这样使用会有问题,比如脚本被干掉了),那么就使用alarms来产生时钟事件,并通过监听器捕获。
  • extension,扩展管理能力
  • storage,本地储存能力
  • tabs,标签管理能力,如设置当前标签等
  • ……

另外的问题

通常我们自己写的扩展只是给自己或者别人提供下方便,并不会花美刀上Chrome应用商店。但是chrome现在禁止非官方商店下载的扩展运行,解决方法看《解决chrome第三方扩展被停用》。

最后再提一点为什么要开发Chrome扩展而不是其他类型的工具呢,除了有些必须在页面完成的工作和优化页面以外,我觉得最大的优点就是Chrome扩展可以与浏览器共享登陆状态,在搞特定作用的爬虫时完全可以省掉登陆状态的研究直入主题。

 

—-EOF—-