经常有人说程序员与产品经理之间的关系是“死对头”,网上还有程序员跟产品经理打起来的案例,而基本上都是由需求引发的。说到需求一天某懒产品经理提出了一个懒需求,大概是这样的:想从我们公司的cms后台点击进入另一个第三方后台的同时,将cms后台的一些数据自动填充到那个第三方后台的一些表单中。也就是说,以前他们需要把数据、文字一个一个拷贝粘贴到第三方后台,现在他们不干了,想让我帮他们实现这个自动“搬迁”数据的过程。这该怎么办呢?那个第三方后台也不是我能控制的了的啊,这时就要使用chrome扩展程序这个神器了,它可以实现浏览器上多个页面之间的数据传递呢!
一、编写代码
首先创建一个空文件夹qqmail用于存放这个扩展程序所有的代码文件,然后写一个配置文件manifest.json,配置文件各个参数配置和意义如下:
接下来,编写扩展程序弹窗页面popup.html:
好了,到这里这个简单的chrome扩展程序便开发完成了,目录的所有文件如下:
二、加载运行
代码编写完毕之后便可以开始加载这个扩展程序来运行了,在chrome上的操作示意图如下:点击“加载已解压的扩展文件”选中刚刚的目录qqmail,加载之后信息如下:至此,这个简单的chrome扩展程序已经开始运行。
三、扩展程序的运行原理
四、调试方法最后,简单说一下chrome扩展程序开发过程中的调试方法。弹窗页面脚本的调试方法:右键扩展图标,点击“审查弹出内容”即可弹出调试窗口,对弹窗页面进行抓包。contentscript脚本的调试方法则与一般调试相同,直接按“F12”按钮即可。而背景页脚本,由于没有具体页面,故无法直接调试,可通过弹窗页面脚本和contentscript脚本使用一定方法间接调试,因为这两个脚本都可获取到背景页脚本中的数据啊。修改了扩展程序代码之后,保存,然后直接在chrome扩展程序管理页面点击“重新加载”即可生效!
其实chrome扩展程序能做的事情还真挺多的,本文只是提供了一个很简单的例子来说明它的开发过程与运行过程而已。一般来说,我们可以通过在某个第三方网页的url末尾加上我们自定义的参数,由我们的chrome扩展程序的contentscript脚本根据这个参数去请求我们自己的接口,获取数据来填充这个网页的表单,或是做一些其他的操作来达到我们的目的,也可以在contentscript脚本中定义某个页面的某个按钮的点击事件,在事件响应函数中就可以做我们想做的事情就是了,当然了,操作页面上的内容之前,首先要先研究一下这个页面的html代码,不然你怎么知道去操作哪些控件呢是吧。