你的位置:首页 > 软件开发 > Java > 【前端工具】Chrome 扩展程序的开发与发布

【前端工具】Chrome 扩展程序的开发与发布

发布时间:2017-12-07 20:00:03
关于 chrome 扩展的文章,很久之前也写过一篇。清除页面广告?身为前端,自己做一款简易的chrome扩展吧。本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点。 什么是 chrome 扩展程序扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序。对于前端工 ...

【前端工具】Chrome 扩展程序的开发与发布

关于 chrome 扩展的文章,很久之前也写过一篇。清除页面广告?身为前端,自己做一款简易的chrome扩展吧。

本篇文章重在分享一些制作扩展的过程中比较重要的知识及难点。

 

什么是 chrome 扩展程序

扩展程序是一些能够修改或增强 Chrome 浏览器功能的小程序。对于前端工程师而言,其最大的便利就是我们可以应用我们熟悉的 HTML、CSS 、 Javascript 等技术来制作扩展程序。

如下图所示,这些图标就是各种开发者提供的 chrome 扩展程序:

【前端工具】Chrome 扩展程序的开发与发布

 

区分扩展与插件

很多人会误称扩展程序为插件,这里有必要区分一下。

"扩展" 和 "插件",其实都是软件组件的一种形式,Chrome 只不过是把两种类型的组件分别给与了专有名称,一个叫 "扩展",另一个叫 "插件"。

  • 扩展(Extension )

指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件,工作在浏览器层面,使用 HTML + Javascript 语言开发。比如著名的 Adblock plus。

  • 插件(Plug-in )

指的是通过调用 Webkit 内核 NPAPI 来扩展内核功能的一种组件,工作在内核层面,理论上可以用任何一种生成本地二进制程序的语言开发,比如 C/C++、Delphi 等。比如 Flash player 插件,就属于这种类型。一般在网页中用 <object> 或者 <embed>标签声明的部分,就要靠插件来渲染。

 

开发自己的扩展程序

OK,简单了解完什么是扩展程序后,下面我们来看看如何开发一款扩展程序。

当然,首先我们要搞清楚为什么我们需要扩展程序,它有什么作用呢?

就我而言,最近我开发了一款简单的扩展程序 —— URLHelper 。你可以在 chrome 应用商店下载到它:

【前端工具】Chrome 扩展程序的开发与发布

开发它的原因是因为,在我们的业务开发中,开发过程经常需要面对超长的 URL,带有 N 多个参数,它可能长这样:

不是开玩笑,真实情况可能比这个还长。【前端工具】Chrome 扩展程序的开发与发布

因为调试的需要,经常要找到某一个特定的参数,获取或者修改它的值。

读者可以尝试一下,贴到浏览器中,找到 cid 参数,修改为另外一个值。如果没有工具,这个过程是很痛苦的。一次还好,如果一天重复这个动作几十次,就有必要考虑借助工具了。

基于这个出发点,我制作了 URLHelper 这个扩展,它的界面大概长这个样子,可以非常方便的对 URL 参数进行删查改排序,修改参数刷新页面:

【前端工具】Chrome 扩展程序的开发与发布

所以,扩展程序我觉得每个前端都可以开发,用于解决我们工作生活中在使用浏览器遇到的各种问题,譬如有名的 :

  • WEB 前端助手 提供的字符串编码、JSON 格式化
  • PageSpeed 提供的页面性能检测等等
  • 二维码生成器 将 URL 转化成对应的二维码

 

扩展程序架构

OK,接下来聊聊一些扩展程序开发相关的东西。

关于扩展程序的相关文档,可以看看这些文章:

  • 建立 Chrome 扩展程序
  • 扩展开发文档

首先,我觉得最重要的,是要了解整个扩展程序的基本架构,有几个非常重要的文件:

 

Content scripts -- 内容脚本

Content scripts 脚本是指能够在浏览器已经加载的页面内部运行的 javascript 脚本。可以将 content script 看作是网页的一部分,而不是它所在的扩展程序的一部分。

它可以实现的一些功能的例子及适用场景,大致如下:

  • 在网页中找出未链接的 URL,并将它们转换为超链接
  • 查找特定的信息或者 DOM 结构,增加字体大小,使文本更具有可读性
  • 发现并处理 DOM 中的微格式数据

我们可以这样理解它,在页面加载完毕之后,我们的扩展程序会向这个页面注入一个或者额多个脚本,这个脚本可以获得浏览器所访问的 web 页面的详细信息。也就是我们可以利用这个脚本收集页面上各种我们需要的信息。

以我上面的 URLHelper 为例子,在这个扩展中,content script 的作用就是拿到页面的 URL ,然后传递给扩展程序的 background 页面或者 popup 页面。

当然,如果你只需要一个脚本程序每次注入页面后获取页面相关的信息,然后上报到自己的服务器之类的功能,这个扩展程序只需要这一个 Content scripts 就够了。它不需要与其他界面或者脚本进行交互和信息传递,扩展帮你做的就是自动注入这个脚本而需要你每次手动注入。

 

popup -- 弹窗页面

popup 页面也非常好理解,在 manifest.json 的定义里它是 browser_action, 就是我们扩展程序的界面(弹窗页),就是上面的那张截图:

【前端工具】Chrome 扩展程序的开发与发布

这个界面其实就是一个 Web 页面,点开任意一个扩展页面,右键都可以看到弹出检查选项,点击这个选项,就会弹出一个开发者工具,我们就可以愉快的开始对这个页面进行查看 DOM 结构、查看网络状态、 Debug 等任意操作了:

【前端工具】Chrome 扩展程序的开发与发布

然后:

【前端工具】Chrome 扩展程序的开发与发布

重点,这个 popup 页面完全由我们控制,就像一个普通的 Web 页面,我们可以利用 Chrome 的消息传递机制利用这个页面和 Content scripts 进行交互,也就可以完成对页面的某些控制。

以我上面的 URLHelper 为例子,在这个扩展中,当我点击扩展程序界面中的刷新页面按钮的时候,会从扩展界面的 DOM 上将修改后参数取出拼好,并且通过 Chrome 的消息传递机制 传递给 Content scripts,然【前端工具】Chrome 扩展程序的开发与发布

这里付款中国内地的银行卡好像都不行,只能选择国外的 VISA 等储蓄卡、信用卡进行支付,地区选择美国即可。

 

付款完成,可以愉快的发布了

OK,最后付款完成,就可以顺利发布了,稍等片刻,就可以搜索到我们自己开发扩展程序了!

 

后记

其实开发一款 Chrome 扩展程序真的不难,而且非常有意思。感兴趣但又怕麻烦的同学可以参考我这个小项目改改。Github -- URL Helper

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

原标题:【前端工具】Chrome 扩展程序的开发与发布

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。