最近迷上了火影忍者，在愛漫畫網站上看的漫畫版。每看完一頁都要用鼠標點一下翻頁鍵，時間長了覺得有些不爽。要是按上下鍵看漫畫時，按一下旁邊的鍵，就可以翻到下一頁，會舒服不少。

用的是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浏览器漫画翻页插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。