前几天某懒产品经理提出了一个懒需求,大概是这样的:想从我们公司的cms后台点击进入另一个第三方后台的同时,将cms后台的一些数据自动填充到那个第三方后台的一些表单中。也就是说,以前他们需要把数据、文字一个一个拷贝粘贴到第三方后台,现在他们不干了,想让我帮他们实现这个自动“搬迁”数据的过程。这该怎么办呢?那个第三方后台也不是我能控制的了的啊,这时就要使用chrome扩展程序这个神器了,它可以实现浏览器上多个页面之间的数据传递呢!
关于chrome扩展程序的开发,网上有一个比较完整的中文翻译的开发文档——,有兴趣可以翻阅一下。chrome扩展程序能做的事情还是挺多挺好玩的,不过这篇博文我只是想以一个很简单的例子来讲解一下它的基本开发过程,从代码编写到加载运行,最后再说明一下整个扩展程序的运行原理以及调试。这个简单例子是这样的:将一些QQ邮箱的账号密码写在文件中,然后进入QQ邮箱登陆界面的时候带入一个id参数,chrome扩展程序根据这个id去读取QQ账号密码自动填充到登录表单中,无需我们手动输入,然后这个扩展程序还要能记录邮箱的登录情况。废话不多说,这就开始了!
首先创建一个空文件夹qqmail用于存放这个扩展程序所有的代码文件,然后写一个配置文件manifest.json,配置文件各个参数配置和意义如下:
{ "name": "QQ Mail Extention",//扩展程序名称 "version": "1.0",//版本 "manifest_version": 2,//一定要为2,否则会报错 "description": "This Extention can help you manifest_versionto login QQ Mail faster!",//扩展程序描述 "browser_action": { "default_icon": "logo.png",//默认图标 "default_popup": "popup.html"//点击图标时弹出的页面 }, "background": { "persistent": true, "scripts": ["background.js"]//扩展程序背景页脚本 }, "content_scripts": [{ "all_frames": true,//是否运行在页面所有frame中,设置为true时扩展程序在iframe中也能起作用 "matches": ["*://*/*"],//定义那些页面需要注入content script脚本 "js": ["http://www.likecs.com/jq.1.8.2_dev.js","content_scripts.js"]//需要向页面注入的content script脚本 }], "permissions": [//扩展程序权限 "tabs", "webNavigation" ] }