昨天写成了第一个 Chrome 扩展之后，手痒痒，想一鼓作气再写几个。正好室友在看考研信息，那个网站上做了表格的 hover 效果，鼠标指针移上去会变换背景颜色，室友觉得这个效果不错。所以我就写了个这样的扩展。今天花了一天的时间改了改，现在可以调整颜色和过渡时间了。下载：http://www.qblog.kilu.net/source/HoverHey.crx。（没有钱，本来想放到 Webstore 上去的，发现要先交5美元的注册费）

记录一下一些代码。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// 改变鼠标所在元素背景色。
var highlight = function(e){
  e = e || window.event;
  var _now = e.target || e.srcElement;
  oriBg = _now.style.backgroundColor;
  _now.style.backgroundColor = rgba;
  _now.style.webkitTransition = "background-color "+duration+"s ease-in-out";
};
window.addEventListener('mouseover', highlight);
// 向背景页面请求设置中保存的数据，其实就是交换json 。（因为脚本是inject 到页面中使用的，不能读取自身扩展的localStorage ）
chrome.extension.sendRequest({askfor: "rgba"}, function(response){
  rgba = response.RGBA;
  duration = response.duration;
});
// 背景页面响应请求，发送设置数据。
chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse){
    if(request.askfor == "rgba"){
     sendResponse({"RGBA": rgba, "duration": duration});
   }else{
     sendResponse({"RGBA": rgba, "duration": duration});
   }
  }
);
// 设置页面，写入localStorage 。
_saveOptions = function(){
  var rgba = "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
  localStorage.setItem("duration", duration);
};
// localStorage 的用法与window 的一个属性一样，只要存取直接量就行了，不需要记住相关的函数。

使用了 jQuery 的部分比较简单（在成功了之后才觉得挺简单的），没有记录在内。