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.ο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了。

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

DIY chrome浏览器漫画翻页插件相关推荐

android 自动翻页插件,网页自动翻页Chrome插件下载
AutoPagerize是一款在谷歌浏览器上运行的网页自动翻页chrome插件,AutoPagerize插件可以让你通过鼠标滚轮翻页.当你的鼠标滚轮滚动到页面底部时,再向下就会发现下一页的内容.操作简 ...
Chrome浏览器新标签页设置首页主页修改添加网站Infinity插件好用
Infinity new tab 是一款美观实用的chrome 新标签页.最常访问的网站添加,修改,删除网址都有,每日一图,云备份等功能都具备.是一款基于html5的Chrome扩展程序,它重新定义了 ...
uAutoPagerize – 自动翻页插件
uAutoPagerize – 自动翻页插件 uAutoPagerize – 自动翻页插件背景 uAutoPagerize – 自动翻页插件介绍 uAutoPagerize – 自动翻页插件功能 uA ...
mac下chrome浏览器的标签页、进程和内存分配
因为最近要解决网页经常崩溃的问题,所以去研究了一下chrome浏览器的标签页和进程的关系,以及标签页对应进程的内存分配. 标签页和进程的对应关系当chrome浏览器开启但是没有任何一个标签页的时候, ...
Chrome浏览器录屏扩展插件
Chrome浏览器录屏扩展插件,可以录制网页操作或者桌面操作.生成MP4 Loom https://chrome.google.com/webstore/detail/loom-video-recor ...
Chrome浏览器使用谷歌翻译插件的正确方法
大家好,我是爱编程的喵喵.双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中.从事机器学习以及相关的前后端开发工作.曾在阿里云.科大讯飞.CCF等比赛获得多次Top名次.喜 ...
react封装翻页插件
插件演示今天用react封装一个翻页插件,先给大家看一下效果: 翻页插件上面的文字是从后台获取的. 插件说明这个插件有五部分组成:首页.上一页.中间显示数字.下一页.尾页.具体的功能是:如果当前页 ...
Chrome浏览器好用的插件分享
1.Better History,Chrome自带的历史记录管理器不好用,要查找一个以前的历史记录要翻很长时间,而且我的几个月前的历史记录总是消失.这个插件可以按照时间来查找历史记录,比自带的好用点. ...
html分页自动加载,AutoPagerize插件，网页自动翻页插件，自动加载分页网站
AutoPagerize,是一款可以实现网页自动翻页的浏览器插件,该插件会自动缓存下一页网页,将翻页式的内容变为瀑布流的形式,无需手动点击翻页,即可自动链接到下一页. 用于自动加载分页网页的浏览器扩展 ...

DIY chrome浏览器漫画翻页插件

DIY chrome浏览器漫画翻页插件相关推荐

最新文章

热门文章