chrome插件开发确实比firefox简单多了,而且不用重启浏览器。现在要实现一个功能：在google的搜索页显示网站的归属人。因为我们有上千个网站，几十个人维护，在google搜索一个词，我都不知道这个网站是不是我们的，是谁的。效果如下：

chrome插件效果图

我们有一个数据文件，标明人名对应的域名。其实就是在google搜索页(http[s]://www.google.com[.hk])运行一个js，然后更改一下dom就行了。所以我们只需解决：

chrome插件特定url注入JS

通过google，搜索到了方法。

# STEP1 建立manifest.json里面的内容：

{
  "manifest_version": 2,
  "icons": { "128": "icon.png"}, 
  "name": "判断网站归属",
  "description": "根据网站列表，判断google搜索页面中的网站是谁的。",
  "version": "1.1",

  "permissions": [
    "http://www.google.com.hk/*",
    "http://www.google.com/*",
    "https://www.google.com/*",
    "http://203.208.46.145/*"
  ],

  "content_scripts": [
    {
      "matches": [
 "http://www.google.com.hk/*",
     "http://www.google.com/*",
     "https://www.google.com/*",
     "http://203.208.46.145/*"
 ],
      "js": [ "script.js"]
    }
  ]
}

# STEP2 编写script.js

上面得mainfest标明，在相应的url上，页面加载完了以后运行script.js。里面写上要运行的js代码就行了。

(function(){
var data={"aaData":[]};

var info={};

for(var d in data.aaData){
 var sites=data.aaData[d][3].split(",");
 for(var i in sites){
  info[sites[i].substr(8).replace(/(^\\s*)|(\\s*$)/g, "")]=data.aaData[d][1];
 }
}
var lastTitle="";

function check(){
 var h3=document.getElementsByClassName("r");
 var count=1;
 for(var i=0,len=h3.length;i<len;i++){
  var a=h3[i].getElementsByTagName("a").item(0);
  if(a){
   var href=a.href;
   href=href.substr(href.indexOf("/",href.indexOf("/")+1)+1);
   href=href.substr(0,href.indexOf("/"));
   var owner="";
   for(var site in info)if(site==href||"www."+site==href)owner=info[site];
   if(!owner)
    for(var site in info)if(href.indexOf(info[site])>-1)owner=info[site];

   a.onmousedown="";
   var span=document.createElement("span");
   span.innerHTML=count+++". "+(owner?"<span class='lsbb kpbb'>"+owner+"</span> ":"");
   h3[i].insertBefore(span,a);  
  }
  
 }
 if(h3&&h3.length>0)lastTitle=h3[0].innerHTML;
}

onhashchange=function(){
 var checkThread=setInterval(function(){
  try{
   if(document.getElementsByClassName("r")[0].innerHTML!=lastTitle){
    check();
    clearInterval(checkThread);
   }
  }catch(e){}
 },100); 
};
check();
})();

需要注意的是，google有个instant search，在这种情况下，翻页和重新搜索，都不会出发document.onload。所以要写一个方法判断一下。即：onhashchange。

# STEP3 搞个png图标

随便搜索一个，放到对应的文件夹里面就行了。

# 其他

熟悉了开发流程，其实像firefox下油猴的功能，chrome就相当好实现了。但是更底层的api，估计需要查看官方文档了: http://developer.chrome.com/extensions/‎