[N天一练]打造自己的chrome

        chrome有两种方式可供我们使用来扩展chrome的功能，一种是扩展程序，一种是js脚本。这两种扩展方式能使我们开发出一系列的便利的工具。

        首先讲一讲chrome扩展程序开发。前些日子搞了一个https服务器，但是发现swithysharp下的手动配置中，配置了https代理不可用，于是就想了解一下chrome的扩展程序到底是如何实现的。

        要开发一个chrome扩展程序其实很容易，按照教程可以自己手动搭建一个：http://developer.chrome.com/extensions/getstarted.html，更多的api介绍可以参见：https://sites.google.com/site/crxdoczh/devguide。

        看了后一个文档知道swithysharp中的代理应该通过生成pac内容，然后动态的刷到浏览器内存中，以使代理生效。然后在chrome浏览器中打开 工具->扩展程序后找到该插件，然后会看到两个链接，一个是options.html,另一个是main.html。其中options.html存放了switchysharp的配置页面，main.html页面中存放了实现该插件主要功能的js。包括根据配置项生成pac文件流保存到浏览器内存中，替换原生代理中的代理配置。

        接下来就是常规的页面js debug,发现了在RuleManager中的getPacRuleProxy(profileId)方法中少加了对https的支持，只要加入即可：

RuleManager.getPacRuleProxy = function getPacRuleProxy(profileId) {
	var proxy = "'DIRECT'";
	if (profileId != ProfileManager.directConnectionProfile.id) {
		var profile = ProfileManager.getProfile(profileId);
		if (profile != undefined && profile.proxyMode != ProfileManager.ProxyModes.direct) {
                if (profile.proxyMode == ProfileManager.ProxyModes.manual) {
                if (profile.proxyHttp && profile.proxyHttp.length > 0)
                     proxy = "PROXY " + profile.proxyHttp;
                /**加入我
                if (profile.proxyHttps && profile.proxyHttps.length > 0)
                     proxy = "HTTPS " + profile.proxyHttps;
                */
                if (profile.proxySocks && profile.proxySocks.length > 0
                       && !profile.useSameProxy && profile.proxySocks != profile.proxyHttp) { // workaround for Gnome
                if (profile.socksVersion == 5)
                     proxy = "SOCKS5 " + profile.proxySocks + (proxy != "'DIRECT'" ? "; DIRECT" : "");
                else
                     proxy = "SOCKS " + profile.proxySocks + (proxy != "'DIRECT'" ? "; DIRECT" : "");
                }
                if(proxy != "'DIRECT'") proxy = "'" + proxy + "'";
                } else if (profile.proxyMode == ProfileManager.ProxyModes.auto) {
                     var script = RuleManager.profilesScripts[profile.id];
                if (script) {
                     proxy = script.functionName + "(url, host)";
                }
           }
         }
       }
       return proxy;
};

    只要加入注释部分即可支持https代理了。后来就想去找源代码，后来在code.google.com上找到了相关源码，但是一直下不到0.9版本的分支，这几天懒得去研究，就想有没有其他办法可以拿到源代码，发现在windows下可以使用7-zip工具来对插件包进行解压，得到文件直接找到相应文件进行修改，然后在工具->扩展程序界面用“导入正在开发的扩展程序”功能，找到相应文件夹导入即可。

    然后讲一讲chrome下的js脚本开发，从chrome 4之后chrome就开始内置了greasymonkey user script的支持。如何开发greasymonkey脚本呢？

    首先，新建一个文件，在文件头要声明一些基本信息，如下：

@author      作者信息
@namespace	脚本命名空间
@name		脚本名
@description	脚本描述
@include 	http://*.XXXX.*    //在哪些页面中生效
@exclude	http://*.XXXX.*    //在哪些页面中不生效

    chrome下并不完全支持所有greasymonkey中的@命令，其中不支持的有：@require, @resource, unsafeWindow, GM_registerMenuCommand, GM_setValue, or GM_getValue等，并且GM_xmlhttpRequest仅在同源下生效。这里就会有一个很麻烦的东西，如此引入一些基本的js,比如说jquery的基本库。在chrome下开发脚本只能通过手动的给页面添加jquery.js来实现，网上有很多，找一个比较好：

// ==UserScript==
// @name           Example from http://stackoverflow.com/q/6834930
// @version        1.3
// @namespace      http://stackoverflow.com/q/6834930
// @description    An example, adding a border to a post on Stack Overflow.
// @include        http://stackoverflow.com/questions/2246901/*
// ==/UserScript==

var load,execute,loadAndExecute;load=function(a,b,c){var d;d=document.createElement("script"),d.setAttribute("src",a),b!=null&&d.addEventListener("load",b),c!=null&&d.addEventListener("error",c),document.body.appendChild(d);return d},execute=function(a){var b,c;typeof a=="function"?b="("+a+")();":b=a,c=document.createElement("script"),c.textContent=b,document.body.appendChild(c);return c},loadAndExecute=function(a,b){return load(a,function(){return execute(b)})};

loadAndExecute("//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", function() {
    $("#answer-6834930").css("border", ".5em solid black");
});

       不过在有些网站上使用会有问题，所以最好还用原生的javascript写比较好。

       好了，以上就是chrome的扩展开发。