编写一个键盘翻页的Chrome插件

1.新建一个文件夹

2.其中bg.js是主要部分，具体代码如下，jquery是引用的文件

 $(document).keydown(function(e) {
        var pagewin = GetPageSize();
        var pageHeight = pagewin["PageH"];
        var winHeight = pagewin["WinH"];
        var scroll = GetPageScroll();
        var scrollY = scroll["Y"];

        var activeElement = $(document.activeElement);
        
        if (activeElement.is("input") || activeElement.is("textarea")){
                //return false;
                return true;
        }

        //E: 69 进入输入框 bing可以 百度不行
        if (e.which === 69){
                $("input:first").focus();
                return false;
        }

        //Q: 72 到顶部
        if (e.which === 81) {
                $("html,body").animate({
                                        scrollTop : 0
                                }, 100);
        }

        //A:  到底部
        if (e.which === 65){
                $("html,body").animate({
                                        scrollTop : (pageHeight - winHeight)
                                }, 100);
        }

        //s: 83 下滑
        if (e.which === 83) {
                if (pageHeight > (winHeight + scrollY)) {
                        if (pageHeight >= (winHeight + scrollY + winHeight)) {
                                $("html,body").animate({
                                        scrollTop : (winHeight + scrollY - 78)
                                }, 250);
                        } else {
                                $("html,body").animate({
                                        scrollTop : (pageHeight - winHeight)
                                }, 250);
                        }
                }
        }
        
        //w: 87 上滑
        if (e.which === 87) {
                if (scrollY > 0) {
                        if (scrollY >= winHeight) {
                                $("html,body").animate({
                                        scrollTop : (scrollY - winHeight + 78)
                                }, 250);
                        } else {
                                $("html,body").animate({
                                        scrollTop : 0
                                }, 250);
                        }
                }
        }
        
        // 原来是f 现在没用上了
        if (e.which === 700) {
                if (pageHeight > (winHeight + scrollY)) {
                        if (pageHeight >= (winHeight + scrollY + 200)) {
                                $("html,body").animate({
                                        scrollTop : (scrollY + 200)
                                }, 100);
                        } else {
                                $("html,body").animate({
                                        scrollTop : (pageHeight - winHeight)
                                }, 100);
                        }
                }
        }

        //D: 68 短上华
        if (e.which === 68) {
                if (scrollY > 0) {
                        if (scrollY >= 200) {
                                $("html,body").animate({
                                        scrollTop : (scrollY - 200)
                                }, 100);
                        } else {
                                $("html,body").animate({
                                        scrollTop : 0
                                }, 100);
                        }
                }
        }
        
        //M: 77 根据预设的文字 获取对象添加点击事件
        if (e.which === 77) {
                var arr = ["下一页", "下一章", "Next","next", "下一篇", "向前","下一张","下一节"];
                for (var i = 0; i < arr.length; i++){
                        var obj1 = $("[title="+ arr[i] + "]")[$("[title="+ arr[i] + "]").length-1];
                        if (obj1){
                                obj1.click();
                        }
                        var obj2 = $(":contains(\"" + arr[i] +"\")")[$(":contains(\"" + arr[i] +"\")").length-1];
                        if (obj2){
                                obj2.click();
                        }
                }
        }
        
        //U: 85
        if (e.which === 85) {
                var arr = ["上一页", "上一章", "Prev", "prev", "上一篇", "向后", "上一张","上一节"];
                for (var i = 0; i < arr.length; i++){
                        var obj1 = $("[title="+ arr[i] + "]")[$("[title="+ arr[i] + "]").length-1];
                        if (obj1){
                                obj1.click();
                        }
                        var obj2 = $(":contains(\"" + arr[i] +"\")")[$(":contains(\"" + arr[i] +"\")").length-1];
                        if (obj2){
                                obj2.click();
                        }
                }
        }
        // r 刷新 ok
        if(e.which === 82){
                window.location.reload(true);
        }
        // x 后退 
        if(e.which === 88){
                history.go(-1);
        }
        // c 前进 ok
        if(e.which=== 67){
                history.go(+1);
        }
        // f 搜索 选中内容
        if(e.which=== 70){
		    var text = "";
			text = window.getSelection().toString();
		    if (text != "") {
				window.open("https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=" + text)
    		}
        }

});

function GetPageSize() {
        var scrW, scrH;
        if (window.innerHeight && window.scrollMaxY) { // Mozilla
                scrW = window.innerWidth + window.scrollMaxX;
                scrH = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight) { // all
                // but
                // IE
                // Mac
                scrW = document.body.scrollWidth;
                scrH = document.body.scrollHeight;
        } else if (document.body) { // IE Mac
                scrW = document.body.offsetWidth;
                scrH = document.body.offsetHeight;
        }
        var winW, winH;
        if (window.innerHeight) { // all except IE
                winW = window.innerWidth;
                winH = window.innerHeight;
        } else if (document.documentElement
                        && document.documentElement.clientHeight) { // IE 6 Strict Mode
                winW = document.documentElement.clientWidth;
                winH = document.documentElement.clientHeight;
        } else if (document.body) { // other
                winW = document.body.clientWidth;
                winH = document.body.clientHeight;
        } // for small pages with total size less then the viewport
        var pageW = (scrW < winW) ? winW : scrW;
        var pageH = (scrH < winH) ? winH : scrH;
        return {
                PageW : pageW,
                PageH : pageH,
                WinW : winW,
                WinH : winH
        };
};

function GetPageScroll() {
        var x, y;
        if (window.pageYOffset) { // all except IE
                y = window.pageYOffset;
                x = window.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) { // IE 6
                // Strict
                y = document.documentElement.scrollTop;
                x = document.documentElement.scrollLeft;
        } else if (document.body) { // all other IE
                y = document.body.scrollTop;
                x = document.body.scrollLeft;
        }
        return {
                X : x,
                Y : y
        };
}

3.manifest.json 里面是插件的配置信息，这里填写的很简单。

{
	"manifest_version": 2,
	"name": "快捷上下滑动、翻页",
	"description": "s快下滑、w快上滑；a底部;q顶部；M下一页、U上一页",
	"version": "1.0",
	"content_scripts":[
		{
			"matches": ["<all_urls>"],
			"js":["jquery-2.0.3.js","bg.js"]
		}
	]
}

matches:：匹配生效的网址

4.完成后可以在chrome的拓展程序打开开发者模式，然后点击加载已解压的拓展程序，然后选择上面的文件夹，即可安装插件

以开发者模式安装的好处是后期修改插件后只需要保存一下，然后再点击重新加载插件就可以更新插件。

问题是，每一次重新打开chrome都会提醒你停用这个插件，非常讨厌。解决办法是点击上面的打包拓展程序，选择插件的那个文件夹，然后自动打包成一个crx文件，拖到拓展程序这个页面就可以安装了。安装后参考下面的文章把插件添加到白名单，就不会每次启动都有提醒 了。

http://blog.csdn.net/free_wind22/article/details/52763291

之前一直直接压缩然后改成crx格式，结果一直报“”程序包无效“”，后来改成打包拓展程序就可以生成可以正常安装的插件。