Chrome扩展程序开发实战

导语 这个小插件实现了新闻浏览,并能将你感兴趣的内容随手收藏到浏览器的收藏夹中。感兴趣的同学也可以自己爬取喜欢的内容来展示。

DEMO中使用了淘宝的接口,所以目前你看到的新闻都是各种包包。当然插件的应用场景我们可以大开脑洞,电商网站可以考虑通过这种方式,推荐每天有哪些值得买,知乎可以推荐那些值得看,微博可以推荐每日热门。感兴趣的同学也可以自己爬一些喜欢的网站的新闻啊、文章啊之类的输出接口,然后上班闲暇时间可以点开浏览、收藏。

先上图:

Chrome扩展程序开发实战

 

为什么用淘宝的商品接口呢?

因为经过测试,目前扩展程序中所使用的接口必须是HTTPS协议的,HTTP被认为是不安全的链接,不符合CSP( W3C关于Content Security Policy的定义  Mozilla关于CSP的定义)规则。找了一下我厂、网易和今日头条,都还是http,知乎、搜狗已经是https,但从前端没找到接口。无奈之举,选了淘宝的商品查询接口。

// 对于http接口的数据内容,可以通过iframe的方式将需要的网页嵌套到扩展程序页面中来使用。

扩展程序基本架构介绍

一个扩展程序由background page,popup page,contents script构成。

Chrome扩展程序开发实战

Chrome扩展程序开发实战

background page可以理解为一个不可见的页面,我们可以在这个页面中绑定一些事件和需要执行的逻辑。popup page是我们可以看见的弹出页面,是扩展的主界面,页面结构、样式都可以在该html文件中设置。

有时候,我们也需要与当前的页面交互,例如在一些需要网页翻译、划词搜索等功能的插件中,content script就是必不可少的了。content script与用户当前访问的页面page共同使用同一份页面的dom,content script能够直接访问到当前页面中的内容,也可以对页面DOM进行修改。但是需要注意的是,content script和页面仅仅只是共享了同一个dom树的访问,但两处的脚本是分别在不同的沙盒中运行的,因此不能够实现互相访问和调用对方的函数和方法。

page action跟browser action

扩展程序可以分为两种,page action和browser action。

page action指的是和特定页面相关的,它的图标会显示在地址栏部分,可以跟当前访问的URL地址进行交互,只有在访问某些特定网页时才展示该扩展的图标,并提供功能。而browser action是与页面URL无关的一种通用扩展。例如JSON解析器,截屏插件等。

本文的示例DEMO比较简单,属于入门级,并未用到页面间通信等高级功能,将在后续的文章中进行详细介绍。下面从具体的DEMO出发,解析一个最简单的chrome扩展程序是如何开发的。

DEMO “每日新闻”的具体实现

首先介绍一个扩展程序到底包含哪些内容,每个扩展程序都应该包含下面的文件:

  • 一个manifest文件
  • 一个或多个html文件(如果这个扩展程序是一个皮肤,可能需要多个html文件)
  • 可选的一个或多个javascript文件
  • 可选的任何需要的其他文件,例如图片

在开发扩展程序时,需要把这些文件都放到同一个目录下。(如果扩展程序中用到例如jquery、图片等文件时,不应该直接引用cdn链接,而应该把jquery或图片文件同样放在这个目录下。)

示例:

Chrome扩展程序开发实战

mainfest.json

每一个扩展程序都需要一个JSON格式的mainfest文件,命名为mainfest.json,文件中提供了包括扩展程序名称、版本、描述、权限等内容。一般只需要根据自己扩展程序的要求填写一些必选字段即可,例如 manifest_version,name,version。content_security_policy 和permissions需要根据具体业务需求来填写。在本文的新闻demo中用到了收藏夹的功能,因此需要在mainfest文件中设置bookmarks权限。

收藏夹功能

页面通过XHR获取并展示数据都是比较基础的内容,此处不再赘言。下面介绍一下收藏夹功能的使用:

除此之外,我们还可以通过chrome提供的API访问cookie,通过chrome.tabs访问TAB页面,通过chrome.history来访问浏览器历史记录等。

如何发布一个扩展程序:

发布扩展程序时,这个目录全部打包到一个名是.crx的压缩文件中。如果使用Chrome Developer Dashboard,上传扩展程序,可以自动生成.crx文件。

在本地测试时,打开扩展程序页面,通过开发者模式,加载已解压的扩展程序,就可以在浏览器上看到啦!
Chrome扩展程序开发实战

效果如下:
Chrome扩展程序开发实战

总之,浏览器扩展程序开发很简单。所有的内容和API都可以在文末的文档中找到,资源非常丰富,因此对于一些API之类的说明就不多写啦。

然而不幸的是,从11月起,chrome将不再支持新扩展程序在除chrome OS以外的操作系统使用。但我们仍然可以写一些方便自己工作的小插件,在本地开发者模式下使用。不过chrome也会常常弹出提示提醒你这样是不安全的,可能会有风险。但作为开发者的我们,使用自己写的插件大可对此忽略不计。

Chrome扩展程序开发实战

详情链接:https://blog.chromium.org/2016/08/from-chrome-apps-to-web.html

参考文献:

https://developer.chrome.com/extensions/overview