最近迷上了火影忍者,在爱漫画网站上看的漫画版。每看完一页都要用鼠标点一下翻页键,时间长了觉得有些不爽。要是按上下键看漫画时,按一下旁边的键,就可以翻到下一页,会舒服不少。
用的是chrome浏览器,装了一些插件,不过应该没有能满足我这个简单需求的,再加上对浏览器插件有些好奇,还是DIY一把吧。
阅读google的扩展编写帮助文档(http://code.google.com/chrome/extensions),发现写一个扩展还是比较简单的,只用chrome浏览器加记事本就可以了。
插件的代码和图标资源都要放到一个文件夹里。必须要有一个名为manifest.json的插件描述文件。json格式类似简化的xml,用来存储一些键值对。chrome规定了一些键名(插件属性名),我们在manifest.json里给这些键名赋值就好了。例如我这个插件的描述文件部分内容为:
在manifest.json里加上脚本型入口
"content_scripts":[
{
"matches": ["<all_urls>"], //对于所有网页均插入这段脚本(这里只是图省事,其实应该匹配看漫画网站的某些网页)
"run_at": "document_end", //正常网页解释完再插入脚本
"js":["contentscript.js"], //插入的脚本文件名,与manifest.json,图标等放在一起即可
"all_frames": true
}
编写这个插件前,我对javascript也是一窍不通。在网上简单看了些教程,和几个chrome插件的源代码。拼凑了下列代码
document.οnkeydοwn=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了。
编写这个简单插件的过程中还是学到了不少东西。好了,看火影忍者去了!