Chrome插件开发

Chrome插件开发经常要访问一些工具网站,根据页面上特定的取值。这些行为其实完全可以被视作重复劳动,有机会被脚本或者插件的自动行为取代。iMacro或者Greasemonkey都是做这件事的好工具,今天下午有时间,要不干脆写一个Chrome插件吧。

没有必要去Google什么教程,官方的文档已经非常详细,足够指导整个过程了。文档的质量非常好,又有很多例子,是很不错的示例。本质上,用到的技术还是HTML、JavaScript和CSS。我不在这里说太多,推荐大家去浏览一下,即便不做插件开发这件事情,过一下文档也是有收获的。如果你想尽快上手,解决重复劳动的问题而已,对这种好似路边花花草草的小东西没有钻研的兴趣,那么不妨和我一样去接触它来解决问题:

  • 下载上面的一个最简单的例子下来阅读;
  • 过一下API目录列表,看看自己要解决的问题,估计哪几个API会用到;
  • 打开这几个API的页面然后还是找里面的例子,照着写写甚至改改例子完成手里的功能。

这也是很多国外的书籍、文档和国内的最大的区别,国内的文章注重系统教学,但是我们阅读的很多国外的资料,特别是开源项目的文档很多都是从一个简单的例子开始的。对急性子来说,早点看到例子的反馈无疑会有成就感得多。

首先需要先写一个manifest.json文件,这个文件记录了这个插件的元信息,例如:

{
  "manifest_version": 2,
  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",
  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

上面也指定了插件的入口,可以是html文件,也可以是js文件。剩下的,问题就从做一个插件,变成了做一个HTML页面,或者是实现一段js脚本。

代码放入Chrome调试也很简单:

Chrome插件开发

“Load unpacked extension”加载自定义的插件文件夹就可以了,其中的”_generated_background_page.html”可以看得到浏览器中执行的插件的页面和脚本,可以在里面打断点调试。在完成以后,”Pack extension”可以把插件打包。

浏览器中的大部分可见元素,插件都可以定义行为和操作,比如书签、tab、window、cookie、history、event、菜单等等。所有这一切,都在一个叫做chrome的插件代码全局可见的对象中。以一段创建右键菜单的代码为例:

var id = chrome.contextMenus.create({
	"title": type,
	"parentId":parentId,
	"contexts":["selection"],
	"onclick": function(info, tab){
		...
	}
});

一眼即明。其中的onclick回调方法中,info对象携带了这次菜单项点击的相关信息,例如selectionText是菜单项点击时鼠标选中的文本,还有menuItemId这个点击的菜单项的唯一id,这个id很重要,是在菜单项创建的时候返回的标识;tab则是所在tab页的信息,例如当前tab的url等等。

值得一提的是,还有一组特殊的API被称作NPAPI,它甚至可以让插件调用编译好的dll文件,也可以与页面嵌入的embed对象通信,这就可以让浏览器根据插件来处理未知embed对象了。

文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接《四火的唠叨》

分享到:

发表评论

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Preview on Feedage: