DIY chrome浏览器漫画翻页插件

最近迷上了火影忍者，在爱漫画网站上看的漫画版。每看完一页都要用鼠标点一下翻页键，时间长了觉得有些不爽。要是按上下键看漫画时，按一下旁边的键，就可以翻到下一页，会舒服不少。

用的是chrome浏览器，装了一些插件，不过应该没有能满足我这个简单需求的，再加上对浏览器插件有些好奇，还是DIY一把吧。

阅读google的扩展编写帮助文档（http://code.google.com/chrome/extensions），发现写一个扩展还是比较简单的，只用chrome浏览器加记事本就可以了。

插件的代码和图标资源都要放到一个文件夹里。必须要有一个名为manifest.json的插件描述文件。json格式类似简化的xml，用来存储一些键值对。chrome规定了一些键名（插件属性名），我们在manifest.json里给这些键名赋值就好了。例如我这个插件的描述文件部分内容为：

{
	"name": "漫画翻页插件",
	"version" : "1.0",
	"description" : "用于爱漫画网站（www.imanhua.com）的漫画翻页插件",
	"icons": { "128": "test.png" },
        "......//其它属性键值对
}

插件有按钮型，网页型，脚本型几种。漫画翻页插件需要实现成脚本型，在浏览漫画网页时，插入一段javascript代码，监听按键，如果按下了翻页键，则模拟点击了翻页超链接。

在manifest.json里加上脚本型入口

"content_scripts":[
{
"matches": ["<all_urls>"],             //对于所有网页均插入这段脚本（这里只是图省事，其实应该匹配看漫画网站的某些网页）
"run_at": "document_end",          //正常网页解释完再插入脚本
"js":["contentscript.js"],                 //插入的脚本文件名，与manifest.json，图标等放在一起即可
"all_frames": true
}

编写这个插件前，我对javascript也是一窍不通。在网上简单看了些教程，和几个chrome插件的源代码。拼凑了下列代码

document.onkeydown=function try_next(e){
	var current_key=e.keyCode||e.which||e.charCode;
	if(current_key == 34)
		simu_goto_next();
}

function simu_goto_next(){
	var links = document.querySelectorAll("a");
	for (var i  = 0; i < links.length; ++i) {
		var text = links[i].href;
		if (text == "javascript:next();"){
			var evt = document.createEvent('HTMLEvents');
			evt.initEvent('click',true,true);
			links[i].dispatchEvent(evt);
			return;
		}
	}
 }

这样插件就编写完成了。从chrome菜单按钮-》工具-》扩展程序-》开发人员模式-》载入正在开发的扩展程序，选择插件所在的文件夹就ok了。

编写这个简单插件的过程中还是学到了不少东西。好了，看火影忍者去了！