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

編寫這個簡單插件的過程中還是學到了不少東西。好了，看火影忍者去了！